HTML 5ガタDeviceMotionEventイベント

サービスについて
html 5は、ジャイロ、コンパス、および加速計を含むデバイスの物理的方向および動きの情報を得るためのいくつかの新しいDOMイベントを提供する.
最初のDOMイベントは**deviceorientation**であり、デバイスの物理方向情報を提供し、一連のローカル座標系の回転角として表される.2番目のDOMイベントは、デバイス上の座標系に定義されたカルディ座標として表されるデバイスの加速情報を提供する**devicemotion**である.座標系におけるデバイスの自転速度も提供する.3番目のDOMイベントは*compassneedscalibration**であり、Webサイトに羅盤情報を使用して上記のイベントをキャリブレーションすることを通知するために使用されます.
げんり
開発者は,各内蔵センサから修正されていないセンシングデータを取得し,装置の様々な運動と角度の変化を観測または応答した.これらのセンサには、ジャイロ、加速器、磁力計(羅盤)が含まれる.アクセラレータとジャイロのデータはiOSデバイスの3つの方向軸に沿った位置を記述しており、縦画面に配置されたiPhoneでは、X方向はデバイスの左側(負)から右(正)に、Y方向はデバイスの下部(-)から上部(+)に、Z方向は画面に垂直で、デバイスの背面(-)から正面(+)になっている.
DeviceMotionEventは、デバイスに意味のあるウォブル(またはモーション)が発生するときに発生する.イベントオブジェクトは、発生するピッチ値、回転率、およびデバイス加速度をカプセル化する.加速度の算出方式は、重力とユーザが生成する2つの加速度ベクトルの和である.装置はジャイロと加速計によって両者を区別する.デバイスの動作状態をDeviceMotionで判断することで、Webページで「揺れる」インタラクティブな効果を実現することができます.
イベントリスニング

if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}

重力加速度のスナップ(Snap Gravity Accel)

var acceleration = eventData.accelerationIncludingGravity;

揺れるdemo

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;       
function deviceMotionHandler(eventData) {        
  var acceleration =eventData.accelerationIncludingGravity;
  var curTime = new Date().getTime();       
  if ((curTime - last_update)> 300) {                
      var diffTime = curTime -last_update;
      last_update = curTime;       
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;       
      var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;          
           if (speed > SHAKE_THRESHOLD) {
                alert("shaked!");
      }
      last_x = x;
      last_y = y;
      last_z = z;
    }
} 

もう一つの栗~

function deviceMotionHandler(eventData) {
  //        
  var acceleration = eventData.accelerationIncludingGravity;     
  //       
  var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " +Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
// Z ,          
  var facingUp = -1;
  if (acceleration.z > 0) {
    facingUp = +1;
  }     
  //        acceleration.x|y        ,
  //        9.81                  90
  var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
  var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);     
  //           
  document.getElementById("moAccel").innerHTML = rawAcceleration;
  document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
  document.getElementById("moCalcTiltFB").innerHTML = tiltFB;     
  //  2D 3D         
  var rotation = "rotate(" + tiltLR + "deg) (1,0,0, " + (tiltFB) + "deg)";
  document.getElementById("imgLogo").style.webkitTransform = rotation;
}