リアルタイムにコンパスの値をページ内に表示する

説明

iPhone 3GS以降に搭載されたコンパス機能を利用するにはnavigator.compass.watchHeading()を使います。このコンパスはGeolocation APIで用意されているコンパスとは異なり、iPhoneを動かすとリアルタイムに方角を取得できるものです。
watchHeading()の最初のパラメータに成功時のコールバック関数を、2番目のパラメータにはエラー発生時のコールバック関数を、3番目のパラメータにはオプションを指定します。オプションは1つしかなく方角を何ミリ秒ごとに取得するかを示すfrequencyが用意されています。
コンパスからの値を得られた場合にはコールバック関数にコンパス情報が格納されたオブジェクトが渡されます（PhoneGapのページで説明されているものとは違うので注意）。このオブジェクトのtrueHeadingに方角を示す値（0〜360未満）が入っています。方角は0が北、90が東、180が南、270が西を示しています。

サンプルのプロジェクトファイルを [ダウンロード (download.zip)]

iPhone/iPad × HTML5アプリ制作 iPhone/iPad × HTML5アプリ制作。HTML5+CSS+JSで書かれたプログラムをXcode, PhoneGap, TitaniumでiPhoneアプリにしてしまおう、という解説本です。
【アマゾンで購入する】

サンプルコード (Sample code)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PhoneGap Sample</title>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEventListener("load", function(){
document.addEventListener("deviceready", function(){
// Main Program ------------------------
navigator.compass.watchHeading(
function(hdObj){
var hd = hdObj.trueHeading;
document.getElementById("stat").innerHTML = hd;
},
function(msg){
alert("Error : "+msg);
},{
frequency: 100
}
);
// -------------------------------------
}, true);
}, true);
</script>
</head>
<body>
<h1>Sample</h1>
<div>方角：<span id="stat">0</span></div>
</body>
</html>