たいよう

2012.08.10

iPhone の加速度センサーで遊んでみた

色々やってる雑用係の岩本です。こんにちは。

今年の開発合宿のテーマは モバイル だったのですが、iPhone の加速度センサーを使って何か面白い事ができないかな~と思い、iPhone の加速度センサー + HTML5 + JavaScript で遊んでみたので、それについて書いてみたいと思います。
※ デモは、iPhone4、iPhone4S で動作します。手元の Android 端末では動きませんでした。。

何はともあれ、JavaScript で加速度センサーの値を取得するには devicemotionイベントハンドラを利用します。
こんな感じ。

ちなみに、devicemotionイベントからは、加速度(acceleration)だけでなく、傾き具合(accelerationIncludingGravity)、回転加速度(rotationRate)も取得できます。

まずは最初に、取得した加速度の値を表示してみます。

加速度センサーテスト①加速度センサーテスト① QRコード
※ 電池の消耗にご注意ください。

取得した値は、iPhone の画面に向かって、左右がX軸、上下がY軸、奥と手前がZ軸となっており、
 X軸は、iPhoneを左方向に動かすとプラス値、右方向に動かすとマイナス値
 Y軸は、iPhoneを下方向に動かすとプラス値、上方向に動かすとマイナス値
 Z軸は、iPhoneを奥方向に動かすとプラス値、手前方向に動かすとマイナス値
となっています。

わかりづらいので、もう少し視覚的にわかりやすく表示してみます。

加速度センサーテスト②加速度センサーテスト② QRコード
※ 電池の消耗にご注意ください。

こうすると、iPhone の動きに合わせて線が変化するのがわかります。

さて、今回、僕が加速度センサーを使いたかった目的は、加速度センサーで iPhone がどっちの方向に動いているかを取得したかったのですが、グラフの波形をよく見てみると、片方向にしか動かしていないのに、左右に山が出来るのがわかります。
iPhone を左右、上下、奥手前、どの方向でも良いので、大きくゆっくり動かしてみるとわかりやすいです。

加速度センサーテスト②
※ 電池の消耗にご注意ください。

上側の赤丸部分は、iPhone をY軸方向に下から上に動かし、下側の赤丸部分は、逆に上から下に動かした時の波形です。
どういう事かと言うと、取得した値は加速度なので、iPhone を動かし始めると動かした方向に加速度が掛かり、その方向の加速度が取得できますが、iPhone の動きを止めようとすると、逆の力が働き、逆方向に加速度が取得されるのだと思われます。こいつは曲者だ・・・。

で、色々と試行錯誤した結果、XYZ軸毎に停止、プラス方向、マイナス方向を記録するフラグを持って、停止状態から動いた方向を記録し、停止を確認したらフラグを停止にリセットする方法で、どちらの方向に動いているかを判定する事にしました。
ざっくり、こんな感じ。

実際に使用するためには、色々と微調整しないと使い物になりません。。。
微調整した部分については、次のデモのHTMLソースをご覧ください。

加速度センサーテスト③加速度センサーテスト③ QRコード
※ 電池の消耗にご注意ください。

各軸のラベルの横に iPhone が動いている方向を矢印で表示するようにしました。
Z軸については、●が手前、○が奥を表しています。
完全にではありませんが、そこそこの精度で iPhone が動いている方向を矢印が指し示すと思います。

で、最終的に iPhone の加速度センサー + HTML5 + JavaScript で何を作ったかについてですが、実はまだ社内発表が終わっていないので、公開は別の機会とさせてください。

最後に、アライドアーキテクツでは、エンジニアを随時募集しています。
作る事が大好き、新しい技術が大好きという方は、こちらのエンジニア採用サイトからご応募ください。
お待ちしてます!