こんにちは！ 毎朝寒さで布団からなかなか抜け出せません、エンジニアのゆたろです。
みなさん、スマホのタッチジェスチャーの実装につまずいたことはありませんか？ 今回は、そんなときに便利なライブラリ「Hammer.js」をご紹介します。
hammer.jsを使ってみよう
まずは、上のリンクよりプラグインをダウンロードしちゃいましょう！
https://github.com/hammerjs/jquery.hammer.js
ここではjQqueryプラグインとして使いたいので、jquery.hammer.jsも合わせてダウンロードしてください。
ダウンロードしたファイルとjQueryをHTMLに読みこませます。
<script src="jquery.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>読みこませる順番を間違えると動かないのでご注意を！ ここが済むと、下記の例のようにイベントを登録できます。
$('.hoge').hammer(オプション).on(イベント,fuga);.hammer()が間に入るだけで、通常のbindとほとんど一緒ですね！
よく使うジェスチャーの説明
次に、スマホやタブレットでのタッチ操作に対応したサイトを制作する上で、よく使うジェスチャーの実装方法を紹介します。これらのジェスチャーはHammer.jsにも用意されているので、参考にしてみてください。
swipe
1つの指で画面に触れ、その位置から上下左右に滑らせる動き。
$('.hoge').hammer().on('swipe',fuga);pinch
2つの指で画面をつまむような動き。地図や画像を拡大・縮小するときによく使いますね。
$('.hoge').hammer().on('pinch',fuga);hold
要素に対して、1つの指で長く押す動き。テキストを選択するときの操作に似ていますね。
$('.hoge').hammer().on('hold',fuga);doubletap
ダブルクリックのように画面を2回叩く動き。
$('.hoge').hammer().on('doubletap',fuga);実際の動きを確認してみましょう
っと、こうして文章で説明されてもいまいちピンとこない方が大半だと思うので、サンプルページを用意しました。実際にさわって確認していただければと思います。
※各見出しに書かれている動き通りに「touch me」エリアを触ると、上部の空白に「〜（動作名）ok」と表示されるデモですまとめ
Hammer.jsを使えば、通常jQueryに用意されていないジェスチャーイベントを簡単に実装することができます。もちろん、今回紹介したもの以外にも、さまざまなジェスチャーイベントが用意されています。
他のプラグインと組み合わせることによって、より表現の幅が広がりそうですね。ぜひ使ってみてください！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
