強火で進め

このブログではプログラム関連の記事を中心に書いてます。

iOS 5のSafariで追加されたコンパス情報の取得方法

iOS 5ではSafariで方位が取得出来る様になりました。早速、試されている方も居るみたいです。

Taking a new device API for a spin ≪ James Pearce
http://tripleodeon.com/2011/10/taking-a-new-device-api-for-a-spin

O.C.A.S: Getting you bearings with JavaScript on iOS
http://kinderas.blogspot.com/2011/10/getting-you-bearings-with-javascript-on.html

使い方としては以下の様になります。deviceorientationイベントの引数を使って e.webkitCompassHeading で方位、 e.webkitCompassAccuracy で精度が取得出来ます。

<script type="text/javascript">
function compassTest(e) {
    var heading = e.webkitCompassHeading;
    var res = document.getElementById("res");
    var comp = document.getElementById("compass");
    if (heading < 0) heading += 360;
    heading += window.orientation;
    res.innerHTML = '方位 : ' + heading + '<br />精度 : ' + e.webkitCompassAccuracy;
    comp.style.webkitTransform = 'rotate(-'+(heading)+'deg)';
}
window.addEventListener('load', function() {
    window.addEventListener('deviceorientation', compassTest, false);
}, false);
</script>

実際のサンプルはこちらになります。iOS 5のデバイスでアクセスしてみて下さい。

Appleのリファレンスを観るとmagnetic northと有るのでコンパスアプリの設定を「磁北」としたものと比較してみたのですが値の差が5〜20°程度有りました。この誤差は仕様の範囲なのかなぁ?

もし、この誤差を解消する方法をご存知の方がおられたらコメント欄にて教えて貰えると嬉しいです。

DeviceOrientationEvent Class Reference
http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html#//apple_ref/javascript/instp/DeviceOrientationEvent/webkitCompassHeading