このページは Cloud Translation API によって翻訳されました。

デバイスの向きと動き

Pete LePage

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

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

概要

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

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

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

地球の座標フレーム

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

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

デバイスの座標フレーム

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

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

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

ローテーションデータ

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

アルファ版

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

ベータ版

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

ガンマ

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/秒で提供されます²。ブラウザの実装方法の違いにご注意ください。

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

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

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

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

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

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

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

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

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

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

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

デバイスの向きと動き

概要

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

地球の座標フレーム

デバイスの座標フレーム

ローテーション データ

アルファ版

ベータ版

ガンマ

デバイスの向き

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

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

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

デバイスの動き

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

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

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

サンプル: 物体の最大加速度を計算する

フィードバック

ローテーションデータ

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

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