スマホのセンサーから上下左右の傾きと方向をJavascriptで取得する DeviceOrientationEvent

DeviceOrientationEvent
センサーの塊であるスマートフォンは、Webサイトからデバイスの傾きや方向を取得することが出来ます。
普通のサイト制作よりはゲームやアプリなんかで使う機能かなーと思うのですが、今回使う機会があったので覚えておくメモ代わりに書いておこうと思います。

DeviceOrientationEventを使う

取得の仕方は特に難しいこともなく下記のように出来ます。取得できる方向や傾きを格納する変数を用意しておいて、何かしらの表現や動作に使うことが多いんじゃないでしょうか。

var alpha;
var beta;
var gamma;

window.addEventListener('deviceorientation', function(e) {
  alpha = e.alpha; //方向（方角）を取得する。値は0〜360。
  beta = e.beta; //上下の傾きを取得。値は-180〜180。
  gamma = e.gamma; //左右の傾きを取得。値は-90〜90。
}, true);

触ってみてちょっと悩ましかったのは、プラスマイナスの境界線の処理ですかね。
例えば-90まで傾けたら次は-91じゃなくて90になって一気にプラマイ逆転します。実現したい実装によっては、そこで予期せぬ動作になるので要注意かもです。

Web制作の現場で使う jQueryデザイン入門［改訂新版] (Web Professional Books)
-Amazonでみる