デバイスの方向と動きを活用する

本日私たちは、W3C の DeviceOrientation イベント仕様の草案 (英語) のプロトタイプ実装を HTML5Labs.com (英語) に公開しました。この仕様が定義する新しい DOM イベントによって、デバイスの物理的な方向と動きに関する情報を取得できるようになります。開発者は、これらの API を通して、最新デバイスに搭載のセンサーを活用した高度な Web ユーザー エクスペリエンスを簡単に提供することができます。

開発者におけるメリット

開発者は Device Orientation API によって可能になる新しい入力メカニズムを、ゲーム、アプリの新しいジェスチャ ("デバイスを振って画面をクリア"、"傾けて拡大" など)、さらに拡張現実エクスペリエンスなどに活用できます。この API を理解する最初の一歩として、プロトタイプのインストール ファイルに含まれるサンプル ゲームをご覧ください。

今回のブログ記事の概念を実際の動きで確認できるビデオ

API のしくみ

DeviceOrientation API は方向と動きという 2 つの異なるセンサー データを公開します。

(ユーザーがデバイスを傾けたり回転させたりして) デバイスの物理的な向きが変更されると、deviceorientation イベントがこのウィンドウで呼び出され、回転時の alpha、beta、gamma それぞれの向き (角度で表現) を提供します。

<div id="directions"></div>

<script>

window.addEventListener("deviceorientation", findNorth);

function findNorth(evt) {

var directions = document.getElementById("directions");

if (evt.alpha < 5 || evt.alpha > 355) {

directions.innerHTML = "North!";

} else if (evt.alpha < 180) {

directions.innerHTML = "Turn Left";

} else {

directions.innerHTML = "Turn Right";

}

}

</script>

デバイスが動かされたり回転されたりした (つまり加速度が加えられた) 場合は、devicemotion イベントがこのウィンドウで呼び出され、x、y、z それぞれの軸の加速度 (デバイス上での重力加速度を含むものと含まないものをメートル毎秒毎秒 (m/s²) で表現) と、alpha、beta、gamma それぞれの回転角度での変化率 (度毎秒 (deg/s) で表現) を提供します。

<div id="status"></div>

<script>

window.addEventListener("devicemotion", detectShake);

function detectShake(evt) {

var status = document.getElementById("status");

var accl = evt.acceleration;

if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {

status.innerHTML = "EARTHQUAKE!!!";

} else {

status.innerHTML = "All systems go!";

}

}

</script>

プロトタイプをお試しください

プロトタイプは HTML5Labs (英語) からダウンロードできます。このプロトタイプには、Internet Explorer 10 と、Windows 8 がサポートする加速度センサーを搭載したデバイスが必要です。デスクトップ上で Internet Explorer の拡張機能として動作するこのプロトタイプを使って、開発者は DeviceOrientation API の実際の動きを確認できます。また、プロトタイプをインストールして DeviceOrientation.js スクリプト ファイルへの参照を追加するだけで、このプロトタイプを使った独自のページを開発できます (スクリプト ファイルは、プロトタイプのインストール後にデスクトップにコピーしてください)。

<script type="text/javascript" src="DeviceOrientation.js"></script>

フィードバックをお待ちしております

今回紹介した W3C の DeviceOrientation イベント仕様のプロトタイプ実装について、開発者の皆さんの考えをぜひお聞かせください。この記事のコメント欄やメッセージでフィードバックをお寄せください。

—Microsoft Open Technologies Inc. プログラム マネージャー Abu Obeida Bakhach
—Internet Explorer 担当グループ Jacob Rossi