加速度センサーやジャイロセンサーが搭載されているスマートフォンが普及してきました。
ところで、ブラウザからこれらのセンサーの数値を取得できるって知ってましたか？
jsdo.itにもこれらのセンサーを利用したコードの投稿が徐々に増えています。

加速度・ジャイロの数値をスマートフォンで表示してみよう！

表示できたらスマートフォンを傾けて数値が変化することを確認します。
一度机の上などにおいて静止した状態から変化を見るとわかりやすいと思います。

数値を取得するコード

var x = $('#x');
var y = $('#y');
var z = $('#z');
var xg = $('#xg');
var yg = $('#yg');
var zg = $('#zg');
var a = $('#a');
var b = $('#b');
var g = $('#g');

window.addEventListener('devicemotion', function(evt) {
  // iPhone4はすべて取得できます。
  // iPhone3GSの場合はacceleration、rotationRateはコメントアウトしてください。
  var ac = evt.acceleration;
  x.text(ac.x); //x方向の傾き加速度
  y.text(ac.y); //y方向の傾き加速度
  z.text(ac.z); //z方向の傾き加速度
  
  var acg = evt.accelerationIncludingGravity;
  xg.text(acg.x); //x方向の傾き重力加速度
  yg.text(acg.y); //y方向の傾き重力加速度
  zg.text(acg.z); //z方向の傾き重力加速度
  
  var rr = evt.rotationRate;
  a.text(rr.alpha); //z軸の回転加速度
  b.text(rr.beta); //x軸の回転加速度
  g.text(rr.gamma); //y軸の回転加速度
});

加速度・ジャイロの数値を使ったコードの例

forked: iOS4.2～の加速度、ジャイロを使ったcanvasの描画

forked: iOS4.2～の加速度、ジャイロを使ったcanvasの描画

QRコード

jsdo.itならすぐに作成・テストができます！

ぜひ加速度やジャイロを使ったコードの作成に挑戦してみてくださいね！
まずは xl1さんのコードをアレンジ（フォーク）してみると、学習しやすいかと思います。