タッチ強さを利用した新たなWebページの操作に期待がかかる

2015年9月25日に販売開始されたAppleの最新スマートフォン「iPhone 6s」および「iPhone 6s Plus」では、「3D Touch」と呼ばれるタッチ時に強く押し込む操作方法が新たに提案されています。ホーム画面のアイコンやアプリの各所ですでに3D Touchの操作ができるようになっていますが、実はこの3D Touch、Webページでもすでに利用できる環境が整っています。 そこで今回の連載「スマホのちょっと深いとこ」では、Webページでタッチの強さを検出する方法とサンプルを紹介していきます。

【従来からのタッチ検出処理に、タッチの強さを表す「force」が追加】

Webページでは、タッチのタイミング(タッチ開始、移動、終了など)や画面上の位置などを取得する方法がすでに提供されていますが、iPhone 6s / 6s Plusでは「force」と呼ばれるタッチの強さを表す数値を新たに取得できるようになりました(*1)。

*1) 開発者向け情報:touchstartやtouchmoveイベントで通知されるTouchEventからtouches[0].forceプロパティで取得できます。詳細は後述のサンプルファイルを参照してください。

forceの値は0~1で、強く押すほど値が大きくなります。半分くらいの強さで押すと0.5になるといった具合です。Webページはforceの値を参照して、どの程度強く押されているのかを判定できます。

web_3d_touch_001
forceでタッチの強さを検出する方法はすでに規格化が進んでいる(Firefoxブラウザを提供するMozillaの開発者向けページより)

【タッチの強さを検出するWebページのサンプル】

本記事では非常にシンプルなサンプルを紹介します(*2)。iPhone 6s / 6s Plusからこちらのページを表示させて画面をタッチすると、タッチの強さが数字と棒グラフで表示されます。

*2)サンプルファイル一式はGitHubにアップロードしています

web_3d_touch_002
Webページをタッチすると強さにより棒グラフの表示が変わる

【Webページでタッチの強さが活用されるきっかけになるか】

Webページでタッチの強さを取得するforceは、理論上はiOS以外でも対応できるように規格が作られています。タッチパネルやOSが対応すれば他の環境でもタッチの強さを検出できるようになる可能性は十分です。

実は一部のAndroid環境ではすでにforceの数値が取得できます。筆者の環境では、発売から2年以上経過しているXperia Z(SO-02E)を用いて、Chrome 45、Firefox 41、Opera 32の各ブラウザでforceが取得できることを確認しました。ただしXperia Zのタッチパネルがタッチの強さそのものを検出しているわけではなく、タッチされている指の面積から擬似的にタッチの強さを求めているようです。

web_3d_touch_003
Xperia Z SO-02Eでもタッチの強さを擬似的に取得できる

ともあれ、iPhone 6s / 6s Plusの3D Touchにより、従来ほとんど意識されることがなかった「タッチの強さ」に注目が集まるのは間違いないところです。Androidなど他の環境にもタッチの強さを検出できるタッチパネルが装備され、タッチの強さの活用がより一般的になれば、様々なアイデアがWebページに盛り込まれていくことでしょう。今後の展開に期待したいところです。


■関連リンク
エスマックス(S-MAX)
エスマックス(S-MAX) smaxjp on Twitter
S-MAX - Facebookページ
新感覚!触るだけではなく押すという新しい試みはどうだろうか?iPhone 6sシリーズの「3D Touch」機能を写真と動画で紹介【レビュー】 - S-MAX
連載『吉川英一の「スマホのちょっと深いとこ」』記事一覧 - S-MAX
今日の気分はバリいくつ?