IE 10 および Metro スタイル アプリケーションでのタッチ入力
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Touch Input for IE10 and Metro style Apps (2011/9/21 5:00 AM )
新しい入力デバイスとタッチ スクリーンの機能を効果的に取り入れているサイトでは、Web の対話性、面白さ、リアル感が一段とアップします。
Windows Developer Preview では、サイトやアプリケーションでのタッチ操作とペン入力がサポートされ、これにより開発者はタッチ機能を効果的に取り入れたサイトを作成したり、マルチタッチやジェスチャなどの最新の入力機能を備えた、斬新かつ強力なエクスペリエンスを構築できるようになりました。
実際の動作については、IE Test Drive サイトに新たに追加 (または更新) された Touch Effects、Lasso Birds、Flying Images などのデモでご確認いただけます。
マウス入力に影響しない、タッチ主導の入力処理
Windows 8 で提供される Metro スタイルの IE とアプリケーションは、Windows にかつてない斬新なタッチ エクスペリエンスをもたらすだけでなく、これまでの入力形式を犠牲にすることもありません。開発者はサイトやアプリケーションの構築に、こうしたタッチ主導のエクスペリエンスを利用できます。
では、入力処理の基本的な説明から始めましょう。
IE 10 および Metro スタイル アプリケーションでは、"ポインター" と呼ばれる抽象的な入力形式を扱います。
ポインターとは、マウスのカーソル、ペン、指がスクリーンに接触する接点のことです。この形式を採用することで、効果的に動作するサイトやアプリケーションをハードウェアの種類を問わず、簡単に作成することができます。マイクロソフトのハードウェア アクセラレーションへの取り組みと同じように、エクスペリエンスがハードウェアの進化に伴って向上しても、開発者が使用する API はハードウェアにとらわれることはありません。
ポインター イベントは、タッチ、ペン、マウスからの入力をカプセル化し、これによりハードウェアに依存しないエクスペリエンスを簡単に構築できる
ポインターによる一般的な入力を検知するイベントは、マウスのそれとよく似ています。たとえば、MSPointerDown 、 MSPointerMove、MSPointerUp、MSPointerOver、MSPointerOut などです。
またポインター イベントには、マウス イベントで想定される通常のプロパティ (クライアントの X/Y 座標、対象の要素、ボタンの状態など) に加え、他の入力形式に対応した新しいプロパティ (圧力、接点の図形座標、傾斜など) が用意されています。
このため開発者は使用される入力ハードウェアを問わず、ポインター イベントを簡単に記述し、アプリケーションを同じように動作させることができます。
開発者は、場合によってタッチ入力ごとに異なるエクスペリエンスを提供することもできます。そのようなときのために、ポインター イベントには、入力の型 (タッチ、ペン、またはマウス) を示す event.pointerType プロパティが用意されています。
以下は、ごくシンプルなペイント アプリケーションに、IE 10 Developer Guide の内容を参考に若干の修正を加えたものです。
<style>
html {
overflow: hidden;
-ms-content-zooming: none; /* パンとズームを無効にする */
}
</style>
<canvas id="drawSurface" width="500" height="500" style="border: 1px solid black;"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById("drawSurface");
var context = canvas.getContext("2d");
context.fillStyle = "rgba(255, 0, 0, 0.5)";
canvas.addEventListener("MSPointerMove", paint, false);
function paint(event) {
context.fillRect(event.offsetX, event.offsetY, 5, 5);
}
</script>
IE 10 では、規定でタッチによるパンやズームが可能です。開発者は、パンやズームをサイト内で自ら管理することもできます。
このサンプルでは、サイト内でタッチ入力を処理する方法と、スタイル ルールの overflow:hidden と –ms-content-zooming: none を使用してパンやズームを無効にする方法を示しています。
マルチタッチへの組み込みサポート
down、move、up は、タッチそれぞれに対して個別に発生します。したがって、上記のサンプル アプリケーションでも、特殊なコードを記述しなくてもマルチタッチをサポートします。
たとえば、スクリーン上の別のポインターについて情報を取得したい場合、どのポインター イベントでもスクリーン上のポインターの完全な一覧を簡単に取得することができます。
<style>
html {
overflow: hidden;
-ms-content-zooming: none; /* Disable pan/zoom */
}
#foo {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="foo"></div>
<script>
function handleEvent(event) {
var currentPointers = event.getPointerList();
if (currentPointers.length == 1) {
event.target.style.backgroundColor = "red";
} else {
event.target.style.backgroundColor = "green"; //multiple touch points are used
}
}
document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);
</script>
最新のジェスチャ入力
Windows Developer Preview では、拡大縮小、パン、回転など、ポインターを使用した高度なジェスチャの認識もサポートされています。
これらのジェスチャは、MSGestureStart、MSGestureChange、MSGestureEnd というイベントを使用すれば簡単に利用できます。
各イベントに対してジェスチャの変換に関する情報 (回転、拡大縮小、移動など) が提供され、CSS 変換のようなさまざまな方法で、アプリケーションに適用することが可能です。
<style>
html {
overflow: hidden;
-ms-content-zooming: none; /* Disable pan/zoom */
}
#foo {
background-color: red;
width: 500px;
height: 500px;
-ms-transform-origin: 50%;
-ms-transform-origin: 50%;
}
</style>
<div id="foo"></div>
<script>
function handleEvent(event) {
event.target.style.msTransform = "scale(" + event.scale + ")";
}
document.getElementById("foo").addEventListener("MSGestureChange", handleEvent, false);
</script>
機能検出、フォールバック、他のモデルのサポート
さまざまなプラットフォームで使用されるコード向けに、IE 10 ではポインター イベントに対するシンプルな機能検出が用意されています。
if (window.navigator.msPointerEnabled) {
// このシステムではポインター イベントが発生
}
メモ : 現在の Windows Developer Preview では、このプロパティで判断できるのは、システムがタッチ入力またはペン入力のイベントをサポートしているということですが、将来的にはこのプロパティは修正され、マウス、ペン、タッチによるポインターイベントへのサポートが判断できるようになります。
機能検出を使用すれば、異なる入力モデル間で正常に動作するサイトを作成することが可能です。
たとえば Lasso Birds は、Windows 8 Developer Preview、Apple の iOS、Google の Android、そしてマウス操作のみに対応したシステムのいずれでも正常に動作します。
Windows 8 の場合、このデモはポインター イベントを使用し、1 つのコード パスですべての入力を処理しています。
その他のプラットフォームの場合、マウス イベントと独自のタッチ イベントを組み合わせて使用し、同様のエクスペリエンスを実現しています。
if (window.navigator.msPointerEnabled) {
elm.addEventListener("MSPointerDown", handleInput, false); // タッチ、ペン、マウスのイベントが発生
} else {
elm.addEventListener("mousedown", handleInput, false); // マウスのイベントのみ発生
}
ポインター イベントとジェスチャ イベントは、タッチに関連するマイクロソフトの開発モデルのほんの一部です。今後の投稿では、Lasso Birds のしくみや他のタッチ API について紹介していきます。
ポインター イベントやジェスチャ イベント、その他のタッチ API の詳細については、「IE 10 Developer Guide ( 英語) 」を参照してください。皆さんが構築したタッチ エクスペリエンスを利用できる日が来ることを楽しみにしています。また、Connect からのフィードバックもお待ちしています。
—Jacob Rossi、Internet Explorer プログラム マネージャー
マークアップのサンプルを訂正 — 更新情報