iPhoneのSafariで細かい回転量を取得する

今までも onorientationchange を使えば90度づつの回転(Safariの描画の向きが変わるタイミング)は取得可能でした。

このようなデモで実装されているタイプのデータであれば今までも可能でした。

Ajaxian » iPhone window.onorientationchange Code
http://ajaxian.com/archives/iphone-windowonorientationchange-code

実際に返される値を確認したい場合はこちらにアクセスして下さい。90度づつの回転時に画面に現在の回転量(角度)が返されます。

iOS 4.2からはもっと細かい値がリアルタイムに取得出来るようになりました。

前回の加速度センサーのときと同様に addEventListener を使って以下の様に記述すればOKです。

	      window.addEventListener("deviceorientation", orientationEvent, true);

加速度を取得したいときは "devicemotion" 、回転量を取得したいときは "deviceorientation" です。

すると設定した定期的指定した関数に回転量が返されます。

      function orientationEvent(event) {
        var d = document.getElementById("display");
        d.innerHTML = "<p>x = " + event.beta + "<br />y = " + event.gamma + "<br />z = " + event.alpha + "</p>";
      }

値は引数のプロパティ alpha 、beta 、gamma に入っています。
軸との対応と返される値の範囲は以下の様になっています。 alpha がz軸で有ることに注意して下さい。

プロパティ名	対応する軸	値の範囲(degrees度)
alpha	z	0〜360
beta		x	-180〜180
gamma	y	-90〜90

こちらにはイラスト付き解説して有りますのでこちらも合わせて読むと理解し易いと思います。

DeviceOrientation Event Specification
http://dev.w3.org/geo/api/spec-source-orientation.html

プログラムはこちらに置いておきますので実際にiPhoneを回転しながら読むと良いかもしれません。