Firefox 4 Beta 3 リリース – マルチタッチを体験

Firefox 4 Beta 3 が公開されました。今回のベータ版には数百ものバグ修正、機能強化、Windows 7 のマルチタッチ対応が含まれます (リリースノート)。この記事ではマルチタッチ対応について説明します。

Felipe Gomes は、Web コンテンツでのマルチタッチ対応の実現に取り組んでいます。最新のベータ版で、この新機能を試してみます。

マルチタッチ、HTML5、CSS3 で遊ぶ:

上の動画は YouTube でホストされています。HTML5 の video タグが有効な場合は、それが使用されます (詳細はこちらをご覧ください)。YouTube 動画はこちらでご覧いただけます。

マルチタッチイベント

マルチタッチ対応ディスプレイをお使いの場合、タッチイベントが Web ページに送られます。このイベントはマウスイベントとよく似ています。入力 (指を使って作られる) のたびに、それに対応するイベントが生成されます。

タッチイベントでは、いくつかの役に立つプロパティが提供されます。

event.streamId: これが マルチタッチであることを忘れないでください。つまり、複数のソースからの複数のイベントを処理する必要があるということです。従って、各イベントには入力を識別するための ID が付けられます。
event.mozInputSource: マウス、ペン、指など、使用されるデバイスの種類です (ハードウェアが対応している場合)。これはマウスイベントのプロパティのひとつです。
event.clientX/Y: 座標です。

マルチタッチ対応デバイス専用の UI を設計してみたいですか？擬似クラス :-moz-system-metric(touch-enabled) またはメディアクエリ -moz-touch-enabled を使用して、指を使った操作に適した UI を設計できます。

注: 現在のところ、この機能が動作するのは Windows 7 のみです。マルチタッチに対応したハードウェアをお持ちでない場合は、Hernan のマルチタッチシミュレータをお試しください。

(この動画は Felipe により作成されたものです。他の動画はこちら)

動画の前半では、Web ページでマルチタッチ入力に関するデータがどのように取得されるか、接点がどれだけ正しく追跡されるか、タッチ入力とペン入力がどのように区別されるかを確認できます。

後半では、流体シミュレータでマルチタッチ入力の視覚アプリケーションを見ることができます。このアプリケーションでは、各接点から粒子源が追加されます。また、これを移動することで場に力が加えられます。

この前半と後半の両方で、コンテンツのレンダリングに HTML5 の canvas 要素が使用されています。

気に入っていただけましたか？

編注: より詳しくは、Felipe の最新のブログ記事をご覧ください。