デバイスの向きを調整する方法
デバイスの向きを調整する方法
デバイスの向きに関するデータは、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の測定値が正規化されます。
この例で実行されている正規化は単純な変換であり、完全な極性正規化ではありません。データが正規化されると、表示されている数値が更新され、気泡水準器の気泡の位置も更新されます。