デバイスの向きと動き

Pete LePage

端末のモーション イベントおよび画面の向きのイベントによって、モバイル端末に組み込まれた加速度計、ジャイロスコープ、およびコンパスの機能を利用することができます。

これらのイベントはさまざまな目的で使用できます。たとえば、ゲームではキャラクターの向きや動作を制御できます。位置情報とともに使用すると、より正確なターンバイターン ナビゲーションを作成したり、特定の場所に関する情報を提供したりできます。

概要

  • 端末の上端を検出し、端末の回転状態を特定します。
  • モーション イベントと向きイベントにいつ、どのように反応するのかを学びます。

どちらの端が上か？

デバイスの向きとモーションのイベントから返されるデータを使用するには、提供される値を理解することが重要です。

地球の座標フレーム

地球座標フレームは、X、Y、Z の値によって記述され、重力と標準的な磁北方向を基準とした軸が用いられます。

座標系
X 東西方向を表します（東が正）。
Y 南北方向を表します（北が正）。
Z 地面に対して垂直の上下方向を表します（上が正）。

デバイスの座標フレーム

端末の座標フレームの図
デバイスの座標フレームのイラスト

x、y、z の値で記述されるデバイス座標フレームは、デバイスの中心に基づいて配置されます。

座標系
X 画面の平面内で、右が正。
Y 画面の平面において上方向が正。
Z 画面またはキーボードに対して垂直、延びている方向が正。

スマートフォンやタブレットでは、端末の向きは画面の典型的な向きを基準とします。スマートフォンやタブレットの場合は、デバイスがポートレート モードに設定されているかどうかに基づきます。デスクトップまたはラップトップ コンピュータの場合は、画面の向きはキーボードとの関連性で考慮されます。

ローテーション データ

回転データは、デバイスの座標フレームと地球の座標フレームの差の度数を表すオイラー角として返されます。

アルファ版

デバイスの座標フレーム内のアルファのイラスト
デバイスの座標フレーム内のアルファのイラスト

Z 軸を中心とした回転。端末の上部が真北を向いている場合、alpha の値は 0° です。端末が反時計回りに回転するにつれて、alpha の値は増加します。

ベータ版

端末の座標フレームの図
端末の座標フレームにおける beta の図

回転軸は 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!';
}

デバイスの画面の向きイベントを処理する

デバイスの画面の向きイベントは、デバイスが移動または画面の向きが変わると発生します。このイベントは、地球の座標フレームを基準として、端末の現在位置の変化量を返します。

このイベントでは通常、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!] ボタンをタップした後、ユーザーにジャンプするよう指示します。この間、ページは最大（および最小）加速度値を記憶します。そしてジャンプの後、ユーザーに最大加速度を表示します。

フィードバック