iPhone + Safariによるジェスチャー処理

iPhoneのSafariにはタッチされた時のイベントを取得することができます。このタッチ関係のイベントを使ってピンチイン/アウトや回転操作を行うためのプログラムを書くこともできます。が、実際にそのようなコードをJavaScriptで書くのは手間です。幸いiPhoneのSafariには、そのような処理(ジェスチャー)を検知するための仕組みとイベントプロパティが用意されています。今回は、回転させるジェスチャーを使って、ちょっとした回転ゲームを作成してみます。

今回はシンプルなゲームで指定した回転角度まで画像を回転させるだけのものです。指定した回転角度まで回転させるタイムを競います。普通の画像を回転させても良いのですが、ここではGoogleマップを回転させてみます。

正確に地図を回転させるゲーム

ジェスチャーイベント

Safariのジェスチャーに関するイベントは以下のものがあります。

今回の場合、回転させるジェスチャーを取得しますが、使用するのはgesturechangeとgestureendイベントです。gesturechangeにより現在の回転角度を表示します(遅延描画が行われるためかリアルタイムに角度が表示されないことがあります)。

画像をいったん回転させた後、指を離してしまうとジェスチャーが終わってしまいます。そこでgestureendにより画像の回転角度を変数に保存しておきます。

あと、もう1つイベント処理を追加しておきます。これまではSafariの画面をドラッグまたはフリック(画面を指で払う)すると、Webページの画面がスクロールしてしまいました。このフリックによるスクロールを禁止するにはtouchmoveイベントを検知してデフォルトのイベントを処理しないようにします。「event.preventDefault()」とするとデフォルトのイベントが実行されなくなります。

コード01

        window.addEventListener("load", function(){
            document.addEventListener("gesturechange", checkRotate, false);
            document.addEventListener("gestureend", saveRotate, false);
            document.addEventListener("touchmove", function(){ event.preventDefault(); }, false);
        });