モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。
そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。
各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。
今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。
私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。
結論
結論としてはHammer.jsをお勧めしたい。ただ、１つに絞るならという話で、QuoJSも遜色ない。
デバイス・ブラウザの数は今後も増えていくはずで、そうなるとこうしたライブラリを選択する際「メンテナンスの継続性」は一番考慮すべきポイントと思う。そうなると、開発者以外の人の手で機能拡張プラグインなどがリリースされているHammer.jsにやはり軍配かなと。
以下は、簡単な所感。
| ライブラリ | 所感 |
|---|---|
| Hammer.js | 対応イベントは豊富で精度もいい。カスタムジェスチャー・プラグインなどを追加可 |
| QuoJS | 必要十分なイベントを十分な精度で検知してくれる。優秀。 |
| TouchSwipe | 不安な実装だが、指の数やジェスチャーの時間など結構細かいパラメーターをくれる。 |
＜他ライブラリについて＞
jQuery.pep.js
ドラッグ＆ドロップ特化だが、特化している分惚れ惚れするほど動きが滑らか。ぜひリンクからサンプルを試してもらいたい。ドラッグ＆ドロップの実装が必要なら、これ＋不足分を上記のライブラリでカバー、というスタイルをおすすめしたい。
Touchy
Exampleが面白い。タッチイベント全般というよりは特定のジェスチャー(FlickやWheel)に特化している感じで、そうしたジェスチャーがまさに必要なら上記のようなライブラリで対応するより滑らかに動いてくれるはず。ただ、mouseイベントに一切反応してくれないのでPCサイトと共用したいならちと面倒。
jQuery UI Touch Punch
一言で言えば動かない。jQuery UIをタッチ対応させるというコンセプトは非常に良くjQuery touch で検索しても結構ヒットするのだが、Exampleは動かずissueも放置されている。もう更新は止まっている？
以下、詳細。
Hammer.js
単体として使うだけでなく、jQuery Pluginとしても導入できる。ジェスチャー検知時のオプションも豊富で、環境によってのチューニングもできそう。また、カスタムのジェスチャーも実装可能。ただ、rotateについてはQuoJSのようにLeft/Rightがないので注意。
機能拡張用プラグインも幾つかありより高度なタッチ機能を実装していきたいなら発展性があるHammer.jsは魅力だと思う。
QuoJS
対応しているイベント、検知精度、共に十分。ライブラリはjQueryライクな実装で使いやすく、jQueryでサポート外となってしまったbrowserなどが取れるのもモバイル対応時にはありがたい。
ただ、タッチイベント対応時に必須なpreventDefaultを行う機能がライブラリ標準でないので、これは自分で行っておく必要がある(いつか対応される気もするが)。これをやっておかないと悲惨なのでその点は要注意。
TouchSwipe
ExampleのPinch In と Outが逆な気がしたり(ソースを見るかぎりほんとに逆？)、動作が不自然だったりと不安なオーラを放っている・・・が、イベント発生時取得できる情報が多いためカスタマイズの幅は広いと思う（独自ジェスチャーを作るなど）。