スマホの８軸センサーの情報をHTML5で利用する方法

最近のスマートフォンには8軸センサー（9軸もある！？）が搭載されている。
加速度センサー3軸（XYZ)
ジャイロセンサー3軸（XYZ）
地磁気センサー2軸（XY) ※地面に対してどの向きに向けても方位が表示されれば3軸です

それをHTMLで簡単に利用しちゃおうって話しですが、本当に簡単に利用できます

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>センサー値を表示</title>
<script>


//デジタルコンパス情報取得&ジャイロセンサー情報
window.addEventListener("deviceorientation", function(evt){
    //デジタルコンパス情報取得
    var ch = evt.webkitCompassHeading;
    var chAcc = evt.webkitCompassAccuracy;
    var html ="";
        html += "方角："+ch
        html += "　誤差："+chAcc;
    document.getElementById("compass").innerHTML = html;
    
    //ジャイロセンサー情報取得
    var alpha = evt.alpha;   // z-axis
    var beta = evt.beta;     // x-axis
    var gamma = evt.gamma;   // y-axis
    var html ="";
        html += 'Z回転(alpha):' + alpha + "<br>";
        html += "X回転(beta):" + beta + "<br>";
        html += "Y回転(gumma):" + gamma;
    document.getElementById("gyroscope").innerHTML = html;
    
}, false);

//加速度センサー情報取得
window.addEventListener("devicemotion", function(evt){

   //加速度
   var x = evt.acceleration.x;
   var y = evt.acceleration.y;
   var z = evt.acceleration.z;


   //傾き
   var xg = evt.accelerationIncludingGravity.x; //左右
   var yg = evt.accelerationIncludingGravity.y; //上下
   var zg = evt.accelerationIncludingGravity.z; //前後

   //回転値
   var a = evt.rotationRate.alpha; //z方向
   var b = evt.rotationRate.beta; //x方向
   var g = evt.rotationRate.gamma; // y方向

    var html ="";
        html  += "x:"+x+"<br>";
        html += "y:"+y+"<br>";
        html += "z:"+z+"<br>";
        
        html += "傾きx:"+xg+"<br>";
        html += "傾きy:"+yg+"<br>";
        html += "傾きz:"+zg+"<br>";
        
        html += "alpha(z):"+a+"<br>";
        html += "beta(x):"+b+"<br>";
        html += "gamma(y):"+g+"<br>";

   document.getElementById("rotation").innerHTML = html;

}, true); 
</script>
</head>
<body>
<h2>コンパス値を表示</h2>
<div id="compass">0</div>
<h2>ジャイロセンサー値を表示</h2>
<div id="gyroscope">0</div>
<h2>加速度センサー値を表示</h2>
<div id="rotation">0</div>
</body>
</html>

WebAPIインタフェースのEventTarget.addEventListenerを使って
“deviceorientation”を引数にしてジャイロセンサー（＋地磁気センサー）の情報を取得
“devicemotion”で加速度センサーの情報を取得できます

後はソースを見て下さい。って事でブラウザでセンサー情報を利用してモーションを使って色んな操作が可能になります