加速度センサーをiPhoneのSafariで取得（JavaScript）

本格的に冬ですね。寒いです。



おはようございます。



たすくです。









iOS4.2から、iPhoneのSafariでも加速度センサーが

JavaScriptで取得できるようになったようです。

こんなサンプルを作ってみました。

灰色の部分は<div>タグで、アメーバの部分は<img>タグです。







最初、画像はCSSで<div>タグの端に置いておいて、

JavaScriptで取得した加速度の数値を、

CSS3 -webkit-transformのtranslate3dで足してあげてるだけです。





で、肝心のJSの取得ですが、

devicemotionイベントのaccelerationIncludingGravityプロパティ（？）の中に入ってるみたいです。

window.addEventListener("devicemotion",onDevicemotion);

こんな風にしてあげといて、

function onDevicemotion(ev){

　　　var aX = ev.accelerationIncludingGravity.x;

　　　var aY = ev.accelerationIncludingGravity.y;

　　　var aZ = ev.accelerationIncludingGravity.z;

}

こんな風にしてあげればOK。



（余談ですが、jQueryのbindでは取れませんでした。

何か間違えてたのか、やっぱり対応するイベント、対応しないイベントがあるのか・・・）





上のサンプルは、devicemotionイベント発生タイミングで、単純に足してるだけなので、

重力がイマイチ考慮されてなくて少し気持ち悪くなりました。



setTimeoutで常に重力分を足して、その上で落下速度に重力センサーの値を使う方が、

どっちかというと自然なのかな、とか思ったり。



window.orientationと組み合わせて、

画面がどっちの方向に向いてても大丈夫なようにするともっと面白そうですね。







とりあえず、メモメモ。





【参考にしたページ】

http://webtech-walker.com/archive/2010/11/24184510.html