最近のスマートフォンには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”で加速度センサーの情報を取得できます
後はソースを見て下さい。って事でブラウザでセンサー情報を利用してモーションを使って色んな操作が可能になります
この記事へのコメントはありません。