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

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

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

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

実行イメージ

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イベントで取得できる値は以下の通りです。

alpha	z軸を中心にしたデバイスの動きを表す	値：0～360の範囲による度数
beta	x軸を中心にしたデバイスの動きを表す	値：-180～180の範囲の値による度数
gamma	y軸を中心にしたデバイスの動きを表す	値：-90～90の範囲の値による度数
absolute	加速度センサーの値取得方法	true: 相対値 false: 絶対値