開発者コンソール

デバイスの向きを調整する方法


デバイスの向きを調整する方法

デバイスの向きに関するデータは、windowオブジェクトのondeviceorientationプロパティに対応するデバイスで、JavaScriptを使用してアプリからアクセスできます。デバイスの向きに関するデータにアクセスする方法については、W3CのDeviceOrientation Event Specification(英語のみ)を参照してください。

デバイスの向きに対応しているかどうかの検出

デバイスの向きに対応しているかどうかを検出するには、ondeviceorientationプロパティがwindowオブジェクトに存在するかどうかをチェックします。存在する場合、デバイスの向きに対応しています。デバイスの向きに対応していることを確認した後は、以下のように、デバイスの向きに関するイベントのリスナーをwindowに追加し、ハンドラーを割り当てます。

if ("ondeviceorientation" in window) {
  // デバイスの向きに対応している
  // デバイスの向きに関するイベントのイベントリスナーを追加してハンドラーを割り当てる
  window.addEventListener("deviceorientation", deviceOrientationEventHandler);
} else {
  // デバイスの向きに対応していない
}

デバイスの向きに関するイベントの処理

ハンドラー関数はデバイスの向きに関するイベントデータを受け取ります。これは、次のプロパティで構成されます。

  • alpha(double)はZ軸を中心とした回転角度を表し、範囲は [0, 360)です。
  • beta(double)はX軸を中心とした回転角度を表し、範囲は [–180, 180)です。
  • gamma(double)はY軸を中心とした回転角度を表し、範囲は [–90, 90)です。
  • absolute(boolean)がtrueの場合、上記3つの角度の値は地球の座標系を基準とする相対値になります。

次にハンドラー関数の例を示します。

function deviceOrientationEventHandler(deviceOrientationData) {
  var alpha = deviceOrientationData.alpha;
  var beta = deviceOrientationData.beta;
  var gamma = deviceOrientationData.gamma;
  var absolute = deviceOrientationData.absolute;

  console.log("Alpha: " + alpha + " Beta: " + beta + " Gamma: " + gamma + " Absolute: " + absolute);
}

DeviceOrientationのサンプルでは、デバイスの向きに関する数値情報が、気泡水準器(同じデータを視覚的に表現したもの)の上に表示されます。このデータを表示するために、orientationという変数が作成され、デバイスの画面の向き(縦向きまたは横向き)をトラッキングします。画面の向きがわかると、数値計算が適用されてbetaとgammaの測定値が正規化されます。

この例で実行されている正規化は単純な変換であり、完全な極性正規化ではありません。データが正規化されると、表示されている数値が更新され、気泡水準器の気泡の位置も更新されます。