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


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

デバイスの向きの設定データは、windowオブジェクトのondeviceorientationプロパティに対応するデバイスのJavaScriptを通じて、アプリで使用できるようになります。デバイスの向きの設定データにアクセスする方法については、W3CのDeviceOrientation Event Specification(DeviceOrientationイベントの仕様)で説明しています。

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

デバイスの向きの設定に対応しているかどうかを検出するには、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の測定値が正規化されます。

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