MDNHIE授業JS:スワイプでカウンター増減、数値をストレージに保存JavaScriptTwitterFacebookはてブPocketLINE2019.08.01スポンサーリンクJavaScriptで、スワイプ処理とローカルストレージ処理を組み合わせて、ブラウザ上で数値が保存されるカウンターを作ってみました。カウンターの数値は左右のスワイプで増減します。スワイプした際、数値をローカルストレージに保存しています。再度ブラウザを起動した時にローカルストレージ保存内容を読み取って数値が表示される仕組みになっています。サンプル※左右にスワイプすることで数値が増減します。ブラウザ終了後再度開くと数値が保存されていることが確認できます。スワイプカウンター(ストレージ保存)のサンプルPC上でスワイプのチェックするには以下の記事を参考にしてください。Chromeの開発者モードでスマホのタッチ・スワイプをチェックするChromeの開発者モードはかなりWeb開発者にとっては便利です。パソコンのChromeブラウザ上でスマホのタッチ・スワイプをチェックする方法です。dianxnao.com2019.07.22上記サンプルは以下の2つの記事内容を組み合わせています。スワイプ部分JS:JavaScriptでスワイプ処理をするライブラリを使わずにJavaScript単体でスマホなどのスワイプ処理を実現する方法です。今回ローカルストレージの例として取り上げるのは、サイトの背景色を変更すると、次回アクセスした際に同じ背景色で表示されるというものです。数値を+1する}});}ローカルストレージに保存されるデータはあくまで文字列なので今回のようにカウントする(計算を伴う)場合は、一旦ストレージから読み取ったデータを計算できるようにする為にNumber関数等で数値化する必要があります。今回のサンプルプログラム全体を示します。サンプルを改良してみる今回左右のスワイプのみでしたが、例えば下方向にスワイプすると数値をリセットできるようにするには、今回利用していないY方向のタッチ位置を利用します。タッチ開始時と指を動かしている最中常にタッチしたXY座標を取得しているのでプログラムを少し変えるだけで実現できます。e.changedTouches[0].pageY;});サンプルに追加するなら以下のようにします。表示とローカルストレージ保存}}下方向スワイプに対応したバージョンスワイプカウンター下方向スワイプ対応バージョンのサンプル他にも応用はききそうです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。ホームJavaScriptスポンサーリンクこの記事を書いている人dennou好きな食べ物はトマトです。学生時代は授業中よく寝ていました。このサイトがお役に立てばうれしいです。views2017.10.212017.11.16VS2017:「既定の証明書を作成できませんでした。マテリアル最近のコメントdennou2020.01.28管理人です。CompilerでC言語開発するのも手です。文字化けを気にせず使えますし。...Windows10のgccでUTF8で作ったコードが文字化けする場合の対処taken2020.01.27とても参考になりました。やって直すか手をこまねいていたので助かりました。Windows10のgccでUTF8で作ったコードが文字化けする場合の対処dennou2019.10.24管理人です。?Windows10で最初にUnityを起動したときのセキュリティ警告dennou2019.09.26管理人です。ありがとうございます。お役に立てて良かったです。確かにセキュリティに関する警告は最初見た時ギョッとしますよね。MDNHIE授業ホーム検索トップサイドバースポンサーリンクこの記事を書いている人dennou好きな食べ物はトマトです。学生時代は授業中よく寝ていました。このサイトがお役に立てばうれしいです。views2017.10.212017.11.16VS2017:「既定の証明書を作成できませんでした。マテリアル最近のコメントdennou2020.01.28管理人です。CompilerでC言語開発するのも手です。文字化けを気にせず使えますし。...Windows10のgccでUTF8で作ったコードが文字化けする場合の対処taken2020.01.27とても参考になりました。やって直すか手をこまねいていたので助かりました。Windows10のgccでUTF8で作ったコードが文字化けする場合の対処dennou2019.10.24管理人です。?Windows10で最初にUnityを起動したときのセキュリティ警告dennou2019.09.26管理人です。ありがとうございます。お役に立てて良かったです。確かにセキュリティに関する警告は最初見た時ギョッとしますよね。29スポンサーリンク。