- カテゴリープログラミングHTML5/jQuery
jQueryを使ってiOS/Androidの加速度センサを取得する実験をしました。
今回の作業について
三軸加速度センサを使った回路を作成しようと思っているのですが、私自身、三軸加速度センサがどういうものであるかイマイチ理解していません。
こんな状態で回路を実装しても混乱するだけだと思うので、まずは身近なiOS/Androidで加速度センサの実験をしてみることにしました。
iOS/Androidで三軸加速度センサの実験
以下にjQueryを使って、iOS/Androidの三軸加速度センサの値を表示する方法を説明します。 尚、jQueryを使っている意味はほとんど無いです。jQueryは$(function(){});の呼び出しくらいで、それ以外はほとんど唯のJavaScriptです。
jQueryを使う準備
jQueryを使うためには、HTMLのHEAD部分に以下の記述をし、jQueryを読み込むようにしておきます。 jQueryのバージョンは以下に記述しているものでなくてもよいです。お好きなものをどうぞ。
加速度センサのリスナの追加
続いて、加速度センサの値が変化したときにコールバックしてもらうようにリスナを登録します。 ここではsample関数を呼んでもらうようにしています。但しsample関数はまだ実装していません。次で実装します。
尚、 $(function(){}); の意味は、このコードが読み込まれた後に {}内の処理がすぐに実行されるというだけです。(実はjQueryっぽいところはここしかありません。。)
加速度センサの値を取得する
sample関数を実装します。sample関数は加速度センサの値を取得し、id=sensor_valueに対してx,y,zの値を書き出すようにしています
加速度センサの値を表示する
最後に以下のタグをどこかに追記します。ここに加速度センサの値が表示されます。
実際にやってみた
実際にやってみたのが以下です。iOS, Androidでこのページを表示すると、X, Y, Zの値がパラパラ表示されるはずです。
次回、これを使ってもう少し色々実験してみたいと思います。
kaeru.