WebブラウザでiPhone/iPadの加速度センサーの値を取得する方法

【2分で読めるよ！】

iPhone/iPad用OSの新バージョン「iOS 4.2.1」になって新しい機能が
追加されたようです。


iOS 4.2の新機能で作るHTML5+JSアプリ
によると、ブラウザー関係で追加または強化された機能は以下のようです。
  • 加速度センサー／傾きセンサーのサポート
  • Web Sockets (ソケット通信)のサポート
  • HTML5 Formsのサポート
  • XMLHttp Request Levle 2 (一部) のサポート
  • 印刷のサポート
  • Int32やFloat32Arrayなどの配列のサポート
  • イベントの追加
  • Canvas/SVGの機能追加
  • その他

    これで、Webアプリ開発も楽しくなりますね。
    Web Socketsとか印刷とか色々興味があるけど
    その中でも特に興味があって気になったのが、加速度センサー！
    値の取得方法が紹介されていたのでメモひらめき電球

    加速度センサーの値を取得する
    <html> 
      <head> 
      <meta charset="UTF-8" /> 
        <title>加速度／傾きセンサーの値を表示</title>
        <script type="text/javascript" src="js/sample.js"></script>
      </head>
      <body>
        <h1>加速度／傾きセンサーの値を表示</h1>
        <div id="sensor"></div>
      </body>
    </html>

    window.addEventListener("devicemotion", function(evt){
    var x = evt.acceleration.x; // X方向の加速度
    var y = evt.acceleration.y; // Y方向の加速度
    var z = evt.acceleration.z; // Z方向の加速度
    var xg = evt.accelerationIncludingGravity.x; // X方向の傾き
    var yg = evt.accelerationIncludingGravity.y; // Y方向の傾き
    var zg = evt.accelerationIncludingGravity.z; // Z方向の傾き
    var a = evt.rotationRate.alpha; // Z方向の回転値
    var b = evt.rotationRate.beta; // X方向の回転値
    var g = evt.rotationRate.gamma; // Y方向の回転値
    var txt = "x:"+x+"
    y:"+y+"
    z:"+z+"
    ";
    txt += "傾きx:"+xg+"
    傾きy:"+yg+"
    傾きz:"+zg+"
    ";
    txt += "alpha(Z):"+a+"
    beta(X):"+b+"
    gamma(Y):"+g;
    document.getElementById("sensor").innerHTML = txt;
    }, true);


    傾けた際にしめす方向のプロパティはこちらに図で紹介されます。
    DeviceOrientation Event Specification

    今度iPhoneで本当にできるか試しにやってみよと思います！