JavaScript
WebAPI
タッチイベント
onTouchEvent

jsでブラウザ上のタッチ情報を記録する

はじめに

研究に使う実験環境で、スマホブラウザ上でのユーザのタッチデータを取る必要がありました。今回はその時に使用したブラウザAPIの使い方です。
詳しくはMozillaのサイトを見ると良いと思います。

MDN Web Doc: TouchEventについて

使うブラウザAPI

タッチイベントを得るときには以下のAPIを使用します。

onTouchStart 指が触れた時のイベント
onTouchMove 指が動いている時のイベント
onTouchEnd 指が離れた時のイベント

またイベントなので以下の用にセットします。今回は画像上でのタッチデータを取得したかったので、".image"要素にJQueryを使ってセットします。

$('.image').on('touchstart', onTouchStart); //指が触れた時
$('.image').on('touchmove', onTouchMove); //指が動いてる時
$('.image').on('touchend', onTouchEnd); //指が離れた時

そしてそれぞれの関数を定義すれば、その関数に即してタッチデータを処理できます。

タッチデータ取得のサンプル

今回は私が実験に使用するために使用したサンプルを記載しておきます。
集めたデータ
- タッチした時の画面上のx,y座標
- タッチした時のページ上のy座標
- そのタッチがタップなのかスワイプなのか(tap,up,down)
- そのタッチが何回目の動作なのか(seq)

というデータを取得しています。以下がサンプルです。

var move_list = [];

function get_finger_list(e, touch_type){
  finger_list = {};

  finger_list['seq'] = seq;
  finger_list['touch_type'] = touch_type;
  finger_list['client_posX'] = e.originalEvent.touches[0].clientX;
  finger_list['client_posY'] = e.originalEvent.touches[0].clientY;
  finger_list['window_posY'] = e.originalEvent.touches[0].pageY;
  finger_list['offsetY'] = window.pageYOffset;
  return finger_list
}

function onTouchStart(event) {
  position_x = event.originalEvent.touches[0].pageX;
  position_y = event.originalEvent.touches[0].pageY;
  client_x = event.originalEvent.touches[0].clientX;
  client_y = event.originalEvent.touches[0].clientY;

  pre_clientY = client_y;

  move_list.push(get_finger_list(event,'tap'))

}

function onTouchMove(event) {
  touch_type = 'tap';

  //一つ前のタッチより,y座標と比べて指の方向をtouch_typeに代入
  if (event.originalEvent.touches[0].clientY > pre_clientY){ 
    touch_type = 'up';
  } else if (event.originalEvent.touches[0].clientY < pre_clientY){
    touch_type = 'down';
  }
  if(touch_type != 'tap'){
    move_list.push(get_finger_list(event,touch_type));
  }
  pre_clientY = event.originalEvent.touches[0].clientY
}

function onTouchEnd(event) {
  seq++;
}

別途get_finger_listという関数を作成していますが、これはタッチイベントから得られるデータの形式と言うものは同じものだからです。3つのタッチイベントの引き数eventを渡せば共通のデータを得ることができます。

詳細なデータの取り方はMDN Web Doc: TouchEventについてを見ると良いです。

おわりに

今回は分析用途の為に少し細かくデータを取りました。特にタッチの際の指の動きや、全ての動きのデータを取る必要が無ければ、割りと簡単に実装できると思います。