Tweet

JavaScript でスマホの加速度センサーやジャイロによる加速度、向き、傾きの値を取得する

JavaScript でスマホの加速度センサーやジャイロによる加速度、向き、傾きの値を取得する。DeviceOrientationEventとDeviceMotionEvent。
対象 ： Android Chrome、iOS（iPhone、iPod touch）Safari

DeviceOrientationEvent - 向き、傾き

DeviceOrientationEventでは端末（スマホなど）で検出された向き、傾きの値を取得できる。

<div id="ex_orientation"></div>

<script>
window.addEventListener('deviceorientation', function(e){
	var output = "<b>absolute</b><br />" + e.absolute + "<br /><br />"
	+ "<b>alpha（z軸）GPS有りは北が0、なしは最初の位置が0</b><br />" + e.alpha + "<br /><br />"
	+ "<b>beta（x軸）前後の傾き</b><br />" + e.beta + "<br /><br />"
	+ "<b>gamma（y軸）左右の傾き</b><br />" + e.gamma;
	
	document.getElementById('ex_orientation').innerHTML = output;
}, false);
</script>

deviceorientationイベントにてabsolute、alpha、beta、gammaの値を取得できる。
absoluteは方向（方位）の取得方法の違いでtrue、false（undefined）がある。
GPS内蔵のスマホでは北（北極）方向が0（ゼロ）になり（true）、GPSを内蔵していないiPod touchなどでは最初にイベントが発生したときの方角が0になる（false）。
画面の左右方向にx軸、画面の上下方向にy軸、画面の垂直方向にz軸がある。
つまり、画面を前後方向に傾けるとbetaの値が変化し、左右方向に傾けるとgammaの値が変化し、東西南北の向きでalphaの値が変化する。
betaは-180～180の角度、gammaは-90～90の角度、alphaは0～360の角度。
これらを使えば電子水準器、方位磁石のようなものが作れる。

DeviceMotionEvent - 加速度センサー

DeviceMotionEventでは端末で検出された加速度の値を取得できる。

<div id="ex_motion"></div>

<script>
window.addEventListener('devicemotion', function(e){
	var output = "<b>acceleration.x（x軸の加速度）</b><br />" + e.acceleration.x + "<br /><br />"
	+ "<b>acceleration.y（y軸の加速度）</b><br />" + e.acceleration.y + "<br /><br />"
	+ "<b>acceleration.z（z軸の加速度）</b><br />" + e.acceleration.z + "<br /><br />"
	+ "<b>accelerationIncludingGravity.x（x軸の加速度）左右の傾きは水平0</b><br />" + e.accelerationIncludingGravity.x + "<br /><br />"
	+ "<b>accelerationIncludingGravity.y（y軸の加速度）前後の傾きは水平0</b><br />" + e.accelerationIncludingGravity.y + "<br /><br />"
	+ "<b>accelerationIncludingGravity.z（z軸の加速度）前後の傾きは垂直0</b><br />" + e.accelerationIncludingGravity.z + "<br /><br />"
	+ "<b>rotationRate.alpha（z軸回転）</b><br />" + e.rotationRate.alpha + "<br /><br />"
	+ "<b>rotationRate.beta（x軸回転）</b><br />" + e.rotationRate.beta + "<br /><br />"
	+ "<b>rotationRate.gamma（y軸回転）</b><br />" + e.rotationRate.gamma + "<br /><br />"
	+ "<b>interval（デバイスからデータを取得する間隔・ミリ秒or秒）</b><br />" + e.interval;
	
	document.getElementById('ex_motion').innerHTML = output;
}, false);
</script>

加速度センサーやジャイロスコープが搭載されていないスマホでは accelerationIncludingGravity のみ表示さ、他はnullとなる。
x、y、z軸の向きはDeviceOrientationEventと同じ。
加速度の単位はm/s²。
rotationRateはデバイスがその軸の周りを回転する速度（毎秒度）。
ウェブアプリでもネイティブアプリのように加速度センサーを使ったアプリが作れる。
上記コードは、AndroidのChrome、iOSのSafariで動作を確認した。

詳しい話は Mozilla Developer Network に書かれている。
https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation
https://developer.mozilla.org/ja/docs/DOM/Orientation_and_motion_data_explained