デバイスのモーション イベントと向きイベントを使用すると、モバイル デバイスに組み込まれている加速度計、ジャイロスコープ、コンパスにアクセスできます。
これらのイベントは、ゲームでキャラクターの向きやアクションを制御するなど、さまざまな目的に使用できます。位置情報と組み合わせて使用すると、より正確なルート案内を作成したり、特定の場所に関する情報を提供したりできます。
概要
- デバイスのどちら側が上か、デバイスがどのように回転しているかを検出します。
- モーション イベントと向きイベントに応答するタイミングと方法について学びます。
どちらの側が上向きでしょうか。
デバイスの向きとモーション イベントが返すデータを使用するには、返される値を理解することが重要です。
地球座標フレーム
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 は °/sec で指定します。acceleration と accelerationWithGravity は m/sec2 で指定します。ブラウザの実装の違いに注意してください。
デバイスのモーション イベントを使用する場合
デバイスのモーション イベントにはいくつかの用途があります。以下に例を示します。
- シェイク操作でデータを更新します。
- ゲームでは、キャラクターをジャンプさせたり動かしたりする。
- 健康＆フィットネス アプリの場合。
サポートを確認してイベントをリッスンする
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] |
例: 物体の最大加速度を計算する
デバイスのモーション イベントを使用する方法の一つは、オブジェクトの最大加速度を計算することです。たとえば、ジャンプする人の最大加速度はどれくらいですか？
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!] ボタンをタップすると、ユーザーにジャンプするよう指示されます。この間、ページは最大（および最小）加速度値を保存し、ジャンプ後に最大加速度をユーザーに伝えます。