アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

リファレンスより。アプリカンでコンパスアプリを作ろう

アプリカンのリファレンスページではAPIの説明と共に、そのAPIを使うためのサンプルプロジェクトを公開しています。

今回はその中からCompass APIを使ったコンパスアプリの使い方を紹介します。

必要なもの

プロジェクトのダウンロード

Compass | アプリカン | アプリ開発支援プラットフォームにてサンプルをダウンロードをクリックします。

f:id:moongift:20150625165926p:plain

アプリカンにログイン

アプリカン | アプリ開発支援プラットフォームへ行き、右上にある会員登録をクリックします。既に会員登録済みの場合はログインをクリックします。

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

会員登録、ログイン後に表示されるプロジェクト一覧ページにて、新しいプロジェクトを作成ボタンをクリックします。

f:id:moongift:20150510221412p:plain

プロジェクト名は「コンパスデモ」として、対象デバイスはUniversal(iOS)/Androidのいずれかを選択してください。そして作成ボタンをクリックします。

f:id:moongift:20150625165959p:plain

作成されると、コンパスデモのプロジェクト画面に移動します。

f:id:moongift:20150510221449p:plain

コードのアップロード

プロジェクト画面左にあるアップロードをクリックします。

f:id:moongift:20150510221511p:plain

そしてアップロードと書かれている枠の中に、先ほどダウンロードしたweb.zipをドラッグ&ドロップしてください。

f:id:moongift:20150510221528p:plain

アップロードが完了すると、追加されましたというメッセージが出ます。そして、その下にある公開ボタンをクリックします。

f:id:moongift:20150510221549p:plain

そして公開するボタンをクリックしてください。

f:id:moongift:20150510221604p:plain

更新されました、と表示されれば準備は完了です。

f:id:moongift:20150510221619p:plain

アプリカンシミュレータのインストール

iOSのApp StoreまたはAndroidのGoogle Playにて applican と検索してアプリカンシミュレータをインストールしてください。

f:id:moongift:20150510221634p:plain

アプリカンシミュレータで確認

アプリカンシミュレータを起動すると、まずログイン画面が表示されます。会員登録したログインID、パスワードでログインします。

f:id:moongift:20150510221648p:plain

そうすると登録しているプロジェクトが一覧表示されますので、コンパスデモを選択します。

f:id:moongift:20150625170106p:plain

起動するとこのように表示されます。まずは現在向いている方角を取得をタップしてみます。

f:id:moongift:20150625170118p:plain

そうするとコンパスが起動され、磁北、真北、精度が表示されます。

f:id:moongift:20150625170130p:plain

さらにコンパス方位を一定の時間間隔で取得できます。 一定時間ごとに磁北、真北、精度が表示されます。

f:id:moongift:20150625170143p:plain

コンパスの監視を停止をタップすると、コンパスの監視が停止されます。

f:id:moongift:20150625170153p:plain

Compass APIの使い方

コンパスを起動する際には以下のように実行します。

//現在向いている方角を取得
function getCurrentHeading(){
    applican.compass.getCurrentHeading(currentHeadingSuccess, currentHeadingError);
}
function currentHeadingSuccess(res){
    var dump = "currentHeadingSuccess\n";
    dump += "magneticHeading:"+res.magneticHeading+"\n";
    dump += "trueHeading:"+res.trueHeading+"\n";
    dump += "headingAccuracy:"+res.headingAccuracy+"\n";
    dump += "timestamp:"+res.timestamp+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}
function currentHeadingError(e){
    var dump = "currentHeadingError\n";
    dump += "code:"+e.code+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}


- applican.compass.getCurrentHeading : 現在向いている方位を取得

といった指定になります。


そしてコンパス方位を一定の時間間隔で取得する場合以下のように実行します。

var_compassWatchID;
//コンパス方位を一定の時間間隔で取得
function watchHeading(){
    var options = { frequency: 100 };
    _compassWatchID = applican.compass.watchHeading(watchHeadingSuccess, watchHeadingError, options);
}
function watchHeadingSuccess(res){
    var dump = "watchHeadingSuccess\n";
    dump += "magneticHeading:"+res.magneticHeading+"\n";
    dump += "trueHeading:"+res.trueHeading+"\n";
    dump += "headingAccuracy:"+res.headingAccuracy+"\n";
    dump += "timestamp:"+res.timestamp+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}
function watchHeadingError(e){
    var dump = "watchHeadingError\n";
    dump += "code:"+e.code+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}

- applican.compass.watchHeading : コンパス方位を一定時間で取得

といった指定になります。


コンパス方位の取得を停止する場合は以下のように実行します。
var_compassWatchID;

//コンパス方位を一定の時間間隔で取得
function watchHeading(){
    var options = { frequency: 100 };
    _compassWatchID = applican.compass.watchHeading(watchHeadingSuccess, watchHeadingError, options);
}
function watchHeadingSuccess(res){
    var dump = "watchHeadingSuccess\n";
    dump += "magneticHeading:"+res.magneticHeading+"\n";
    dump += "trueHeading:"+res.trueHeading+"\n";
    dump += "headingAccuracy:"+res.headingAccuracy+"\n";
    dump += "timestamp:"+res.timestamp+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}
function watchHeadingError(e){
    var dump = "watchHeadingError\n";
    dump += "code:"+e.code+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}

//コンパスの監視を停止
function clearWatchHeading(){
    applican.compass.clearWatch(_compassWatchID);
    document.getElementById("dumpAreaCompass").value+"\nStop!!";
}

- applican.compass.clearWatch:コンパスの監視を停止

このような指定となります。

----

アプリカンを使うとコンパスを使ったアプリが簡単に作れるようになります。ぜひ皆さんのアプリの中で使ってください。

[アプリカン | アプリ開発支援プラットフォーム](http://www.applican.com/)