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が走る端末をお持ちの方は、ぜひ実際に動かしてみて下さい。
