h2ospace

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

2010-06-15 10:19:29

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

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

まずは、こんな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に盛りこんでいけたらいいなー。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ