[JavaScript]タッチ操作対応

JavaScript による Webアプリのタッチ操作対応について簡単にまとめてみます。実際動いている様子はこちらをご覧下さい。

まず、window.TouchEvent オブジェクトがあるかないかでタッチ操作可能か判断します。次に、タッチ操作特有のイベントをリッスンする関数を指定します。

if(window.TouchEvent){
   if(document.addEventListener){
      document.addEventListener("touchstart",onTouchStart);
      document.addEventListener("touchmove",onTouchMove);
      document.addEventListener("touchend",onTouchEnd);
   }
}

各イベントハンドラに渡されるタッチイベントオブジェクトは、配列になっています。ですから、event.pageX といった形ではアクセスできず、 event.touches[0].pageX となります。screenX、clientX なども同様です。

function onTouchStart( event ){
   var x = event.touches[0].pageX;
   //alert( x );
}

前回も書きましたが、意外にハマるのが touchend イベントで指が離れた場所を知りたい場合は touches ではなくchangedTouches を見る必要がある点です。touches に入っているのはあくまで今タッチしている指だけであって、指が離れた瞬間 touches ではなくなるという理屈です。

function onTouchEnd( event ){
   var x = event.changedTouches[0].pageX;
   //alert( x );
}

なお、上記では document.addEventListener としていますが、実際のコードでは描画を行う canvas要素だけタッチイベントをリッスンしています。

更に、 event.preventDefault(); とすることでタッチ操作本来の挙動をキャンセルしています。こうしないと、キューブを回転しようとするとページまでスクロールしてしまいますので。これも、マウスとは違う点です。

—

さて、WebGL ですが、少なくとも手元の iPhone6 ではスムーズに動作しています。かなり将来性のある技術ではないかと思います。

iOSが走る端末をお持ちの方は、ぜひ実際に動かしてみて下さい。