PhoneGap で位置情報 ( Geolocation ) を取得する

こんにちは。

マイクロソフトの渡辺です。

前回は、PhoneGap と Microsoft Azure Mobile Services を接続してみました。今回は、アプリ内で位置情報を取得して保存してみたいと思います。

Geolocation Plugin の追加

PhoneGap アプリで位置情報を取得するには、Geolocation プラグインを使います。

アプリのフォルダに移動して、

$ phonegap plugin add org.apache.cordova.geolocation

とすると、プラグインがインストールされます。とっても簡単です。

次に、実際にソースコードの中でプラグインの API を呼び出して位置情報を取得してみます。

まずは、index.html 内に適当にボタンを追加しましょう。

そして、そのボタンをクリックすると、位置情報をアラートするコードを、onDeviceReady 内に追加します。

全体としてはこんな形。

デバッグしてみる

PhoneGap Developer App を使っている場合は、ソースコードの保存がすぐに反映されます。実機画面を見てみると、ボタンが追加されているので、

タップしてみると、アラートで位置情報が表示されます。

という形で、PhoneGap アプリでは、こんなに簡単に位置情報を取得することができます。

取得した位置情報を保存する

さて、次に取得した位置情報をモバイルサービスのテーブルに保存してみます。モバイルサービスにおけるデータ保存の基礎は「 データの生成/読出し/更新/削除を行う ( Part 1 ) - Microsoft Azure Mobile Services ( JavaScript バックエンド )  」をご覧ください。

まずは、Location テーブルを作成。

そして、先ほどアラートを表示したコードの下に、Location テーブルを取得してデータを保存するコードを追加します。

全体としてはこんな形。

そして、デバッグしてみると、ボタンをタップするたびに、モバイルサービスのテーブルにデータが追加されていくのが見て取れます。

このあとは

ここまで出来れば、あとはデータをモバイルサービスから読み出して地図にマッピングしてみたりと、いろいろ応用できそうなことはご想像いただけるかと思います。モバイルサービスに保存したデータの読み出しの Tips は「 データの生成/読出し/更新/削除を行う ( Part 2 ) - Microsoft Azure Mobile Services ( JavaScript バックエンド )」をご覧ください。

続きの応用編等は、また追って投稿したいと思います。