2012/04/23更新

[Web] スマートフォン向けWebページでタッチイベントを取得する

今日は、スマートフォンのWebページで、タッチイベントを取得する方法をブログに残しておきたいと思います。

スマートフォンのタッチイベント

スマートフォンではマウスの代わりに指を使って画面を操作しますよね。Web画面上でも指でタッチするかと思いますが、タッチしたイベントを取得、タッチした位置情報などを取得する方法を学ぶと、面白いWebページが作成出来そうです♪(´ε｀ )

タッチイベントの種類

タッチイベントには３種類存在するようです。

ontouchstart	タッチ開始時のイベント
ontouchmove	タッチして移動した時のイベント
ontouchend	指が画面から離れた時のイベント

例えば、以下のようにイベントを設定します。

window.addEventListener("load", function(){
  document.body.ontouchstart = showInfo; // showInfo is a function.
  document.body.ontouchmove  = showInfo;
  document.body.ontouchend   = showInfo;
}, false);

document.bodyに３種類のタッチイベントを設定する事で、画面の全部のタッチイベントを取得しています。

タッチイベントから位置情報などを取得する

上記のshowInfo関数が、タッチイベント発生時に呼ばれる関数です。引数のeventに、様々な情報が格納されています。取得出来る内容は以下となります。

event.type	イベント名
event.touches.length	タッチしている指の数
event.touches[i].pageX	画面左上からのx座標
event.touches[i].pageY	画面左上からのy座標

例えば以下の実装します。

var area = document.querySelector("#area");
function showInfo(event){
  var info  = "type=" + event.type;
  if (event.touches.length > 0) {
    info += " numOfFingar=" + event.touches.length;
    for (var i=0; i<event.touches.length; i++) {
      var t = event.touches[i];
      info += " [" + (i+1) + "]xy=" + t.pageX + "," + t.pageY;
    }
  }
area.innerHTML = area.innerHTML + info + "<br>\n";

// ブラウザデフォルトの動作を抑える
event.preventDefault();
}

最後に、ブラウザのデフォルト動作を抑える事で、リンクやボタンなどの基本動作を抑止出来ます。

iPhoneでは複数指の動作を補足する事が可能でした。Android端末は持っていないのでまだ試していないですが、大体一緒でしょうか。

参考サイト

https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

W3Cのページ。現在Draftのため、問題事項や未解決事項があり、確定した内容ではないようですが、参考になります。

最後に

スマートフォン向けのWebサイトは、ドンドン増えていて、作れるようになる事は、大切なのかも。今回はタッチイベントでしたが、スマートフォン用のmetaタグや、UserAgentsによるキャリア判別処理、スマートフォンっぽい動作など、身につける事は、多くありますね。

今後もがんばろっと(((o(*ﾟ▽ﾟ*)o)))