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

本日私たちは、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

Comments

• Anonymous
  September 05, 2012
  前から何度か書いてますが、7向けIE10は何も詳細情報もないのですか？ いい加減にしてくれないと怒りますよ？ ちゃんとサポートするといったんだから、今すぐにでも情報提供してもいいのではありませんか？ 米本社も日本法人も、きちんとそれだけの責任を果たして仕事して下さい。 Windows 8なんていらないから、こちらを提供してくれればそれでいいんでしょう。 Windows 8は使いづらいしややこしいから、発売中止を願いたいです！

• Anonymous
  September 05, 2012
  The comment has been removed

• Anonymous
  September 07, 2012
  こういった機能がWindows 7でのタッチ端末でも使えるようにならないかな。 IE10が出たらどうなるか楽しみだ。 発表はまだなにもないのでなんとも言えないけど。 しかしあのぉ～さんやtenkimanさん、Naoさんらのネガキャンがひどいな。

• Anonymous
  September 07, 2012
  どうやら噂によれば、IE10は7向けも出すそうだ。 おそらく今のところ、Win 8と同じタイミングかそれ以後だと思う。 とはいえ、サイトがすぐにIE10に対応してくれるとは限らない。 出たからといって、すぐに乗り換えるのはどうかなと感じる面もありそう。 しばらくIE9で様子見でいいや。

• Anonymous
  September 09, 2012
  ブラウザの件、ようやくEUと同意しましたか。 早く解決させてください。 あとWindows RTのデスクトップ画面でのブラウザについても詳細をおねがいします。 記事と関係ないものですみませんでした。

• Anonymous
  September 09, 2012
  Windows 8の開発者ブログでも書いたが、スタートメニューを戻してほしい。 大変使いづらくてイライラする、私だけじゃなく他の人もだと思う。 IEチームからもしっかり伝えておいてほしい。 あとIEだが、バージョンアップごとにブラウザモードが増えているが、それもどうにかしてほしい。 検証する対象が増えて大変、それが無理ならブラウザ開発から撤退すべきだ。

• Anonymous
  September 10, 2012
  Windows 8のところにも書いたがこちらにも書く。 いつになればWindows 7向けのInternet Explorer 10をリリースするんだろうね。 あんな使いづらい製品出す暇があるなら、先に既存OS向けをきちんと作れ。 新しいWindows 8なんて殆どの人が求めてないわ。 それになんで、勝手に8に統合したのか問い詰めたいわ。 ユーザー舐めるのもいいかげんにしろ！

• Anonymous
  September 12, 2012
  The comment has been removed