iPhone の 3D タッチ (Force Touch) を JavaScript で扱う

今日、2018年1月11日で27歳になりました。今年も宜しくお願い致します。よかったら以下の欲しいものリストをヨロシクオネガイシマス。

• Amazon - ほしいものリスト

iOS9・iPhone6 から利用できるようになった 3D Touch 機能。クリックの「奥行き」を検知する機構で、MacBook でも Force Touch と呼ばれる感圧式タッチパッドで対応している。

今回はこの「タッチの強さ」を、JavaScript で拾ってみようと思う。

タッチの強度を取得するには、タッチイベント内で event.touches から force プロパティを取得する。

function handleEvent(event) {
  if(!event.touches) {
    return;
  }
  
  // 1本目の指のタッチ強度を取得する
  console.log(event.touches[0].force);
}

// 各イベントに同じ関数を設定する
document.addEventListener('touchstart', handleEvent);
document.addEventListener('touchmove', handleEvent);
document.addEventListener('touchforcechange', handleEvent);

event.touches[0].force でタッチの強さが取得できる。値は 0 から 1 の間。タッチイベント時なら値が取得できるはずなので、touchstart と touchmove 時に値を取得するようにしてみた。

Safari 10 からは touchforcechange という独自のイベントが新たに追加されており、強度の変化だけを取得できる。

コメントで「1本目の指」と書いたし、touches[0] と配列で表現していることからも読み取れるが、このタッチの強度は複数の指でタップした時にもそれぞれ取得可能だ。手元の iPhone7Plus だと5本指まで取得できた。

// 複数の指でタップした時もそれぞれのタッチ強度を取得できる
event.touches.forEach((touch, index) => {
  console.log(`${index} : ${touch.force}`);
});

3D タッチが利用できるデバイスは限られているが、コレを利用すればインタラクティブな仕掛けの Web サイトを提供できる。

• 参考 : iOS9で追加されたForceTouch(3DTouch)をJavaScriptで操作してみる | WebDesign Dackel
• 参考 : iPhone 6s の 3D Touch を Web ブラウザ上で使ってみよう（iOS 9 のモバイル Safari に対応） - ぐーたら書房
• 参考 : Safari 10.0 で 3D Touch イベントが取得できる！ ｜ Developers.IO