このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

端末方向イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年9月以降、すべてのブラウザーで利用可能です。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

概念と使用方法

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

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

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

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

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

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

ユーザーエージェントによっては、センサーデータを提供する前に明示的な権限を要求される場合があります。そのような環境では、DeviceMotionEvent.requestPermission() および DeviceOrientationEvent.requestPermission() を使用して、ボタンのクリックなどの一時的なユーザー操作を通じてこの権限をリクエストすることができます。詳細については、権限のリクエストをご覧ください。

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

インターフェイス

DeviceMotionEvent

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

DeviceMotionEventAcceleration

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

DeviceMotionEventRotationRate

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

DeviceOrientationEvent

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

他のインターフェイスへの拡張

devicemotion イベント

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

deviceorientation イベント

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

deviceorientationabsolute イベント

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

仕様書

仕様書
Device Orientation and Motion

ブラウザーの互換性

api.Window.deviceorientation_event

api.Window.devicemotion_event

api.Window.deviceorientationabsolute_event

api.DeviceOrientationEvent

api.DeviceMotionEvent

api.DeviceMotionEventAcceleration

api.DeviceMotionEventRotationRate

関連情報