Hammer.jsを使ってタップやスワイプイベント(タッチジェスチャー)を表示する方法｜DAD UNION

スマホやタブレットではタップ・スワイプ・ピンチ等のタッチジェスチャーで操作しますが、それを簡単に実装できるHammer.jsを使ってみます。
今回はHammer.jsを使ってタップとスワイプイベント(タッチジェスチャー)を表示する方法をご紹介します。

Contents

タップやスワイプイベント(タッチジェスチャー)を表示するタップやスワイプエリアのCSS記述
タップやスワイプイベント(タッチジェスチャー)を表示するタップ・スワイプエリアのHTML記述
Hammer.jsを使ってタップやスワイプイベント(タッチジェスチャー)を表示するタップ・スワイプ時のJavaScript記述
Hammer.jsを使ったタップとスワイプイベント(タッチジェスチャー)を表示するデモページ
Hammer.jsのソース元

タップやスワイプイベント(タッチジェスチャー)を表示するタップやスワイプエリアのCSS記述

※lightgallery.min.cssファイルを読み込み明日。タップ・スワイプエリアとタップ・スワイプ時のstyleの記述です。必要に応じて変更して下さい。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tapwrap{
  width: 90%;
  margin: 0 auto;
}
#tapswp {
    width: 100%;
    padding-bottom: 40%;
    margin-bottom: 30px;
    position: relative;
    background-color: #cccccc;
}
#tapswp .tapato {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    border-radius: 50%;
    background: #555555;
    position: absolute;
}
#tapswp .swpmsg {
    width: 50%;
    height: 50px;
    line-height: 50px;
    background: #fff;
    text-align: center;
    position: absolute;
    left: 25%;
    top: 10%;
    font-size: 18px;
    font-weight: bold;
}
</style>
<!-- lightgallery.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css" />

タップやスワイプイベント(タッチジェスチャー)を表示するタップ・スワイプエリアのHTML記述

※タップ・スワイプエリア（id=”tapswp”）を用意します。

<div class="tapwrap">
  <div id="tapswp"></div>
</div>

Hammer.jsを使ってタップやスワイプイベント(タッチジェスチャー)を表示するタップ・スワイプ時のJavaScript記述

※ダウンロードしたjquery.jsとhammer.min.jsファイルを読み込みます。グレーのエリア（#tapswp）をタップするとタップ跡が残り、左右どちらかにスワイプするとスワイプメッセージを表示する処理です。

<script src="./jquery-2.2.0.min.js"></script>
<script src="./hammer.min.js"></script>

<script type="text/javascript">
$(function() {
    var $tapswparea = document.getElementById("tapswp"), $tsarea = $($tapswparea), $obj = new Hammer($tapswparea);
    $obj.get("tap").set({ enable: true });
    $obj.get("swipe").set({ enable: true });

    //タップ時の処理
    $obj.on("tap", function(event) {
        $tsarea.append("<div class='tapato'></div>");
        $tsarea.find(".tapato").last().css({
            "left": (event.pointers[0].pageX - $tsarea.offset().left) + "px",
            "top": (event.pointers[0].pageY - $tsarea.offset().top) + "px"
        });
    });

    //スワイプ時の処理
    $obj.on("swipeleft", function(event) {
        $tsarea.append("<div class='swpmsg'>左スワイプしました</div>");
        $tsarea.find(".swpmsg").last();
    });
    $obj.on("swiperight", function(event) {
        $tsarea.append("<div class='swpmsg'>右スワイプしました</div>");
        $tsarea.find(".swpmsg").last();
    });
});
</script>