[katyos.Lab]


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

2010-12-02 09:22:32 Theme: 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で本当にできるか試しにやってみよと思います!
    AD
    いいね!した人  |  Comments(0)  |  リブログ(0)

    yopiさんの読者になろう

    ブログの更新情報が受け取れて、アクセスが簡単になります

    最近の画像つき記事
     もっと見る >>

    Comments

    [Publish Your Comment]

    Add your comment

    AD

    Ameba人気のブログ

    Amebaトピックス

        ランキング

        • 総合
        • 新登場
        • 急上昇
        • トレンド

        ブログをはじめる

        たくさんの芸能人・有名人が
        書いているAmebaブログを
        無料で簡単にはじめることができます。

        公式トップブロガーへ応募

        多くの方にご紹介したいブログを
        執筆する方を「公式トップブロガー」
        として認定しております。

        芸能人・有名人ブログを開設

        Amebaブログでは、芸能人・有名人ブログを
        ご希望される著名人の方/事務所様を
        随時募集しております。