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/s2
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
このエントリーをはてなブックマークに追加