Hammer.JSとは、スマホサイトなどにタッチジェスチャーのイベントをつけることができるライブラリです。

Hammer.JS – Hammer.js

ジェスチャーの一覧

スマホで、よく良く行うジェスチャーは、網羅されています。
自分で実装しようと思うと、面倒なものが、簡単に使えます。

• Pan（画面を押したまま指を動かす動作）
• Pinch（画面を二本指などでつまむ動作）
• Press（画面を長く押す動作）
• Rotate（画面を二本指などで回す動作）
• Swipe（画面を押して素早く動かす動作）
• Tap（画面を軽く押す動作）

Hammer.JSのちょっとしたポイント

ドキュメントを見れば分かることですが、簡単に説明してみます。

Hammer.JSを使う

依存しているライブラリはないので、ダウンロードして、読み込めば、使えます。

var myElement = document.getElementById('stage');
var hammertime = new Hammer(myElement);
hammertime.on('pan', function(ev) {
	console.log(ev);
});

インスタンス作成時、一緒にoptionを設定することもできますが、あまり変える必要はなさそうです。

機能を有効にする

インスタンスを作成すると、tap／doubletap／press／水平pan／水平swipeがデフォルトで使えるようになっています。

要素がブロックされる（要素を触ってスクロールできなくなる）、自由な方向のpan／swipe、pinch／rotateは、無効になっているので使うときには有効にします。

それぞれ有効にする

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

同時に機能を使う

二本指以上で行うpinchとrotateは、動作がカブる部分があるので、同時に使うためには、recognizeWith()メソッドを使用する必要があります。

var myElement = document.getElementById('myElement');
var mc = new Hammer.Manager(myElement);
var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotate();
pinch.recognizeWith(rotate);
mc.add([pinch, rotate]);
mc.on("pinch rotate", function(ev) {
    myElement.textContent += ev.type +" ";
});

ただ、同時に使うと、操作しにくかったのです。

jQuery plugin

jQueryのプラグインもあります。
ソースの見た目は分かりやすいですね。

hammerjs/jquery.hammer.js

$(element).hammer(options).on('pan', myPanHandler);
$(element).data('hammer').get('pan').set({ direction: Hammer.DIRECTION_ALL });

挙動についての問題

同時に機能を使う部分で、iOSで問題なかったですが、一部のAndroidでは、おかしい挙動がありました。

そもそも、同時に機能を使うのは、微妙だったので、止めたら解決しました。

CreateJSと一緒に使った話

CreateJSは、Canvasを便利に扱える（それだけでないですが）ライブラリで、Flashに似た概念になっています。

CreateJSのイベントにHammer.JSのジェスチャーをどうやったら取り込めるか、検索すると、この記事が出ます。

Better Multitouch Support for Canvas with HammerJS

ちょっと難しくてよく分かりません。

そんなことをしなくても普通に使えるHammer.JS

CreateJSのイベントとして、使えると便利な気がしますが、そんなことをしなくても、普通にCreateJSでの処理を、Hammer.JSのイベントで実行するだけで良かったでした。

まとめ

jQueryのプラグインを含めると、書き方がいくつかあるので、ちょっと混乱しましたが、自分で頑張って実装するより遥かに楽でした。

それでは、また！