おもしろデバイス.jp

目次へ戻る

シンプルなお試しアプリとしてコンパスの角度を表示させてみました。

jQuery を読み込む

まずは jQuery を読み込みます。jQuery が必須というわけではありませんが、やはりあると便利なのでまずは読み込んでおきます。
http://jquery.com/ から jquery-version.min.js をダウンロードし、<プロジェクトフォルダー>\platforms\android\assets\www\js にコピーします（iOS とソースを共有するときなどは android の下ではないところに www フォルダーを作ったほうがよさそうですが、とりあえず自動作成されたままで試します）。そして、index.html に

<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 などのすべてで共通です。なので、コード自体は流用することができます。

目次へ戻る