Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Device orientation events

DeviceMotionEvent インターフェイスは、ウェブ開発者に端末の位置と方向の変化のスピードに関する情報を提供します。

Event DeviceMotionEvent

デバイス・センサー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
DeviceMotionEvent
31
12
6
17
31
4.2
acceleration

acceleration プロパティは、端末によって記録された加速度の量をメートル毎秒毎秒 (m/s²)単位で返します。 DeviceMotionEvent.accelerationIncludingGravity とは異なり、加速度値は重力の影響を含みません。
31
12
6
17
31
4.2
accelerationIncludingGravity

accelerationIncludingGravity プロパティは、端末が記録した加速度をメートル毎秒毎秒 (m/s²)単位で返します。重力の影響を補正する DeviceMotionEvent.acceleration とは異なり、この値はユーザーによって発生させられた端末の加速度と、重力によって発生させられた加速度に反対の加速度の合計値です。言い換えれば、これは g-force を測定します。実際には、この値は加速度計によって測定された生データを表します。
31
12
6
17
31
4.2
DeviceMotionEvent

DeviceMotionEvent() コンストラクターは、新しい DeviceMotionEvent オブジェクトを作成します。
59
14
29
59
interval

DeviceMotionEvent.interval プロパティは、基盤となるハードウェアからデータを取得する間隔をミリ秒単位で返します。これを使用して、モーションイベントの粒度を決定することができます。
31
12
6
17
31
4.2
requestPermission_static
実験的

DeviceMotionEvent インターフェースの static メソッド `requestPermission()` は、加速度センサーおよびジャイロセンサーからのデバイスのモーションデータにアクセスするためのユーザーの許可を要求します。このメソッドは一時的なアクティベーションを必要とし、つまり、ボタンのクリックなどの UI イベントによってトリガーされる必要があります。
14.5
rotationRate

DeviceMotionEvent.rotationRate は読み取り専用プロパティで、端末がそれぞれの軸を中心に回転している秒あたりの角度を返します。
31
12
6
17
31
4.2
DeviceMotionEventAcceleration

DeviceMotionEventAcceleration オブジェクトは、端末が 3 軸すべてで経験している加速度の量に関する情報を提供します。
31
12
6
31
4.2
x

DeviceMotionEventAcceleration.x は読み取り専用のプロパティで、 DeviceMotionEventAcceleration オブジェクトの X 軸方向に発生した加速度を示します。
31
12
6
31
4.2
y

DeviceMotionEventAcceleration.y は読み取り専用のプロパティで、 DeviceMotionEventAcceleration オブジェクトの Y 軸方向に発生した加速度を示します。
31
12
6
31
4.2
z

DeviceMotionEventAcceleration.z は読み取り専用のプロパティで、 DeviceMotionEventAcceleration オブジェクトの Z 軸方向に発生した加速度を示します。
31
12
6
31
4.2
DeviceMotionEventRotationRate

DeviceMotionEventRotationRate は Device Orientation Eventsのインターフェイスで、端末が回転する 3 つの軸すべての速度に関する情報を提供します。
31
12
6
31
4.2
alpha

DeviceMotionEventRotationRate.alpha は読み取り専用のプロパティで、 Z 軸の回転速度を秒あたりの角度で示します。
31
12
6
31
4.2
beta

DeviceMotionEventRotationRate.beta は読み取り専用のプロパティで、 X 軸の回転速度を秒あたりの角度で示します。
31
12
6
31
4.2
gamma

これは読み取り専用のプロパティで、 Y 軸の回転速度を秒あたりの角度で示します。
31
12
6
31
4.2
DeviceOrientationEvent

DeviceOrientationEvent はDevice Orientation Eventsのインターフェイスで、ウェブ開発者にウェブページを実行する端末の物理的な方向からの情報を提供します。
7
12
6
17
18
4.2
absolute

absolute は DeviceOrientationEvent インターフェイスの読み取り専用プロパティで、端末が絶対的に（つまり、地球の座標フレームを参照して）方向データを提供しているのか、それとも端末が決定した任意のフレームを使用しているのかを示します。 詳しくは方向と動きのデータの解説を参照してください。
7
12
6
17
18
alpha

alpha は DeviceOrientationEvent インターフェイスの読み取り専用プロパティで、 Z 軸をの端末の回転を返します。つまり、端末が画面の中央を中心に何度回転したかを返します。 詳しくは方向と動きのデータの解説を参照してください。
7
12
6
17
18
4.2
beta

beta は DeviceOrientationEvent インターフェイスの読み取り専用プロパティで、 X 軸における端末の回転を返します。つまり、 -180 度から 180 度の範囲で、端末が前方または後方に傾いている度数を返します。 詳しくは方向と動きのデータの解説を参照してください。
7
12
6
17
18
4.2
DeviceOrientationEvent

DeviceOrientationEvent() コンストラクターは、新しい DeviceOrientationEvent オブジェクトを作成します。
59
14
17
59
gamma

gamma は DeviceOrientationEvent インターフェイスのプロパティで、 Y 軸における端末の回転、つまり端末が左右に傾いている度数を -90 から 90 の範囲で返します。 詳しくは方向と動きのデータの解説を参照してください。
7
12
6
17
18
4.2
requestPermission_static
実験的

DeviceOrientationEvent インターフェースの static メソッド requestPermission() は、加速度センサーおよびジャイロセンサーからのデバイスの向きデータにアクセスするためのユーザーの許可を要求します。また、絶対的な向きが必要な場合には、磁力計データへのアクセス許可を要求することもできます。このメソッドは一時的なアクティベーションを必要とします。つまり、…
14.5
devicemotion_event

devicemotion イベントは、一定の間隔で発行され、その時点で端末が受けている加速度の物理的な力の量を示します。また、利用可能であれば、回転速度に関する情報も提供します。
31
12
6
17
31
4.2
deviceorientation_event

deviceorientation イベントは、端末の現在の向きを地球座標フレームと比較した場合に、方角センサーから最新のデータが得られた場合に発生します。このデータは端末内部の方位磁針から収集されます。
7
12
6
17
18
4.2
deviceorientationabsolute_event

deviceorientationabsolute イベントは、端末の絶対的な方向が変化したときに発行されます。
50
79
110
50
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • `DeviceMotionEventAcceleration` インターフェースはサポートされていますが、`Window` スコープでは公開されていません。
注釈 1件
実装メモ
  • `DeviceMotionEventAcceleration` インターフェースはサポートされていますが、`Window` スコープでは公開されていません。
注釈 1件
実装メモ
  • バージョン50以前、Chromeはこのイベントに対して相対値ではなく絶対値を提供していました。依然として絶対値が必要な開発者は、`deviceorientationabsolute` イベントを使用できます。
注釈 1件
実装メモ
  • Firefox 3.6、4、および5では、標準のDeviceOrientationEventインターフェースの代わりに`mozOrientation`がサポートされていました。
注釈 1件
実装メモ
  • バージョン50以前のChrome for Androidでは、このイベントに対して相対値ではなく絶対値が提供されていました。依然として絶対値が必要な開発者は、`deviceorientationabsolute`イベントを使用できます。
注釈 2件
削除済み
  • このバージョンで機能が削除されました (6)
対応条件
  • 以前は別名で対応していました: mozOrientation (3.6)

基本構文

JAVASCRIPT 
window.addEventListener("devicemotion", (event) => {
  console.log(`${event.acceleration.x} m/s2`);
});

実務での使いどころ

  • Device orientation events の活用

    DeviceMotionEvent インターフェイスは、ウェブ開発者に端末の位置と方向の変化のスピードに関する情報を提供します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク