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

Hammer.JS – Hammer.js

ジェスチャーの一覧

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

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

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

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

Hammer.JSを使う

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

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

機能を有効にする

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

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

それぞれ有効にする

同時に機能を使う

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

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

jQuery plugin

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

hammerjs/jquery.hammer.js

挙動についての問題

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

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

CreateJSと一緒に使った話

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

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

Better Multitouch Support for Canvas with HammerJS

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

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

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

まとめ

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

それでは、また!

シャープ モバイル型ロボット電話 ロボホン SR-01M-W
シャープ (2016-05-26)
売り上げランキング: 176,794