2019.07.25スポンサーリンクライブラリを使わずにJavaScript単体でスマホなどのスワイプ処理を実現する方法です。スワイプ処理のサンプルなお、基本的にパソコンのブラウザ上でスワイプ処理は確認できません。開発者モードがあるブラウザ(ChromeやFirefox等)を使うと良いでしょう。パソコンのブラウザChrome上でスマホのタッチやスワイプを確認する場合は、以下の記事を参考にしてください。Chromeの開発者モードでスマホのタッチ・スワイプをチェックするChromeの開発者モードはかなりWeb開発者にとっては便利です。パソコンのChromeブラウザ上でスマホのタッチ・スワイプをチェックする方法です。touchendを効果的に組み合わせます。例として左から右にスワイプするイメージです。1.touchstartユーザが最初にタッチした時点のxy座標を取得できる。startYとして保存)これを利用して、スワイプ開始時点での座標を取得するために使う。2.touchmoveスワイプ中(指を動かしている最中)常に発生するイベント。タッチしたまま動かしている状態の現在xy座標を取得可能。moveYとして保存)3.touchend指を離したときに発生するイベント。このイベント発生後に左右どちらにスワイプしたかの判定を行う。スワイプ距離が短い場合は何もしない。左右のスワイプであれば、x座標だけ見れば事足ります。左から右であれば、次の条件が成り立てば、右へのスワイプとみなします。moveX上記、startXやmoveXの座標はピクセル単位です。今回スワイプ判定のための最低距離は30ピクセルとしています。都合に応じて適当に変えてください。HTMLタグの特定の位置をスワイプ対象とする全体をスワイプイベント対象とするのであれば、bodyタグにイベントを設定すればOKです。今回は、以下のHTMLタグのページを使って、divタグのidがcontentsの部分のみをスワイプイベント対象としています。以下のサイトをほぼそのまま参考にさせて頂きました。touchendの3つのイベントをスワイプイベント対象タグに設定しています。主な変数の目的は以下の通りです。今回のサンプルプログラム全体を示します。style.cssに分かれています。以上、JavaScriptでスワイプ処理をするでした。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。ホーム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スポンサーリンク。