というネタ的な Web ページを作ってみた。
iPhone 6s (Plus) の Force Touch (3D Touch) 機能を使ったネタ的なサンプル。
⇒ Force Touch (3D Touch) sample (音が鳴るので注意)
iPhone 6s (Plus) + Safari でページを表示して、空の画像を強く押しこんでから離すと、
画面が割れたような画像が表示されてガシャーンて音が鳴るだけ。
Force Touch とは何か
Force Touch は Apple の開発した感圧タッチパネル技術のこと。
3月10日のアップル Spring Forward スペシャルイベントで発表された Apple Watch と新MacBook はまるで別ジャンルの製品ですが、新技術「感圧タッチ (Force Touch)」を採用した共通点があります。
アップル、次期 iPhone にも感圧タッチを採用？Apple Watchや新MacBookのForce Touch応用(WSJ報道) - Engadget Japanese
3D Touch とは何か
3D Touchは、アップルの新機種「iPhone 6s」と「iPhone 6s Plus」で搭載されている、圧力を感知するディスプレイ、およびそれを利用したユーザーインターフェイス（UI）のことです。
スマートフォンで利用されているタッチパネルでは、ユーザーの指がディスプレイに触っているか、そうでないかのみを知ることができます。一方、「3D Touch」用タッチパネルでは、それに加えて、「どれだけ強く押したか」を検知できるようになりました。
第726回：3D Touchとは - ケータイ Watch
JavaScript の Touch.force 仕様
まだドラフトの段階みたいだけど、感圧タッチの情報を取得する force プロパティ が Touch オブジェクトに用意されている。
W3C の仕様に載っている。
force of type float, readonly
a relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and 1 is the highest level of pressure the touch device is capable of sensing; 0 if no value is known. In environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity in levels of pressure, may vary.
Touch Events - Level 2
Touch.force の値は 0.0～1.0 の間。
0.0 は圧力なし、または感圧タッチが使えない端末などでセットされる。
1.0 はハードウェアが認識することができる圧力の最大量。
The amount of pressure the user is applying to the touch surface. This is a value between 0.0 (no pressure) and 1.0 (the maximum amount of pressure the hardware can recognize).
Touch.force - Web APIs | MDN
パソコン版の Google Chrome に搭載されている Chrome Developer Tools (DevTools) を使って iPhone をエミュレートしたら、 Touch.force の値は 1.0 固定みたいだった。
JavaScript で Touch.force を処理するサンプル
touchstart, touchmove イベントで Touch オブジェクトと force プロパティを取得するサンプルコード。
window.onload = function(){
get("content").addEventListener("touchstart", handleEvent);
get("content").addEventListener("touchmove", handleEvent);
};
function get(id){
return document.getElementById(id);
}
function handleEvent(event) {
try{
var type = event.type;
var touch = event.touches[0];
if(touch){
var force = touch.force || 0;
var x = touch.clientX;
var y = touch.clientY;
if(force >= 0.5){
hogehoge();
}
}
}catch(e){
alert(e);
}
}
サンプルを作るときに参考になった資料など
ForceTouch イベントは、touchstart/touchmove の event.touches[n].force から取得できます。force の値は 0.0〜1.0 です。
(中略)
ドキュメントも色々とあたりましたが、「ルークよ… webkitmouseforcexxx を使うのだ…」といったドキュメントばかりです。謎が謎を生む展開です。
結局 WebKit のコードを確認して、正解にたどり着きました。
iOS 9 Mobile Safari was enabled force touch event - Qiita
Apple 公式のドキュメントに WebKit DOM Programming Topics: Responding to Force Touch Events ってのがあるけど、どうやらこれは iOS 用ではなくて、Mac OS X 用みたい。
Force Touch events are available in OS X 10.11 and later on devices equipped with Force Touch trackpads.
WebKit DOM Programming Topics: Responding to Force Touch Events
また、 iOS 9 Safari で音を鳴らすのに少し苦労した。
基本は 3/3 HTML5のaudio要素で効果音を鳴らす [ホームページ作成] All About に書かれているものを使えばOK。パソコンの Google Chrome では、ちゃんと音が鳴った。
ただ、iOS Safari には制限があって、簡単には音が鳴らない。
Audio や Video リソースの読み込み(load) や 再生(play)は、ユーザのインタラクションを起点としなければならない(パケ死対策)
<audio src="mad.max.m4a" autoplay preload></audio> の autoplay や preload は無視され、自動で再生されません
この制限は iOS Safari のみに存在します。Chrome や他のブラウザにはありません。
なお、この制限は、「音を鳴らしたい画面に遷移する前に、予めユーザに画面をタッチさせておき、そのタイミングで無音のmp3/aacを流しておくことで、以後自由に音を鳴らせるようにする」といった小技で回避することができます。
iOS 9 Safari WebAudio::AudioBufferSourceNode does not play on first touchstart event. - Qiita
もうひとつ、 iOS 9 特有の問題 (不具合) もあるとのこと。
touchstart イベントを起点とした WebAudio の createBufferSource で作成したバッファを再生できない
touchend なら問題ない
createMediaElementSource で作成したバッファは touchstart でも touchend 起点でも再生できる
iOS 9 Safari WebAudio::AudioBufferSourceNode does not play on first touchstart event. - Qiita
createMediaElementSource は Mozilla の資料が詳しい。
createMediaElementSource()メソッドは、新しく MediaElementAudioSourceNode オブジェクトを作成するインターフェースとして使用します。HTMLに存在する <audio> または <video> から作成された音声は、再生、操作できます。
AudioContext.createMediaElementSource() - Web API インターフェイス | MDN
サンプルに使った音と画像の素材について
効果音は 効果音 割れる01＜割れる＜食器＜『 生活系音 』 by On-Jin ～音人～ を使わせていただいた。
割れた液晶画像は、だいぶ前にウチの子が破壊したテレビだったりする(ﾉД`)
⇒ [ヅ] TOSHIBA REGZA 37Z3500 が壊れました (2011-09-15)
iPhone 6s (Plus) の Force Touch (3D Touch) 機能を使ったネタ的なサンプル。
⇒ Force Touch (3D Touch) sample (音が鳴るので注意)
追記: 2015-10-08
強く押しただけで (画面から指を離さなくても) ヒビが入るバージョンも作成。ただし、たぶん音は鳴らない。。。
⇒ Force Touch (3D Touch) sample (v2)
もうひとつ。マルチタッチでの圧力値を見ることができるサンプルも作成。
⇒ Multitouch and Force Touch (3D Touch) Events sample
tags: javascript iphone
Posted by NI-Lab. (@nilab)
