[Web] iPhone専用のgestureイベントについて調べてみた

こんにちは、@yoheiMuneです。
今日は、スマホで利用できるJavaScriptイベントのうち、 iPhone専用のgestureイベントというモノを調べたので、ブログに残したいと思います。

個人的な感想としては、「gestureイベント要らないじゃん、touchイベントで事足りる気がする」という感想ですが、 調べた内容がどなたかの役に立てばと思い、ブログに残します。

gestureイベントについて

ジェスチャーイベントの種類

iPhoneでWebを利用する際に、gestureイベントというモノを利用することが出来ます。
これは複数指での動作を捉えるもので、以下の３種類が用意されています。

• ongesturestart：ジェスチャー開始時に呼び出されるイベント
• ongesturemove：ジェスチャー移動時に呼び出されるイベント
• ongestureend：ジェスチャー終了時に呼び出されるイベント

イベント登録方法

それぞれのイベントは、以下のように設定する事で動作します。
以下の例では、画面全体にジェスチャーイベントを設定しています。

document.body.ongesturestart = function(e) {
  console.log("ongesturestart");
  e.preventDefault();
};

もちろんイベントリスナを使ったイベント登録（addEventListener）も可能です。

イベント処理関数の引数eの内容

ジェスチャーイベントの引数（e）には、以下の情報が含まれているようです。

（以下一例です）

scale	ジェスチャ開始時からの指の開き具合。大きくなれば、１以上の値になる。
rotate	ジェスチャ開始時からの指の回転具合。
target	ジェスチャが発生しているHTMLのDOM要素。
pageX, pageY	ジェスチャの位置
timestamp	ジェスチャ発生時刻

２本指以上でのジェスチャなので、scaleやrotateなどが取得できるのは良いなぁと思いました。
しかし、iPhoneの場合、touchイベントでも複数指で扱えば、scaleやrotateを取得できます。

あとtimestampですが、前回処理したイベントのタイムスタンプと比較する為に用意されているようです。 時々、前のイベントより古いイベント情報が渡される事もあるようです。

なお、gestureイベントの引数の詳しい中身は、以下ページで調べられるようにしました。
以下ページでジェスチャーを行うと、画面にイベント情報が表示されます（iPhone専用です）。

- http://localhost/labo/html5/device/gesture.html

参考資料

gestureイベントについて、少量ですが以下ページに情報が載っていましたので、紹介させて頂きます。
- GestureEvent at developer.apple.com

最後に

Appleのサイトによれば、gestureイベントは、低レベルAPIのtouchイベントを高レベルにラップしたクラスとの事で、 より簡単に複数指でのジェスチャーを扱えるようにしたとの事です。

Androidで試した結果は、もちろん使えませんでした（Android2.3でテスト）。
iPhone専用アプリで、複数指ジェスチャを扱う場合には使えるかもですが、それ以外は使えなさそうでした。

久しぶりのネガティブ結果ですが、他の人のインプットになればと思いブログに書きました。
最後までご覧頂きましてありがとうございました。