約8年前

デバイスの詳細なタッチ情報を取得できる「Touch Events Extensions」

スマートフォンをタッチしたときに、その圧力の大きさや触れた範囲などを取得できる「Touch Events Extensions」という仕様があります。これを使えば、"クリック"と"ダブルクリック"といったマウスでしか判定できなかったものが、今度はタップする強さによって判定することができるようになります。他にもタップしたときの座標や、タップされた要素の情報を取得することも出来ます。

タッチ情報を見てみよう

TouchEventオブジェクトのプロパティを使うことで簡単に取得できます。プロパティには"touches","targetTouches","changedTouches"の3種類が用意されていますが、私自身その違いがよく分かっていません。今回のデモでは、どれを使っても支障はありませんでしたので、今回は"changedTouches"を使って情報を取得します。それではタッチ情報の中身を見ていきましょう。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  font: 13px/2.0 meiryo;
  width: 100%;
}

section {
  text-align: center;
}

#taphere {
  background: #000;
  color: #fff;
  margin: 10% auto;
  padding: 5%;
  text-align: center;
  width: 40%;
}
</style>

<section>
  識別ID:<span id="identifier"></span><br>
  スクリーン左端からの距離:<span id="screenX"></span>px<br>
  スクリーン上端からの距離:<span id="screenY"></span>px<br>
  ビューポート左端からの距離:<span id="clientX"></span>px<br>
  ビューポート上端からの距離:<span id="clientY"></span>px<br>
  ページの左端からの距離:<span id="pageX"></span>px<br>
  ページの上端からの距離:<span id="pageY"></span>px<br>
  タッチ範囲のx軸方向の半径:<span id="radiusX"></span>px<br>
  タッチ範囲のy軸方向の半径:<span id="radiusY"></span>px<br>
  回転角度(不明):<span id="rotationAngle"></span><br>
  圧力数値(0~1)：<span id="pressure"></span><br>
  タッチした要素情報:<span id="target"></span>
</section>
<div id="taphere">タップ！</div>
<script>
var tapHere = document.getElementById('taphere');
tapHere.addEventListener('touchstart', pressure, false); //タッチしたときに発火
tapHere.addEventListener('touchmove', pressure, false); //タッチパネル上を動いたときに発火
tapHere.addEventListener('touchend', pressure, false); //タッチパネルから離れたときに発火

function pressure(event){
  var touchObj = event.changedTouches.item(0); //ここでタッチ情報を取得
  document.getElementById('identifier').innerText = touchObj.identifier; //識別ID
  document.getElementById('screenX').innerText = touchObj.screenX; //スクリーン左端からの距離
  document.getElementById('screenY').innerText = touchObj.screenY; //スクリーン上端からの距離
  document.getElementById('clientX').innerText = touchObj.clientX; //ビューポート左端からの距離
  document.getElementById('clientY').innerText = touchObj.clientY; //ビューポート上端からの距離
  document.getElementById('pageX').innerText = touchObj.pageX; //ページの左端からの距離
  document.getElementById('pageY').innerText = touchObj.pageY; //ページの上端からの距離
  document.getElementById('radiusX').innerText = touchObj.radiusX; //タッチ範囲のx軸方向の半径
  document.getElementById('radiusY').innerText = touchObj.radiusY; //タッチ範囲のy軸方向の半径
  document.getElementById('rotationAngle').innerText = touchObj.rotationAngle; //回転角度(不明)
  document.getElementById('pressure').innerText = touchObj.force; //圧力数値(0~1)
  document.getElementById('target').innerText = touchObj.target; //タッチした要素情報
}
</script>

一つのプロパティからこれだけの情報が取得できるので、これらを利用して新しいウェブアプリを発想してみるのも良いと思います。

執筆者

AnTytle

他の記事

オススメ