HTML5(加速度センサー) | とあるプログラマーのブログ

とあるプログラマーのブログ

Unityやblender、Live2Dについて書いていきます!


テーマ:
HTML5でもスマホの加速度センサーが使えますっ
HTML5で作れば1つのプログラムでiphoneもandroidも対応できる~
と思い、動作検証してみました

ソースはこんなかんじです。

[ HTML5加速度センサー ]
<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,user-scalable=no">
    <title>jQueryの練習</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script>
        $(function(){
            window.addEventListener("devicemotion",function(evt){
                var x = evt.accelerationIncludingGravity.x; //横方向の傾斜
                var y = evt.accelerationIncludingGravity.y; //縦方法の傾斜
                var z = evt.accelerationIncludingGravity.z; //上下方向の傾斜
                $("#result").html("x:"+x+"<br>y:"+y+"<br>z:"+z);
            },false);
        });
    </script>
</head>
<body>
    <div data-role="page" id="maincontents">
        <div data-role="header">
            <h1>ジャイロセンサー</h1>
        </div>
        <div data-role="content">
            <p>本体を傾けて下さい</p>
            <output id="result">…</output>
        </div>
    </div>
</body>
</html>

しかし、いくつか問題点を見つけました

問題点
 ・androidの標準ブラウザでは動作しない
  → 4.0になると問題ないですが、僕の2.3では無反応でした
    ※ firefoxならちゃんと動作します
 [androidの標準ブラウザの場合]

androidの標準ブラウザ

 ・iphoneとandroidで取得する数値が異なる
 [iphoneを寝かせた状態]

iphone

 [androidを寝かせた状態(※ firefoxブラウザ)]

androidのfirefox

 ・androidのブラウザはバグが多すぎ
  → jQueryはスマホの性能が耐えられず、動きがカクカク。CSS3も一部正常に表示されないなどあるみたいです。
  詳しくはここ → スマートフォンバグまとめ

 う~ん、androidは結構ブラウザのバグが多いみたいです
 いっそのことネイティブで作った方がいいのかも

なおたろーさんをフォロー

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

Ameba人気のブログ

Amebaトピックス