スマートフォン端末の加速度センサの値を取得する

概要

スマートフォン端末の加速度センサの値を取得する

サンプルコード

javascript

window.addEventListener("devicemotion", function(event) {
  var x  = parseFloat(event.acceleration.x);
  var y  = parseFloat(event.acceleration.y);
  var z  = parseFloat(event.acceleration.z);

  /*
     iosとAndroidとで、向きが逆。
     基準はどちらでも良いが、端末を上から見て、
       x:右方向
       y:上方向
       z:手前方向
      を正とするなら、iOS側を補正する。
  */
  if (userAgent.indexOf("iPhone") > 0 || userAgent.indexOf("iPad") > 0 || userAgent.indexOf("iPod") > 0) {
    x *= -1;
    y *= -1;
    z *= -1;
  }
}

利用できるブラウザ(2016/06/13時点)

• iOS Safari
  • 4.3以降
• Android Browser
  • 3以降
• Chrome for Android
  • 50以降
• 参照
  • http://caniuse.com/#search=devicemotion

その他

• acceleration.x | acceleration.y | acceleration.z以外に、以下の値も取得できる
  • accelerationIncludingGravity.x | accelerationIncludingGravity.y | accelerationIncludingGravity.z
    • スマートフォン端末の加速度(acceleration)に、重力加速度が加わった値
  • rotationRate.alpha | rotationRate.beta | rotationRate.gamma
    • 端末の、各軸を中心とした回転加速度の値

参考

• DeviceOrientation Event Specification > 4.1 deviceorientation Event
  • https://www.w3.org/TR/orientation-event/#devicemotion
• DeviceMotionEvent
  • https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent
• 方向および動きとして示されるデータ
  • https://developer.mozilla.org/ja/docs/DOM/Orientation_and_motion_data_explained