iso4.2のMobile Safariの加速度センサーを使ってみる

memo

iso4.2のmobile safariが加速度センサーに対応(Mobile Web Programming)ということで、ちょっとためしてみた。

イベントリスナーへ
window.addEventListener("devicemotion", function(){}, true);
追加するだけで使えます。実に簡単。

<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>accelerationIncludingGravity</title> </head> <body> <ul> <li>x:>span id="x">->/span>>/li> <li>y:>span id="y">->/span>>/li> <li>z:>span id="z">->/span>>/li> </ul> <script language="javascript"> var x = document.getElementById('x'); var y = document.getElementById('y'); var z = document.getElementById('z'); window.addEventListener('devicemotion', function(evt) { var acc = evt.accelerationIncludingGravity; x.innerHTML = acc.x; y.innerHTML = acc.y; z.innerHTML = acc.z; draw(acc.x*2, acc.y*2); },true); </script> </body> </html>
とこのような感じでx軸(横方向)、y軸(上方向)、z軸(手前方向)の傾きを取得できます。
ちなみに、何もしなくとも地球の重量を感知してるんですね。

ちなみに、Y座標はiPhoneデバイスの向きに準じているので、ブラウザで座標系を操作する時は、
注意ですね。
参考：http://japan.internet.com/developer/20100803/26.html
http://dev.w3.org/geo/api/spec-source-orientation.html

簡単なサンプルも作ってみたけど、これゲームとかできそうですね。

Comments