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