iPhoneのタップ・回転イベントを JavaScriptで取得するサンプル

iPhone特有の「タップ」や本体の「回転」は、JavaScriptでも取得することができます。

つまり、Webサイト・Webアプリでこれらのイベントを捕まえてプログラムを作ることができるという訳。
簡単なサンプルを作ってみましたので、お試しください。

• iPhoneのタップ・回転イベントをJavaScriptで取得するサンプル(iPhoneで確認してください)

まずは、こんなHTMLを準備して・・

<dl class="iPhoneDL"> 
<dt>イベント</dt> 
<dd id="dEvent">なし</dd> 
<dt>X位置</dt> 
<dd id="dX">-</dd> 
<dt>Y位置</dt> 
<dd id="dY">-</dd> 
<dt>向き</dt> 
<dd id="dTurn">-</dd> 
</dl>

プログラムは次の通り。

<script type="text/javascript">
document.addEventListener("touchstart", touchStart, false);
document.addEventListener("touchmove", touchMove, false);
document.addEventListener("touchend", touchEnd, false);
window.onorientationchange = function() {
	$('#dTurn').html(window.orientation);
}

function touchStart(e) {
	e.preventDefault();
	var t = e.touches[0];
	$('#dEvent').html('touchstart');
	$('#dX').html(t.pageX);
	$('#dY').html(t.pageY);
}

function touchMove(e) {
	e.preventDefault();
	$('#dEvent').html('touchmove');
	var t = e.touches[0];
	$('#dX').html(t.pageX);
	$('#dY').html(t.pageY);
}

function touchEnd(e) {
	e.preventDefault();
	$('#dEvent').html('touchend');
	$('#dX').html('-');
	$('#dY').html('-');
}
<script>

イベントはそれぞれ、タッチの開始が「touchstart」、そのまま指を動かすと「touchmove」、そして指を話すと「touchend」イベントが発生します。これらのイベントに、「addEventListener」で処理を割り当てると、プログラムを作ることができます。

タッチした位置は、「touches[0].pageX」と「touches[0].pageY」でそれぞれ X位置、Y位置が取得でき、複数の指が触れている場合は「touches[1]」や「touches[2]」などにも同様に数値が入ります。

なお、touchendイベントの際は位置は取れません。そのため「離した時の位置が知りたい」という場合には「touchmove」で位置を記録し続けて、touchoutの時の最後の値を取得するとよいでしょう。

画面の回転は「onorientationchange」イベントで取得できます。この時、「window.orientation」プロパティには、動かした角度が「90」「-90」などで取得されます。

また、この時に「window.width」で画面の幅を取得すれば、画面が縦なのか横なのかも分かるでしょう。

このあたりのサンプルはまた改めて掲載したいと思います。このあたりも、iPhone site extensionに盛りこんでいけたらいいなー。