スマートフォンやタブレットの操作に欠かせない「タッチジェスチャー」を簡単に実装できるライブラリ「Hammer.js」をご存知ですか？
Hammer.jsは、タップやスワイプといったジェスチャーイベントを直感的に利用できる便利なツールです。本記事では、Hammer.jsを活用して、基本的なタップおよびスワイプのイベント処理を表示する方法について、わかりやすく解説していきます。
Hammer.jsとは？
Hammer.jsは、JavaScriptのタッチジェスチャーライブラリで、スマートフォンやタブレットの操作に対応したジェスチャーイベントを実装できます。特に、タップ（tap）やスワイプ（swipe）、ピンチ（pinch）、パン（pan）などのジェスチャーイベントをサポートし、UIに豊かなインタラクションを追加するのに最適です。
タップとスワイプエリアのCSS設定
Hammer.jsを利用する前に、タップとスワイプのイベント表示用エリアをCSSで装飾しましょう。
今回のデモでは、タップされた位置に円形の「タップ跡」を表示し、左右にスワイプした際にメッセージを表示するエリアを作成します。
<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" />
lightgallery.min.cssファイルを読み込んでます。
HTML構造の設定
次に、タップやスワイプイベントを表示するためのHTML構造を作成します。下記のように、タップ・スワイプエリア（id=”tapswp”）を用意し、ここにイベントを追加していきます。
<div class="tapwrap">
<div id="tapswp"></div>
</div>
Hammer.jsを使ったJavaScript記述
Hammer.jsを使うには、まずはじめにjQueryとHammer.jsのライブラリ、jquery.jsとhammer.min.jsファイルを読み込みます。
その後、JavaScriptを記述して、タップおよびスワイプイベントの処理を追加します。グレーのエリア（#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>
Hammer.jsを使ったタップとスワイプイベント(タッチジェスチャー)を表示するデモページ
以下のリンクから、Hammer.jsを使ったタップとスワイプイベントのデモページを確認できます。
Hammer.jsを使ったタップとスワイプイベント(タッチジェスチャー)を表示するデモ
Hammer.jsのソース元
Hammer.jsの公式サイトからライブラリのダウンロードが可能です。以下のリンクから最新版をダウンロードしてご利用ください。
Hammer.JS
まとめ
本記事では、Hammer.jsを使って簡単にタップやスワイプのイベントを実装する方法について解説しました。スマホやタブレット向けのインターフェイスを作る際に、Hammer.jsを活用することで操作性を大幅に向上させることができます。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
