デバイスのモーション イベントと向きイベントを使用すると、モバイル デバイスに組み込まれている加速度計、ジャイロスコープ、コンパスにアクセスできます。
これらのイベントはさまざまな目的に使用できます。たとえば、ゲームでは、キャラクターの方向やアクションを制御するために使用できます。位置情報と組み合わせて使用すると、より正確なターンバイターン方式のナビを作成したり、特定の場所に関する情報を提供したりできます。
概要
- デバイスのどちら側が上になっているか、デバイスがどのように回転しているかを検出します。
- モーション イベントと向きイベントに応答するタイミングと方法について説明します。
どちらの側が上向きでしょうか。
デバイスの向きとモーション イベントから返されるデータを使用するには、提供される値を理解することが重要です。
地球座標系
地球座標フレームは、X、Y、Z の値で表され、重力と標準の磁気方位に基づいて調整されます。
| 座標系 | |
|---|---|
X |
東西方向を表します（東が正）。 |
Y |
南北方向を表します（北が正）。 |
Z |
地面に対して垂直な上下方向を表します（上方向が正）。 |
デバイス座標フレーム
x、y、z の値で表されるデバイス座標フレームは、デバイスの中心に基づいて調整されます。
| 座標系 | |
|---|---|
X |
画面の平面で、右側が正。 |
Y |
画面の平面で、上方向が正。 |
Z |
画面またはキーボードに垂直で、正の値は外側に向かって増加します。 |
スマートフォンやタブレットの場合、デバイスの向きは画面の一般的な向きに基づきます。スマートフォンとタブレットの場合、デバイスがポートレート モードであることを前提としています。デスクトップ パソコンまたはノートパソコンの場合、向きはキーボードとの関係で考慮されます。
回転データ
回転データはオイラー角として返され、デバイス座標フレームと地球座標フレームの差を度数で表します。
アルファ版
Z 軸を中心とした回転。デバイスの上部が真北を指している場合、alpha の値は 0° です。デバイスが反時計回りに回転すると、alpha の値が増加します。
ベータ版
X 軸を中心とする回転。デバイスの上部と下部が地表から等距離にある場合、beta の値は 0° になります。デバイスの上部が地面に向かって傾くにつれて、値が増加します。
ガンマ
Y 軸を中心とする回転。デバイスの左右の端が地表から等距離にある場合、gamma の値は 0° です。右側が地表に向かって傾くにつれて、値が増加します。
デバイスの向き
デバイスの向きイベントは、デバイスが前後に傾いている量、左右に傾いている量、スマートフォンやノートパソコンにコンパスがある場合はデバイスが向いている方向など、回転データを返します。
使用をお控えください。
サポートのテスト。
向きイベントごとに UI を更新するのではなく、requestAnimationFrame に同期します。
デバイスの向きイベントを使用するタイミング
デバイスの向きイベントには、いくつかの用途があります。以下に例を示します。
- ユーザーの移動に合わせて地図を更新する。
- UI の微調整（視差効果の追加など）。
- 位置情報と組み合わせることで、ターンバイターン方式のナビに使用できます。
サポートを確認してイベントをリッスンする
DeviceOrientationEvent をリッスンするには、まずブラウザがイベントをサポートしているかどうかを確認します。次に、deviceorientation イベントをリッスンする window オブジェクトにイベント リスナーをアタッチします。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
デバイスの向きのイベントを処理する
デバイスの向きイベントは、デバイスが移動したり、向きが変わったりしたときに発生します。地球座標系を基準とした現在の位置にあるデバイスの差分に関するデータを返します。
このイベントは通常、alpha、beta、gamma の 3 つのプロパティを返します。モバイル Safari では、コンパスの方向とともに、追加のパラメータ webkitCompassHeading が返されます。
デバイスの動き
デバイスの向きイベントは、デバイスが前後に傾いている量、左右に傾いている量、スマートフォンやノートパソコンにコンパスがある場合はデバイスが向いている方向など、回転データを返します。
デバイスの現在のモーションが必要な場合は、デバイス モーションを使用します。rotationRate は °/秒で指定します。acceleration と accelerationWithGravity は m/秒2 で指定します。ブラウザの実装の違いに注意してください。
デバイス モーション イベントを使用するタイミング
デバイス モーション イベントにはいくつかの用途があります。以下に例を示します。
- シェイク機能でデータを更新します。
- ゲームでキャラクターをジャンプさせたり移動させたりする。
- 健康＆フィットネス アプリの場合。
サポートを確認してイベントをリッスンする
DeviceMotionEvent をリッスンするには、まず、ブラウザでイベントがサポートされているかどうかを確認します。次に、devicemotion イベントをリッスンする window オブジェクトにイベント リスナーをアタッチします。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
デバイスのモーション イベントを処理する
デバイス モーション イベントは一定の間隔で発生し、その時点でのデバイスの回転（°/秒）と加速度（m/秒2）に関するデータを返します。一部のデバイスには、重力の影響を排除するハードウェアが搭載されていません。
このイベントは、accelerationIncludingGravity、acceleration（重力の影響を除く）、rotationRate、interval の 4 つのプロパティを返します。
たとえば、平らなテーブルの上に画面を上にして置かれたスマートフォンについて考えてみましょう。
| 州 | 回転 | 加速度（m/s2） | 重力加速度（m/s2） |
|---|---|---|---|
| 移動なし | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| 空に向かって上昇する | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| 右にのみ移動 | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| 右上への移動 | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
逆に、画面が地面に対して垂直で、ユーザーから直接見えるようにスマートフォンを保持している場合:
| 州 | 回転 | 加速度（m/s2） | 重力加速度（m/s2） |
|---|---|---|---|
| 移動なし | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| 空に向かって上昇する | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| 右にのみ移動 | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| 右上への移動 | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
サンプル: 物体の最大加速度を計算する
デバイス モーション イベントを使用する方法の 1 つは、オブジェクトの最大加速度を計算することです。たとえば、ジャンプする人の最大加速度はどれくらいでしょうか。
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
[Go!] ボタンをタップすると、ユーザーはジャンプするよう指示されます。その間、ページは最大（および最小）の加速度値を保存し、ジャンプ後にユーザーに最大加速度を通知します。