Webアプリで加速度センサ

プログラミング

HTML5+JavaScriptで加速度センサのデータを取得する実験。
PCのブラウザで開いても何も起こらないが、スマホのブラウザで開くと 向き・加速度・角速度のデータが表示される。スマホでも角速度センサ(ジャイロ)を持たないでは角速度は表示されない。

  • z軸は画面から垂直上向き、x軸は画面左向き、y軸は画面上向き
  • 角度のα, β, γはおのおのz, x, y軸まわりの角度 (オイラー角)
  • 向きを検出するイベントは deviceorientationであり、単位はdeg ( °)
  • 加速度・角速度を検出するイベントは devicemotion
  • accelerationは重力加速度をのぞいた加速度であり、単位はm/s^2
  • accelerationIncludingGravityは重力加速度をふくんだ加速度であり、単位はm/s^2
  • rotationRateは角速度であり、単位はdeg/s
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Sensor Test</title>
<meta name="viewport" content="width=device-width">
</head><body>

<h2>向き[deg]</h2>
<p>a: <span id="ori-a"></span></p>
<p>b: <span id="ori-b"></span></p>
<p>g: <span id="ori-g"></span></p>

<h2>加速度(重力加速度のぞく)[m/s^2]</h2>
<p>x: <span id="acc-x"></span></p>
<p>y: <span id="acc-y"></span></p>
<p>z: <span id="acc-z"></span></p>

<h2>加速度(重力加速度ふくむ)[m/s^2]</h2>
<p>x: <span id="accG-x"></span></p>
<p>y: <span id="accG-y"></span></p>
<p>z: <span id="accG-z"></span></p>

<h2>角速度[deg/s]</h2>
<p>a: <span id="rot-a"></span></p>
<p>b: <span id="rot-b"></span></p>
<p>g: <span id="rot-g"></span></p>

<script>
window.addEventListener("deviceorientation", function(e){
　document.getElementById("ori-a").innerHTML = e.alpha.toFixed(3);
　document.getElementById("ori-b").innerHTML = e.beta.toFixed(3);
　document.getElementById("ori-g").innerHTML = e.gamma.toFixed(3);
});

window.addEventListener("devicemotion", function(e){
  var acc = e.acceleration;
  var accG = e.accelerationIncludingGravity;
  var rot = e.rotationRate;
  document.getElementById("acc-x").innerHTML = acc.x.toFixed(3);
  document.getElementById("acc-y").innerHTML = acc.y.toFixed(3);
  document.getElementById("acc-z").innerHTML = acc.z.toFixed(3);
  document.getElementById("accG-x").innerHTML = accG.x.toFixed(3);
  document.getElementById("accG-y").innerHTML = accG.y.toFixed(3);
  document.getElementById("accG-z").innerHTML = accG.z.toFixed(3);
  document.getElementById("rot-a").innerHTML = rot.alpha.toFixed(3);
  document.getElementById("rot-b").innerHTML = rot.beta.toFixed(3);
  document.getElementById("rot-g").innerHTML = rot.gamma.toFixed(3);
});
</script></body></html>