スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」

スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」

Posted at February 1,2013 12:33 AM
Tag:[jQuery, Plugin]

スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。

Hammer.js
Hammer.js

1.機能

このプラグインを利用すれば、スマホなどのタッチデバイスで、

  • タップ
  • ダブルタップ
  • スワイプ
  • 長押し
  • トランスフォーム(ピンチイン・ピンチアウト)
  • ドラッグ

のイベントを判断できるようになります。

(クリックで拡大)
Hammer.js

2.プラグインのダウンロード

公式サイトにある「DOWNLOAD SOURCE」をクリック。

DOWNLOAD SOURCE

3.使い方

jQueryと、ダウンロードアーカイブに含まれるhammer.jsおよびjquery.hammer.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>

イベントを受け取りたい要素に対して次のように記述します。このサンプルでは、「foo」の部分をタップすればアラートを表示します。

<div id="container">foo</div>
<script>
$('#container')
    .hammer({
        // 初期設定
    })
    .on('tap', function(ev) {
        // タップ時の動作を実装
        alert(ev);
    });
</script>

注:script要素はイベントを受け取りたい要素より後方に記述しないと動作しないようです。

イベントは次のものが用意されています。

  • dragstart:ドラッグ開始
  • drag:ドラッグ
  • dragend:ドラッグ終了
  • swipe:スワイプ
  • tap:タップ
  • doubletap:ダブルタップ
  • hold:長押し
  • transformstart:トランスフォーム開始
  • transform:トランスフォーム
  • transformend:トランスフォーム終了
  • release:リリース

すべてのイベントの動作については、以下のサイトが参考になります。

hammer.js マルチタッチ

初期設定については、公式サイトのgithubの以下のページを参照してください。

github - hammer.js#defaults

4.jQueryを用いない場合の使い方

jQueryを使わない場合は、次のような書き方で動作します。

<div id="container">foo</div>
<script src="hammer.js"></script>
<script>
var hammer = new Hammer( document.getElementById('container') );
hammer.ontap = function(ev) {
    // タップ時の動作を実装
    alert(ev);
};
</script>

イベントは次のものが用意されています。

  • ondragstart:ドラッグ開始
  • ondrag:ドラッグ
  • ondragend:ドラッグ終了
  • onswipe:スワイプ
  • ontap:タップ
  • ondoubletap:ダブルタップ
  • onhold:長押し
  • ontransformstart:トランスフォーム開始
  • ontransform:トランスフォーム
  • ontransformend:トランスフォーム終了
  • onrelease:リリース
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)