デバイスの方向の検出

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

Web を利用可能なデバイスは、自身の方向を特定できるようになってきました。つまりデバイスは、重力との関係による自身の向きの変化を示すデータを報告できます。特に携帯電話のようなハンドヘルドデバイスは、表示内容が直立し続けるよう自動的に回転させるためにこの情報を使用でき、画面の幅が高さより大きくなるようにデバイスを回転させたときは、Web コンテンツをワイドスクリーン表示にします。

方向の情報を制御する JavaScript イベントが 2 つあります。ひとつは DeviceOrientationEvent であり、加速度センサーがデバイスの方向の変化を検出したときに発生します。Orientation イベントが報告するデータを受け取って処理することで、ユーザがデバイスを動かすことによる方向や高さの変化に対してインタラクティブに応答できるようになります。

もうひとつのイベントは DeviceMotionEvent であり、加速度が変化したときに発生します。こちらは方向ではなく加速度の変化を監視することが、DeviceOrientationEvent との違いです。一般的に DeviceMotionEvent を検出できるセンサーには、可動部があるストレージ装置を保護するためラップトップパソコンに内蔵するものも含みます。DeviceOrientationEvent は、モバイルデバイスでとても一般的です。

orientation イベントを処理する

方向の変化を受け取り始めるには、deviceorientation イベントをリッスンします:

注記: gyronorm.js は、モバイルデバイスの加速度センサーやジャイロスコープのデータを正規化するためのポリフィルです。これは、デバイスの方向のサポート状況の違いを克服するのに役立ちます。

window.addEventListener("deviceorientation", handleOrientation, true);

イベントリスナ (この例では handleOrientation() という名前の JavaScript 関数) を登録すると、リスナ関数は最新の方向データとともに、周期的に呼び出されます。

Orientation イベントは 4 つの値を持ちます:

イベントハンドラ関数は以下のようなものです:

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;

  // 新たな方向データに基づいて処理を行う
}

方向として示される値

それぞれの軸で報告される値は、標準座標系の軸を中心にした回転量を表します。これらは方向および動きとして示されるデータの記事で詳しく説明しており、ここでは概要を記載します。

  • DeviceOrientationEvent.alpha の値は z 軸を中心にしたデバイスの動きを表し、0 から 360 の範囲による度数で表されます。
  • DeviceOrientationEvent.beta の値は x 軸を中心にしたデバイスの動きを表し、-180 から 180 の範囲の値による度数で表されます。これはデバイスの前後の動きです。
  • DeviceOrientationEvent.gamma の値は y 軸を中心にしたデバイスの動きを表し、-90 から 90 の範囲の値による度数で表されます。これはデバイスの左右の動きです。

このサンプルは方向を検出可能なデバイス上で、deviceorientation イベントをサポートするブラウザを実行する場合に動作します。

庭にボールがあると考えます:

<div class="garden">
  <div class="ball"></div>
</div>

<pre class="output"></pre>

庭の幅は 200 ピクセルであり (小さな庭です)、ボールは中心にあります:

.garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

デバイスを動かすと、その動きに応じてボールが移動します:

var ball   = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');

var maxX = garden.clientWidth  - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // -180 から 180 の範囲で角度を示す
  var y = event.gamma; // -90 から 90 の範囲で角度を示す

  output.innerHTML  = "beta : " + x + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  // デバイスをひっくり返したくはないため、
  // x の値を -90 から 90 の範囲に制限する
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  // 計算を容易にするため、x および y の値の範囲を 
  // 0 から 180 に変換する
  x += 90;
  y += 90;

  // 10 は、ボールのサイズの半分である。
  // これにより、配置場所をボールの中心に合わせる
  ball.style.top  = (maxX*x/180 - 10) + "px";
  ball.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);

結果を以下に示します:

警告: Chrome と Firefox では角度の扱い方が異なり、一部の軸の向きが逆になっています。

motion イベントを処理する

motion イベントは orientation イベントと同じ方法で扱えますが、イベント名は devicemotion になります。

window.addEventListener("devicemotion", handleMotion, true);

実際どのように変化したかの情報は、HandleMotion 関数のパラメータとして渡す DeviceMotionEvent オブジェクトが提供します。

motion イベントは 4 つのプロパティを持ちます:

動きとして示される値

DeviceMotionEvent オブジェクトは Web 開発者に、デバイスの位置や方向が変化した速度の情報を提供します。変化量は 3 つの軸 (詳しくは方向および動きとして示されるデータをご覧ください) に沿って表します。

acceleration および accelerationIncludingGravity で対応する軸は以下のとおりです:

  • x: 西から東へ向かう軸を表します。
  • y: 南から北へ向かう軸を表します。
  • z: 地面から直立する軸を表します。

rotationRate では状況が若干異なります。こちらの情報はそれぞれ以下のように対応します:

  • alpha: スクリーン (デスクトップ環境ではキーボード) から直立する軸を表します。
  • beta: スクリーンの面 (デスクトップ環境ではキーボード) の左から右へ向かう軸に沿った回転量を表します。
  • gamma: スクリーンの面 (デスクトップ環境ではキーボード) の下から上へ向かう軸に沿った回転量を表します。

最後に interval は、デバイスからデータを取得する間隔をミリ秒単位で表します。

仕様

仕様書 策定状況 コメント
DeviceOrientation Event Specification 編集者草案 最初の仕様

ブラウザ実装状況

DeviceMotionEvent

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DeviceMotionEvent
実験的
Chrome 完全対応 11Edge 完全対応 ≤18Firefox 完全対応 6IE 未対応 なしOpera 完全対応 15Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 14Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0
DeviceMotionEvent() constructor
実験的非標準
Chrome 完全対応 59Edge 完全対応 ≤79Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 7.0
acceleration
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android ? Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
accelerationIncludingGravity
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
interval
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
rotationRate
実験的
Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

DeviceOrientationEvent

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DeviceOrientationEvent
実験的
Chrome 完全対応 7
補足
完全対応 7
補足
補足 Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the ondeviceorientationabsolute event.
Edge 完全対応 ≤18Firefox 完全対応 6
補足
完全対応 6
補足
補足 Firefox 3.6, 4, and 5 supported mozOrientation instead of the standard DeviceOrientationEvent interface.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 5WebView Android 完全対応 ≤37
補足
完全対応 ≤37
補足
補足 Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the ondeviceorientationabsolute event.
Chrome Android 完全対応 18
補足
完全対応 18
補足
補足 Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the ondeviceorientationabsolute event.
Firefox Android 完全対応 6
補足
完全対応 6
補足
補足 Firefox 3.6, 4, and 5 supported mozOrientation instead of the standard DeviceOrientationEvent interface.
Opera Android 完全対応 14Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0
補足
完全対応 1.0
補足
補足 Before Samsung Internet 5.0, Samsung Internet provided absolute values instead of relative values for this event. Developers still needing absolute values may use the ondeviceorientationabsolute event.
DeviceOrientationEvent() constructor
実験的非標準
Chrome 完全対応 59Edge 完全対応 ≤79Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 7.0
absolute
実験的
Chrome 完全対応 7Edge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
alpha
実験的
Chrome 完全対応 7Edge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
beta
実験的
Chrome 完全対応 7Edge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり
gamma
実験的
Chrome 完全対応 7Edge 完全対応 12Firefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報