デバイスの向きと動き

Pete LePage

デバイスの動きと向きのイベントにより、組み込みの モバイルデバイスの加速度計、ジャイロスコープ、コンパス

これらのイベントはさまざまな目的で使用できます。たとえばゲームでは、 指します。位置情報と併用すると より正確なターンバイターン方式ナビの作成や、 特定できます

概要

  • デバイスのどちらの側が上向きで、デバイスの回転状態を検出します。
  • モーション イベントと向きイベントにいつ、どのように反応するのかを学びます。

どちらの側が上向きでしょうか。

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

地球の座標フレーム

X、Y、Z の値で記述される地球座標フレームが配置されています 重力と標準的な磁気の向きに基づきます。

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

デバイスの座標フレーム

<ph type="x-smartling-placeholder">
</ph> デバイスの座標フレームのイラスト <ph type="x-smartling-placeholder">
</ph> デバイスの座標フレームのイラスト
をご覧ください。

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

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

スマートフォンやタブレットでは、デバイスの向きは一般的な 画面の向きに応じて変化しますスマートフォンとタブレットの場合は、デバイスに基づきます。 ポートレートモードになりますデスクトップ パソコンまたはノートパソコンの場合、画面の向きは 例を見てみましょう。

ローテーション データ

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

アルファ版

<ph type="x-smartling-placeholder">
</ph> デバイスの座標フレーム内のアルファのイラスト <ph type="x-smartling-placeholder">
</ph> デバイスの座標フレーム内のアルファのイラスト
をご覧ください。

Z 軸を中心とした回転。alpha の値は、頂上が デバイスは真北を向いています。デバイスを反時計回りに回転させると alpha 値が増えます。

ベータ版

<ph type="x-smartling-placeholder">
</ph> デバイスの座標フレームのイラスト <ph type="x-smartling-placeholder">
</ph> デバイスの座標フレーム内のベータ版のイラスト
をご覧ください。

X 軸を中心とした回転。beta の値は、 デバイスの底部が地表から等距離にあることを確認します。この値 デバイスの上部が地表に向かって傾斜すると増加します。

ガンマ

<ph type="x-smartling-placeholder">
</ph> デバイスの座標フレームのイラスト <ph type="x-smartling-placeholder">
</ph> デバイスの座標フレーム内のガンマのイラスト
をご覧ください。

y 軸を中心とした回転。gamma の値は、左側と デバイスの右端が地表から等距離にあることを確認します。この値 右側が地表に向かって傾くにつれて増加します。

デバイスの向き

デバイスの向きのイベントは、回転データを返します。 デバイスが前面から背面、左右に傾いていること、スマートフォンやノートパソコンが コンパス（デバイスの向いている方向）があります。

使いすぎない。 サポートをテストします。 画面の向きのイベントがあるたびに UI を更新しない。requestAnimationFrame と同期してください。

デバイスの画面の向きイベントを使用するタイミング

デバイスの画面の向きイベントには、いくつかの用途があります。以下に例を示します。

  • ユーザーの移動に合わせて地図を更新します。
  • 視差効果の追加など、UI を微調整します。
  • 位置情報と組み合わせると、ターンバイターン方式のナビに使用できます。

サポートを確認したり、イベントをリッスンする

DeviceOrientationEvent をリッスンするには、まずブラウザがイベントをサポートしているかどうかを確認します。次に、deviceorientation イベントをリッスンする window オブジェクトにイベント リスナーをアタッチします。

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

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

デバイスの画面の向きイベントは、デバイスが移動または変化したときに発生します。 方向です。このメソッドは、指定されたデバイスと 現在の位置に対する 地球の座標フレーム。

このイベントでは通常、alpha、 beta、gamma。Mobile Safari では webkitCompassHeading コンパス方位とともに返されます。

デバイスの動き

デバイスの向きのイベントは、回転データを返します。 デバイスが前面から背面、左右に傾いていること、スマートフォンやノートパソコンが コンパス（デバイスの向いている方向）があります。

デバイスの現在の動きが必要な場合に使用します。 rotationRate は °/秒で提供されます。 acceleration と accelerationWithGravity は m/秒で提供されます2。 ブラウザの実装方法の違いにご注意ください。

デバイスのモーション イベントを使用するタイミング

デバイスのモーション イベントには、いくつかの用途があります。以下に例を示します。

  • シェイク操作でデータを更新します。
  • ゲームでキャラクターをジャンプさせたり動かしたりすること。
  • 健康&フィットネス アプリの場合。

サポートを確認したり、イベントをリッスンする

DeviceMotionEvent をリッスンするには、まずイベントが次の状態かどうかを確認します。 確認できます。次に、イベント リスナーを window にアタッチします。 devicemotion イベントをリッスンするオブジェクト。

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

デバイスのモーション イベントを処理する

デバイスのモーション イベントは定期的に発生し、 回転（°/秒）と加速度（m/秒2） 情報を取得できます。一部のデバイスには、このハードウェアがありません。 重力の影響を排除できます

このイベントは 4 つのプロパティを返します。 accelerationIncludingGravity acceleration では、 gravity、rotationRate、interval があります。

たとえば、平らなテーブルに置かれたスマートフォンと、 画面が上向きになります

州 回転 加速度（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!] をタップしてから、ボタンを押すと、ユーザーはジャンプするよう指示されます。その間 ページに最大（および最小）加速度値が保存され、 ジャンプしてユーザーに最大加速度を知らせます。

フィードバック