とある角度から

お腹いっぱいたべられる幸せ

javascriptでデバイスの向きと加速度を取得

javascript

javascriptでデバイスの向きとか加速度を取得してみた。

DeviceOrientation Event Specification
上記ドラフトによると

  • デバイスの向きは、deviceorientationイベントで取得
  • 西向き、画面は上で水平な平面にデバイスを置いた場合の値は、{alpha: 90, beta: 0, gamma: 0}
  • デバイスの加速度は、devicemotionイベントで取得
  • 画面は上で水平な平面にデバイスを置いた場合、加速度はすべてゼロ、重力加速度は{x: 0, y: 0, z: 9.81}
  • 画面はずっと上で向きも変わらずに自由落下した場合、加速度は{x: 0, y: 0, z: -9.81}、重力加速度はすべてゼロ

※compass部分は飛ばしました

以下、ソース。
デフォルトだと加速度の桁数がパナいので、小数点以下3桁のみ表示

[javascript]

window.onload = function(){
    // デバイスの向きを取得
    window.addEventListener("deviceorientation", function(e) {
        e.preventDefault();
        document.getElementById("oinfo").innerHTML = "alpha: " + parseInt(e.alpha) + " beta: " + parseInt(e.beta) + " gamma: " + parseInt(e.gamma);
    }, true);

    // デバイスの加速度、重力加速度、回転速度を取得
    window.addEventListener("devicemotion", function(e) {
        var a = e.acceleration;
        var g = e.accelerationIncludingGravity;
        var r = e.rotationRate;
        document.getElementById("ainfo").innerHTML = "X: " + a.x.toFixed(3) + " Y: " + a.y.toFixed(3) + " Z: " + a.z.toFixed(3);
        document.getElementById("ginfo").innerHTML = "X: " + g.x.toFixed(3) + " Y: " + g.y.toFixed(3) + " Z: " + g.z.toFixed(3);
        document.getElementById("rinfo").innerHTML = "alpha: " + r.alpha.toFixed(3) + " beta: " + r.beta.toFixed(3) + " gamma: " + r.gamma.toFixed(3);
    }, true);
};

[html]

<!-- 表示用に準備 -->
<p>デバイスの向き</p>
<p id='oinfo'></p>
<p>加速度</p>
<p id='ainfo'></p>
<p>重力加速度</p>
<p id='ginfo'></p>
<p>回転速度</p>
<p id='rinfo'></p>

こんな感じ↓
f:id:n_1010real:20140421220027j:plain

結果、デバイスの向きは意図通り、傾けた方向によって値が変化。
加速度センサー周りについては、机の上に置きっぱにしても常に変動していてせわしない感じ。
まあ、地球はうごいてるからね。。。という冗談はさておき、実用するなら、閾値で切るなりしないとだめそうという感じですかね。