端末方向イベント

端末方向イベントは、端末の物理的な方向を検出したり、端末の動きを検出したりするイベントです。

概念と使用方法

モバイル端末には、一般的にジャイロスコープ、コンパス、加速度などのセンサーがあり、端末上で動作するアプリケーションが端末の方向や動きを検出することができます。

方向イベントによって、ユーザーの端末の向きに応じて動作を変えたり、ユーザーが端末を移されたときに反応したりするウェブアプリケーションを書くことができます。

端末方向イベントを使用する典型的な機能には、以下のようなものがあります。

  • ウェブベースのゲームにおいて、ユーザーが端末を傾けたり移動させたりすることによって、ゲーム内のキャラクターやオブジェクトの動きを制御することを可能にすること。

  • 地図アプリケーションにおいて、端末の位置に基づいて地図の方向を変えたり、ユーザーの動きに合わせて更新される道順を提供したりするため。

  • ジェスチャー認識 — 例えば、「シェイク」ジェスチャーを認識し、ユーザーが機器を振ったときに入力エリアをクリアするなどのアクションを実行するために使用します。

メモ: この API はモバイルブラウザーが広く対応しています。デスクトップ専用のブラウザーでは、ハードウェアの違いによる制約もありますが、センサーを搭載した端末でのこの API の主な用途を考えると、これらの制約が重要な意味を持つことはほとんどありません。

インターフェイス

DeviceOrientationEvent

端末の物理的な方向の変化を表します。

DeviceMotionEvent

端末の加速度を、回転数に加えて表します。

DeviceMotionEventAcceleration

端末が経験している加速度を、 3 軸すべてで表します。

DeviceMotionEventRotationRate

端末が回転する速度を、 3 軸すべてで表します。

イベント

deviceorientation

地球座標フレームと比較した端末の現在の方向に関する、新しいデータが端末から利用できるときに発行されます。

devicemotion

一定間隔で発行され、その時点で端末が受けている加速度の物理的な力の大きさと、端末の回転速度を示します。

deviceorientationabsolute

端末の絶対的な方向が変化したときに発行されます。

仕様書

Specification
Device Orientation and Motion

ブラウザーの互換性

api.Window.deviceorientation_event

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
deviceorientation event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

api.Window.devicemotion_event

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
devicemotion event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.Window.deviceorientationabsolute_event

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
deviceorientationabsolute event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.DeviceOrientationEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceOrientationEvent
DeviceOrientationEvent() constructor
absolute
alpha
beta
gamma
requestPermission() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

api.DeviceMotionEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceMotionEvent
DeviceMotionEvent() constructor
acceleration
accelerationIncludingGravity
interval
requestPermission() static method
Experimental
rotationRate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.DeviceMotionEventAcceleration

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceMotionEventAcceleration
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.DeviceMotionEventRotationRate

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DeviceMotionEventRotationRate
alpha
beta
gamma

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報