JavaScript DeviceOrientationでデバイスの向きや加速度を得る

JavaScriptのDeviceOrientationイベントについて調べたついでに、向きや加速度をグラフで表示するものを作りました。Android(Nexus5, Xperia Z2 Tablet)のChromeとFirefoxで動作を確認。

• JavaScript DeviceOrientation Event Viewer

DeviceOrientationイベントでは、デバイスの標準的な画面の向きに対して右がX軸正方向、上がY軸正方向、手前がZ軸正方向という座標系をデバイス座標フレーム(Device coordinate frame)と称して、それを前提にした回転角や加速度が色々と得られます。

例えばwindowオブジェクトのdeviceorientationイベントが発生したとき、そのイベントオブジェクトのalpha, beta, gammaプロパティの値はそれぞれZ軸, X軸, Y軸まわりの回転角(度数単位)を表します。X軸正方向を東、Y軸正方向を北、Z軸正方向が天頂を指すような姿勢を基準として、そこから現在のデバイスの姿勢への回転角が取得できます。ただし、absoluteプロパティがfalseの時は、そのような絶対的な値ではない、何らかの近似値となるようです(詳細不明)。角度が得られない場合、各プロパティはnullになります。

加速度はdevicemotionイベントで得られます。accelerationプロパティとaccelerationIncludingGravityプロパティではデバイス座標フレームでの角軸方向の加速度(m/s^2)が得られます。accelerationは手に支えられて落下しないときに0、accelerationIncludingGravityは自由落下(無重力)の時に0(手で持っているときは天頂方向へ約9.8m/s^2加速)となります。(2014-12-16追記: AndroidとiOSとで軸の向きが逆になっているようです。右へ加速させたとき、Androidだとxは正になりますがiOSだと負になります。yもzもそれぞれ逆向きです)

devicemotionイベントのrotationRateプロパティでは角速度がdeg/sの単位で得られます。

devicemotionイベントのintervalプロパティでは加速度検出の分解能がミリ秒で得られるようです。ただ、Android版のFirefoxでは100msを返しておきながら、数ミリ秒(5ms前後)間隔というきわめて細かい単位でイベントが発生しており、どうなっているのかよく分かりません。イベント毎にグラフを更新したら重すぎてしかたがなかったので、ある程度間引く処理を入れました。

ちなみに、deviceorientationイベントの方は定期的にイベントが起きるわけではなく、姿勢に変化が起きたときか、または、新しいリスナーが登録されたときとのことです。

一番注意しなければならないのは、デバイス座標フレームはあくまでデバイスの姿勢を基準にしたものであって、画面の内容を基準にしたものでは無いという点です。つまり、画面の向き(screen.orientation)が縦(portrait)であろうが横(landscape)であろうが、得られる値はデバイスの標準的な向きを基準にした値のみが得られます。なので、画面の向きを基準にしたい場合は、何らかの補正処理が必要になります。

補正にはscreen.orientation.angleプロパティが使えそうですが、対応していないブラウザも多いようです。screen.orientation.typeでは4種類の向きの内いずれかが分かりますが、結局どれが標準的な向きなのかが分からないので困ります。向きをscreen.orientation.lock("natural")してしまえば良いのかもしれませんが、それで済むとも限らないですよね。どうすれば良いんでしょうね。