端末のモーション イベントおよび画面の向きのイベントによって、モバイル端末に組み込まれた加速度計、ジャイロスコープ、およびコンパスの機能を利用することができます。
これらのイベントにはさまざまな用途があります。たとえばゲームで、キャラクターの向きやアクションを制御するために使用することができます。位置情報と共に使用すると、より正確なターンバイターンのナビゲーションを作成したり、特定の場所に関する情報を提供したりする際に役立ちます。
概要
- 端末の上端を検出し、端末の回転状態を特定します。
- 端末のモーション イベントおよび画面の向きのイベントに応答するタイミングと方法について説明します。
どちらの端が上か？
端末のモーション イベントおよび画面の向きのイベントによって返されるデータを使用するためには、その値の意味を理解する必要があります。
地球の座標フレーム
地球座標フレームは、X、Y、Z の値によって記述され、重力と標準的な磁北方向を基準とした軸が用いられます。
| 座標系 | |
|---|---|
X |
東西方向を表します（東が正）。 |
Y |
南北方向を表します（北が正）。 |
Z |
地面に対して垂直な上下方向を表します（上が正）。 |
デバイスの座標フレーム
端末の座標フレームは、x、y、z の値によって記述され、端末の中心を基準とした軸が用いられます。
| 座標系 | |
|---|---|
X |
画面の平面において右方向が正。 |
Y |
画面の平面において上方向が正。 |
Z |
画面またはキーボードに対して垂直、延びている方向が正。 |
スマートフォンやタブレットでは、端末の向きは画面の典型的な向きを基準とします。スマートフォンやタブレットの場合、端末が縦表示になっている状態を基準とします。デスクトップまたはラップトップ コンピュータの場合は、画面の向きはキーボードとの関連性で考慮されます。
回転データ
回転データはオイラー角として返されます。これは、デバイスの座標フレームと地球の座標フレーム間の角度の差を表します。
アルファ版
回転軸は Z 軸です。端末の上部が真北を向いている場合、alpha の値は 0° です。端末が反時計回りに回転するにつれて、alpha の値は増加します。
ベータ版
回転軸は X 軸です。端末の上部と下部が地表から等距離にある場合、beta の値は 0° です。端末の上部が地表に近づくように傾くにつれて、値が増加します。
ガンマ
回転軸は Y 軸です。端末の左端と右端が地表から等距離にある場合、gamma の値は 0° です。端末の右端が地表に近づくように傾くにつれて、値が増加します。
デバイスの向き
端末画面の向きのイベントは回転データを返しますが、それには端末の前面から背面への傾斜、両側面への傾斜、携帯電話やノートパソコンのコンパスの有無、端末画面の向きなどの情報が含まれています。
慎重に使用してください。サポートをテストします。すべての orientation イベントで UI を更新せず、代わりに requestAnimationFrame に同期します。
端末画面の向きのイベントの用途
端末画面の向きのイベントにはいくつかの用途があります。以下に例を示します。
- ユーザーの移動に伴いマップを更新します。
- 視差効果の追加など、UI の細かい調整を行います。
- 位置情報と組み合わせると、ターンバイターンのナビゲーションに使用できます。
サポートを確認して、イベントをリッスンする
DeviceOrientationEvent をリッスンするには、まずこのイベントがブラウザでサポートされていることを確認します。次に、deviceorientation イベントをリッスンする window オブジェクトにイベント リスナーを登録します。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
端末画面の向きのイベントを処理する
device orientation イベントは、デバイスが移動したり、向きが変わったりしたときに発生します。このイベントは、地球の座標フレームを基準として、端末の現在位置の変化量を返します。
このイベントは通常、alpha、beta、gamma の 3 つのプロパティを返します。Mobile 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] |
サンプル: オブジェクトの最大加速度の計算
端末モーション イベントの 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!] ボタンをタップした後、ユーザーにジャンプするよう指示します。この間、ページは最大（および最小）加速度値を記憶します。そしてジャンプの後、ユーザーに最大加速度を表示します。