JS:JavaScriptでスマートフォンの傾きを検出する

JS:JavaScriptでスマートフォンの傾きを検出するJavaScript
スポンサーリンク

JavaScriptを使うとスマートフォンやタブレットの傾きを検出できます。
利用するイベントは、deviceorientationイベントです。
うまく利用するとゲームなどにも色々と応用が効くと思います。

この記事では、deviceorientationイベントを使って加速度センサーの値をブラウザ上に表示させてみます。

一般にスマートフォンやタブレットには端末の傾きを検出するための加速度センサーが搭載されています。
加速度センサーはxyzの3方向の立体的な座標軸を持ちます。
JavaScriptからdeviceorientationイベントを監視することで、この値を取得できます。

実行イメージ
JS:JavaScriptでスマートフォンの傾きを検出する

deviceorientationサンプルを見る
※注)スマートフォンまたはタブレットでないと取得できません

スポンサーリンク

加速度センサーイベントを利用する際の記述方法

実際にJavaScriptプログラムで利用する場合の例です。

// 加速度センサーイベント処理
window.addEventListener("deviceorientation", function(e){
	// alpha, beta, gammaの値を取得
	let alpha = e.alpha;
	let beta = e.beta;
	let gamma = e.gamma;

	// イベント発生時の処理を記述
		:
		:
}, false);

上記例の場合、イベント変数eを通してe.alpha, e.beta, e.gammaとして各プロパティ値を取得できます。
取得される値は4.56278290などの実数値です。

加速度センサーイベントの仕様

deviceorientationイベントで取得できる値は以下の通りです。

alphaz軸を中心にしたデバイスの動きを表す値:0~360の範囲による度数
betax軸を中心にしたデバイスの動きを表す値:-180~180の範囲の値による度数
gammay軸を中心にしたデバイスの動きを表す値:-90~90の範囲の値による度数
absolute加速度センサーの値取得方法true: 相対値
false: 絶対値

ただし、上記のabsoluteプロパティに関しては、端末によっては「undefined」(未定義)の値が返ってきます。
実際に利用できるプロパティは、alpha, beta, gammgaの3つと考えた方が良いでしょう。

参考
デバイスの方向の検出 – MDN

プログラム全体

冒頭で紹介したブラウザ上で加速度センサー値を表示するプログラムのコードを示します。

もう少し具体例をご覧になりたい方は以下もチェックしてみて下さい。

JS:端末の傾きに応じてボールを動かす
この記事ではJavaScriptから加速度センサーを利用する例として、スマートフォンやタブレットなどの端末の傾きに応じて画面上のボールを動かす処理のコード例を示します。

コメント