Facebook Twitter Google Maps RSS
Home Webアプリ 【第7回】 Cordovaで方位を取得!
formats

【第7回】 Cordovaで方位を取得!

みなさんこんにちは!
寒暖の差が激しい日々が続いておりますが、いかがお過ごしでしょうか。
体調を崩さないように頑張って行きましょう!

さて、今月3日は節分の日でしたね。
その節分の日に何気なくAppStoreの無料ランキングを確認していたのですが、
今年の恵方を教えてくれるアプリが複数上位にランクインしていました(笑)
なるほど、季節に合わせるとこのようなことも起こるのか、と関心したのに合わせ、
方角であればCordovaでも出来たような。。。と思い、今回挑戦してみることにしました!!

    使い方

Cordovaを使用していればプラグインのダウンロードは必要ありません。
下記APIを使用して実装を進めていきます。

navigator.compasss.watchHeading()

まずは全体のソースです。
Cordovaの読み込みが完了してから処理を行ってください。

function onSuccess(heading) {
    console.log('方位: ' + heading.magneticHeading);
};

function onError(compassError) {
        alert('コンパスのエラーが発生しました: ' + compassError.code);
};

var options = { frequency: 3000 };  // 3秒ごとに更新

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

まずは最終行のnavigator.compass.watchHeading(onSuccess, onError, options)で現在の参照を取得します。
引数は3つあり、
第一引数:成功時の処理
第二引数:失敗時の処理
第三引数:各種オプション設定
です。

成功時の引数に取得した方位が格納されています。(heading.magneticHeading)
失敗時には引数にエラーコード等が格納されています。
オプションでは、取得間隔(ミリ秒)を設定しています。

取得を停止したい場合は、navigator.compass.clearWatch()の第一引数にwatchHeadingの戻り値である参照を渡せば停止します。

取得される方位は0.0 ~ 359.9のような数値なので、4分割、8分割、、、等切り分けると
南南東、などの表示をすることも出来ますね。
応用の幅は結構広がりそうです。

簡単ではありますが、以上で説明は終了です!

まとめ


今回の動機は自分自身の新しい発見も多く、普段から意識すれば至る所にヒントはあるんだなと思いました。
改めていろんな場所に意識を配りながら新しいことに挑戦していきたいと思います!!

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">