シンプルなお試しアプリとしてコンパスの角度を表示させてみました。
まずは jQuery を読み込みます。jQuery が必須というわけではありませんが、やはりあると便利なのでまずは読み込んでおきます。
http:/
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
を追加します。
普通の HTML で jQuery を使うときと何ら変わるところはありません。CDN を使っても動くとは思いますが、そうするとインターネットに繋がっていないと起動すらできないアプリになってしまうので止めた方がいいでしょう。
初期状態の PhoneGap ではコンパスはサポートされていません。機能ごとにプラグインになっているのでまずはコンパスプラグインを入れる必要があります。コンパスプラグインの入れ方はドキュメント Compass に記載されています。ここの始まってすぐのところに cordova plugin add と書いてあるところがプラグインを入れるためのコマンドです。ただ、実際には cordova コマンドではなく phonegap コマンドを使います。(どっからか cordova コマンドを持ってくればいいのかもしれませんが、よくわかりません。「PhoneGap のインストール」に書いた手順でインストールすると phonegap が入っていてそれを local を明示して使用すればうまくいきました)
> cd PhoneGapApp1 > phonegap local plugin add https:// git-wip-us.apache.org/ repos/ asf/ cordova-plugin-device-orientation.git
こんな感じです。
(git が入っていない環境でやったらエラーで途中で止まってしまいました。その場合は、msysgit を入れてコマンドプロンプトで git が使えるようにパスを通しておけば OK でした)
プラグインを追加すると、JavaScript コード、Java コード、cordova_plugins.js や config.xml といった設定ファイルなどが変更・追加されるようです。
まず、index.html にコンパスの値を書くための span を追加します。
<div> コンパス: <span id="compass"></span> </div>
続いて index.js の onDeviceReady にコンパスの値を取得して表示するコードを追加します。
navigator.compass.watchHeading( // onSuccess function(heading) { $('#compass').text(heading.magneticHeading); }, // onError function(error) { $('#compass').text(error.code); }, // 1秒間隔 { frequency: 1000 });
なんの工夫もなく 1秒おきにコンパスの値を表示するだけですが、問題なく動作しました。このようにプラグインを入れたりといった準備が必要になりますが、それさえ終わらせてしまえばかなり簡単にコンパスを扱うことができます。もちろん、navigator.compass.watchHeading といった API は Android、iOS、Windows Phone などのすべてで共通です。なので、コード自体は流用することができます。