位置情報サービスのはじめ方

第7回 Google App Engineで位置情報サービスを作ってみよう

この記事を読むのに必要な時間:およそ 5 分

連載の最終回となる今回は,これまでの内容のおさらいとして,Google App Engineで自分の位置情報を記録するサイトを作ってみます。

アプリケーションの内容

今回作成するアプリケーションは,簡単な位置情報サービスということで,以下のようなサイトにしたいと思います。

  • Goelocation APIに対応したブラウザでトップページを開いていると,測位された位置が変わるごとにサーバへ緯度経度をPOSTし,Geohashに変換してGoogle App Engineのデータストアに保存する。
  • 履歴ページ(/history)へアクセスすると,地図を表示し,それまでに記録されている位置を線でつないで地図上に表示する。

今回必要となる技術要素は以下のようになります。

トップページ:
  • Google Maps JavaScript APIを利用した地図の表示
  • JavaScriptによる位置情報の取得
  • サーバ上での緯度経度からGeohashへの変換
  • Google App Engineでのデータの保存
履歴ページ:
  • Google Maps JavaScript APIを利用した地図の表示
  • Google Maps JavaScript APIを利用した地図上へのPolylineの描画
  • JavaScriptでのGeohashから緯度経度への変換

アプリケーションを使ってみよう

これらの条件で作成したアプリケーションを以下のURLで公開しているので,スマートフォン,もしくはGeolocation APIを利用できるブラウザでアクセスしてみてください。

図1 上記URLのQRコード

図1

アクセスすると,Googleのアカウントでのログインを求められるので,案内にしたがってGoogle アカウントでログインしてください。

図2
スマートフォンで見たとき:

図2

PCで見たとき:

図2

ログインすると、画面いっぱいに地図が表示され、ブラウザが位置情報の取得を許可する旨のアラートを表示するので、⁠OK」ボタンをクリックしてください。

図3
スマートフォンで見たとき:

図3

その後,位置情報の取得に成功した場合は,地図上にマーカーが配置されます。スマートフォンを利用している方は,このブラウザを落とさずに,近辺をうろうろしてみると,位置情報が変わったタイミングで,サーバーへその情報がPOSTされ,データストアへ記録されます。

ある程度時間が経ったら,以下の履歴ページを見てみましょう。

図4 上記URLのQRコード

図4

記録されている位置が,赤い線で繋がって表示されるはずです。以下の図は,休日にショッピングセンターへ買い物にでかけ,その帰り道で近くの公園に立ち寄ったときの記録になります。

図5
PCで見たとき:

図5

位置情報サービスと言いながら,スポットの作成や,チェックインもありませんし,また,位置を記録していくのはGoogle latitudeというサービスを利用してもできてしまいます。しかし,サンプルとしてのまとまり(ある程度コンパクトに)と,これまでの連載の内容の復習という観点から,このようなサンプルアプリケーションの内容としました。

Google App Engineをセットアップ

まずは,Google App Engineを開発する環境を整えましょう。こちらの記事を参考に,Pythonで開発できる環境をセットアップしましょう。

Pythonのインストールと,Google App EngineのSDKをインストールするだけで,ローカルで簡単に開発環境を構築することができます。

著者プロフィール

栗栖義臣(くりすよしおみ)

株式会社はてな。Java, JavaScript, ActionScript, Perlなどをたしなむ。

優秀な若手エンジニアたちに囲まれながら奮闘する毎日。

URL : http://d.hatena.ne.jp/chris4403/

技術ネタ : http://d.hatena.ne.jp/chris4403+tech/

コメント

  • Titaniumの検索UIについて

    いつも勉強させてもらっています。
    iPhoneでは、検索フィールドにフォーカスしたらキャンセルボタンがアニメーションで表示され、フォーカスをはずしたらキャンセルボタンがアニメーション消えるようなUIを良く見かけますが、Titaniumではその挙動は実装できるのでしょうか?

    Commented : #1  Turkey (2011/01/25, 17:50)

コメントの記入