デバイスのモーション イベントと画面の向きのイベントにより、モバイル デバイスに組み込まれている加速度計、ジャイロスコープ、コンパスにアクセスできます。
これらのイベントは、ゲームでキャラクターの方向やアクションを制御するなど、さまざまな目的で使用できます。位置情報と併用すると、より正確なターンバイターン ナビゲーションの作成や、特定の場所に関する情報の提供が可能になります。
まとめ
- デバイスのどちらの側が上向きであるか、およびデバイスの回転状態を検出します。
- モーション イベントと向きイベントに応答するタイミングと方法を学びます。
どちらの側が上向きですか？
デバイスの向きイベントとモーション イベントが返すデータを使用するには、提供される値を理解することが重要です。
地球の座標フレーム
地球の座標フレームは、X、Y、Z の値で記述され、重力と標準の磁気方向に基づいて配置されます。
| 座標系 | |
|---|---|
X |
東西方向を表します（東が正）。 |
Y |
南北方向を表します（北が正）。 |
Z |
地面に対して垂直な上下方向を表します（上が正）。 |
デバイスの座標フレーム
デバイス座標フレームは、x、y、z の値で記述され、デバイスの中心を基準として配置されます。
| 座標系 | |
|---|---|
X |
画面の平面において右が正。 |
Y |
画面の平面において上に向かって正。 |
Z |
画面またはキーボードに対して垂直方向に、プラス方向に伸びている。 |
スマートフォンやタブレットの場合、デバイスの向きは画面の一般的な向きに基づきます。スマートフォンやタブレットの場合は、デバイスが縦向きになっていることを前提としています。デスクトップ パソコンまたはノートパソコンの場合、向きはキーボードに対する向きで決まります。
ローテーション データ
回転データはオイラー角として返されます。これは、デバイスの座標フレームと地球の座標フレームの差の度数を表します。
alpha
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 つのプロパティを返します。Mobile 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 つのプロパティを返します。
たとえば、画面を上に向けてフラット テーブルの上に置かれたスマートフォンについて見てみましょう。
| 状態 | rotation | 加速度（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] |
逆に、画面が地面に対して垂直になるようにスマートフォンを持ち、視聴者に直接視認できる場合は、次のようになります。
| 状態 | rotation | 加速度（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!] ボタンをタップすると、ジャンプするように指示されます。その間、ページに最大（および最小）加速度値が保存され、ジャンプ後に最大加速度がユーザーに表示されます。