加速度センサーの値を取得する
加速度センサーの値を取得してみましょう。iPhone/iPadの傾きが変化するとdevicemotionというイベントが発生します。イベントが発生した時点で傾きを取得するイベントハンドラを呼び出すと、イベントハンドラ（関数）にはイベントオブジェクトが渡されます。加速度を示すプロパティは、イベントオブジェクト内のaccelerationオブジェクトに用意されています。
accelerationオブジェクトには上下・左右の方向の傾きを示すx,y,zプロパティがあり、xが左〜右、yが手前〜奥、zが上〜下の加速度を示します。x, yプロパティの値は小数値で、単位はm/s2です。
iPhone/iPadでは傾きの値も取得できます。傾きの値は、イベントオブジェクトのaccelerationIncludingGravityオブジェクトにあるx,y,zプロパティに格納されています。値はxが左〜右、yが手前〜奥、zが上〜下です。accelerationIncludingGravityで得られる値は角度ではなく、重力加速度（9.80665）を基準にした値になります。z方向（上下方向）でiPhone/iPadを机に置いた状態では、zの値は-9.8近辺になります（表示画面を下に向ける、逆さにすると+9.8近辺の値になります）。
さらに、どの方向にどのくらいの速度で傾けたのか（回転させたか）も取得できます。イベントオブジェクトのrotationRateにあるalpha, beta, gammaという名前のプロパティです。それぞれが示す方向についてはW3Cのサイトに解説と図が用意されているので参照してください。
- DeviceOrientation Event Specification
- http://dev.w3.org/geo/api/spec-source-orientation.html
サンプル01は、iPhone/iPadを傾けたり上昇させたりしたときの加速度と傾きを表示します。
iPhone/iPadを傾けたり動かしたりすると値が変化する
●サンプル1[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>加速度／傾きセンサーの値を表示</title> <script type="text/javascript" src="js/sample.js"></script> </head> <body> <h1>加速度／傾きセンサーの値を表示</h1> <div id="sensor"></div> </body> </html>
●サンプル1[sample.js]
window.addEventListener("devicemotion", function(evt){ var x = evt.acceleration.x; // X方向の加速度 var y = evt.acceleration.y; // Y方向の加速度 var z = evt.acceleration.z; // Z方向の加速度 var xg = evt.accelerationIncludingGravity.x; // X方向の傾き var yg = evt.accelerationIncludingGravity.y; // Y方向の傾き var zg = evt.accelerationIncludingGravity.z; // Z方向の傾き var a = evt.rotationRate.alpha; // Z方向の回転値 var b = evt.rotationRate.beta; // X方向の回転値 var g = evt.rotationRate.gamma; // Y方向の回転値 var txt = "x:"+x+"<br>y:"+y+"<br>z:"+z+"<br>"; txt += "傾きx:"+xg+"<br>傾きy:"+yg+"<br>傾きz:"+zg+"<br>"; txt += "alpha(Z):"+a+"<br>beta(X):"+b+"<br>gamma(Y):"+g; document.getElementById("sensor").innerHTML = txt; }, true);
