デバイスの向きが取得できるようになったところなので、実際の応用を考えてみることにします。画面の中に何かが表示されていて、右に傾けたら右へ、左に傾けたら左へ移動するようなユーザーインタフェースというのはどうでしょう。

左右の傾きを検出するにはどうしたら良いでしょうか。

さて、そもそも「左右の傾き」とはいったい何でしょうか。

deviceorientationのgammaでしょうか？　gammaはデバイスのY軸、つまり画面縦方向を軸とした回転角でした。確かに机の上にデバイスを水平において、少し左右に傾けたときの姿勢はY軸回りの回転だけで表されそうです。

しかしデバイスを手で持って顔の前で使っている場合はどうでしょう。左右に傾けるというのはZ軸(画面奥から手前に向けての軸)回りの回転ではないでしょうか。

仰向けに寝そべって天井に向けてデバイスを持っている場合はどうでしょう。これはY軸の回転で左右操作をしそうですね。人によってはZ軸で操作するかもしれません。

これらに共通するものは何でしょうか。人は左右の傾きを何を基準に入力しているのでしょうか。

おそらく、X軸(デバイス横方向の軸)の傾きではないでしょうか。つまり、X軸の正方向(右方向)が地を向けば右、逆に天を向けば左なのではないでしょうか。これはデバイス(板)の上に乗っているボールが重力に沿って左右に動く様を想像しているのかもしれません。

となれば、デバイスのX軸が地面に対して何度傾いているかを計算すれば、左右の傾きになりそうです。

デバイスの向きがdeviceorientationイベントのalpha, beta, gammaで表されるとき、デバイス座標rから地球座標r'への変換は次の式になるのでした。

r' = matRotZ(alpha)*matRotX(beta)*matRotY(gamma)*r

(rとr'は列ベクトル、matRotZ(alpha)はZ軸回りにalpha度回転する変換行列)

今知りたいのはデバイスのX軸正方向を地球座標へ変換したときにZ軸(地面に対して垂直な軸)方向が正になるか負になるかです。

デバイスのX軸正方向を代表する座標 r=[1,0,0] を変換元にして、行列を全て結合すると次のようになります。

r'= [ cos(alpha)*cos(gamma)-sin(alpha)*sin(beta)*sin(gamma) ]
    [ sin(alpha)*cos(gamma)+cos(alpha)*sin(beta)*sin(gamma) ]
    [ -cos(beta)*sin(gamma)                                 ]

つまり、r'_z=-cos(beta)*sin(gamma) が答えになります。これが正なら左に傾き、負なら右に傾いていることになります。

地面と平行な面との角度を知りたければsin^-1をとります。斜辺が長さ1のデバイスX軸正方向に沿ったベクトル、垂線がr'_zの三角形を思い浮かべれば分かると思います。

th = sin^-1(-cos(beta)*sin(gamma))

これだと画面の回転を考慮していません。デバイスの自然な向きで使用しているときは問題ありませんが、portraitやlandscapeといった画面の向きを変えるとおかしな事になります。

それを補正するために、screen.orientation.angleを使用します(もしこのプロパティが使えないならlockOrientationで画面の向きを固定するか、諦めて他の入力方法に切り替えた方が良いかもしれません)。

画面上の座標からデバイス座標へ変換するには、screen.orientation.angleだけZ軸まわりに逆回転させます。なので、画面上の座標から地球座標へ変換する式は次のようになります。

r' = matRotZ(alpha)*matRotX(beta)*matRotY(gamma)*matRotZ(-screen.orientation.angle)*r

先ほどと同じように行列を結合すると次のようになります。

angle = -screen.orientation.angle
r' = [ cos(alpha)*cos(gamma)*cos(angle) -sin(alpha)*( cos(beta)*sin(angle)+sin(beta)*sin(gamma)*cos(angle) ) ]
     [ sin(alpha)*cos(gamma)*cos(angle) +cos(alpha)*( cos(beta)*sin(angle)+sin(beta)*sin(gamma)*cos(angle) ) ]
     [ sin(beta)*sin(angle)-cos(beta)*sin(gamma)*cos(angle)                                                  ]

角度は次のようになります。

th = sin^-1(sin(beta)*sin(angle)-cos(beta)*sin(gamma)*cos(angle))

最終的なJavaScriptのコードは次のようになります。

function toRad(deg){return deg*(Math.PI/180);}
function toDeg(rad){return rad*(180/Math.PI);}
function getLeftTiltAngle(ev){
    // r = rotz(alpha)*rotx(beta)*roty(gamma)*rotz(-screen.orientation.angle)*colvec[1,0,0]
    // tilt = sin^-1(r.z)
    var b = toRad(ev.beta);
    var c = toRad(ev.gamma);
    var d = toRad(-screen.orientation.angle);
    var rz = Math.sin(b)*Math.sin(d)-Math.cos(b)*Math.sin(c)*Math.cos(d);
    return toDeg(Math.asin(rz));
}

以上の論法はDeviceOrientation Event SpecificationのWorked Exampleに書いてあるのとほとんど同じです。そちらはデバイス背面方向の方位を求める例ですね。

他にもdevicemotionイベントを使用して傾きを求める方法もあります。傾きを求めるだけならばコンパス(方位)の情報は不要なので、むしろこちらの方が本筋かもしれません。accelerationからaccelerationIncludingGravityを引くと重力加速度のベクトルが得られます。そのベクトルからデバイスX軸正方向の成分だけを取り出せば良いのです。もちろん画面の向きを考慮するなら、X軸正方向のベクトルをscreen.orientation.angleでZ軸回りに逆回転させて、そのベクトルと重力加速度のベクトルとの内積を求めます。JavaScriptのコードにすると次のようになります。

function getLeftTiltAngleFromMotionEvent(motionEvent){
  var gravityX = motionEvent.acceleration.x - motionEvent.accelerationIncludingGravity.x;
  var gravityY = motionEvent.acceleration.y - motionEvent.accelerationIncludingGravity.y;
  var gravityZ = motionEvent.acceleration.z - motionEvent.accelerationIncludingGravity.z;
  var screenAngleRev = toRad(-screen.orientation.angle);
  var rightX = Math.cos(screenAngleRev);
  var rightY = Math.sin(screenAngleRev);
  var dotGR = rightX * gravityX  + rightY * gravityY;
  var rightGravity = dotGR / Math.sqrt(gravityX*gravityX+gravityY*gravityY+gravityZ*gravityZ);
  return -(90 - toDeg(Math.acos(rightGravity)));
}

両方の方法を試してみましたが、deviceorientationを使った方が若干安定しているように見えます。devicemotionを使った方は、デバイスを振ったときに角度が大きく変化してしまいました。

以下、動作例。対応しているブラウザだと赤いバーが左右に動くはず。

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")してしまえば良いのかもしれませんが、それで済むとも限らないですよね。どうすれば良いんでしょうね。