flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（履歴をMap表示編）で履歴画面から地図画面に遷移し、その住所を再表示する機能を実装し、ある程度まとまった感があるので、逆ジオコーディングのWebサービスとして公開したいと思います。

スタイルシートを当てて、見た目を整え、ロジックを少しリファクタリングしました。あわせて、いくつか機能を拡張したので、メモしておきます。

●地図画面
1)メール送信機能
パラメータで緯度・経度を取得してその住所を表示できるようにしたので、

mailto:?body=

で、bodyにURLを入れるようにしました。

2)吹き出しを閉じる
吹き出しの中のデフォルトの閉じるボタンは小さくて、iPhoneでは押しづらいので別に用意しました。

3)地図のタイプを選択できる機能。
Google Mapsの右上部に出る「地図」「航空写真」「地図＋写真」コントロールを表示するようにしました。

var mapControl = new GMapTypeControl(true);

コンストラクタの引数にtrueを渡すと略語表示になります。極力、表示領域内の地図を隠さないようにします。

4)cookieへの保存処理。
デフォルト表示のための情報をいくつか（前回住所検索に使用した緯度・経度、選択中の地図のタイプ、表示中のzoomレベル）cookieに保存するようにしました。

5)性能改善
大きく2つあります。

• 1つ目は、不要なGPSの監視を極力なくすように、こまめにON/OFFするような実装を心がけました。
• 2つ目はなべっちにアドバイスをもらったGPSの誤差についてです。GPSで検知した緯度・経度に誤差が発生してしまうことはどうしようもありません。その誤差を少なくする工夫が必要です。2点間の移動距離の実測値より、誤差の出る傾向を見た結果、移動時より、静止時のほうが誤差が大きいことに気付きました（数100メートル単位の誤差がある）。移動時には30分間で移動距離が50メートル以上になることが数回あるくらいだったので、今回はその誤差を極力検知しないようにロジックに反映しました。

実はたいしたことはしてないです。flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（iPhoneでテスト編）で移動距離が30メートル以上の場合に、住所の表示を行うようにしましたが、さらに、移動距離が50メートル以上の場合は、それが連続した時のみ表示を行うようにしました。

●履歴画面
1)日別一覧画面を追加
住所の履歴が増えてきた場合、保存された住所を全て一覧表示すると、下の方を見たい場合には何度もスクロールさせないといけないので大変です。なので、日毎の履歴一覧を表示するようにしました。まず、住所を保存した日の一覧が表示されますので、見たい日をクリックした後、その日に保存された住所の一覧が表示されます。一覧表示する量を減らすことにより、スクロールする量、頻度を少なくさせることができたと思います。

2)一覧からの履歴削除機能
登録機能があるなら、削除機能も必要でしょう。ということで、履歴一覧に削除ボタンを追加しました。変更機能は・・・あまりその必要性がなさそうなので、実装していません。

●全体
1)（一応）多国語対応
住所表示と同時に検索した日時も表示するようにしたので、これをローカライズして表示するようにしました。（実際、どれだけできてるかわかりませんが・・・）

あと、1つ注意点が！
Firefox 3.0.11 + Firebug 1.3.3でgg.google.comからの応答を待ち続ける場合（「gg.google.comからの応答を待っています」）があります。Windows XP、Mac OS X 10.5.7の両環境で発生しました。

普通に表示されることもあれば、一度更新すれば表示されることや、何度更新してもだめなときもあります。

ナゾです。

Firebugを無効にすれば、本現象は発生しなくなります。

7月25日現在では、Firebug1.4がリリースされているので、更新すれば発生しなくなるのではないかと思います。

こんな感じで、完成したのがこちらです。
Strayed Child

アプリ名はStrayed Child（ストレイド チャイルド）にしました。
迷子という意味です。
旅行に行ったときや、道に迷ったときなどに便利だと思います。
よかったら、試してみてください！

flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（GPS編）の続きです。

前回作ったサンプルアプリiPhone GPS Sampleを実機でテストしてみました。実際にテストしてみていくつかわかったことがあります。

• 移動してなくても現在地の緯度・経度の値が変わる場合がある。
• 数歩歩くだけで変化する。

どちらも当たり前のことなんですが、実際に動きながらテストしてはじめて気付かされました。

以下のようなコードで、現在地の緯度・経度の値が変更になったときのイベントを受け、現在地住所を検索するようにしているので、

 function onLocationChanged(e) {
  lat = e.coords.latitude;
  lng = e.coords.longitude;
  getAddress(new GLatLng(lat, lng));
 }

地図上の吹き出しが表示されたり、消えたりを繰り返し、うざいです。なので、ある程度移動すると住所情報を再表示することにしました。
ある程度はどれぐらいにしたら良いかを考えます。

緯度1秒の長さ（赤道上） 約30.7m
緯度1秒の長さ（緯度35度上） 約30.8m
緯度1秒の長さ（緯度90度上） 約31.0m

緯度 – Wikipediaより引用。

場所にもよりますが緯度1秒は約30メートルです。

経度1秒の長さ（赤道上） 約31m
経度1秒の長さ（緯度35度上） 約25m
経度1秒の長さ（緯度90度上） 0m

経度 – Wikipediaより引用。

経度の場合、場所による1秒の長さの違いは、緯度の場合より顕著です。
緯度35度上で約25メートルということなので、日本を基準にして、現在地の緯度・経度ともに1秒（約30メートル）以上変化した場合に住所を再表示するようにしたいと思います。

まずは、移動前の緯度・経度と移動後の緯度・経度から2点間の移動距離を求めます。

Google Maps APIに便利なメソッドがありました。
GLatLngクラスのdistanceFromメソッドです。

この地点から指定の地点までの距離をメートル単位で返します。デフォルトでは、この距離はデフォルトの地球の赤道半径 6,378,137 メートルに基づいて算出されます。地球を球形として概算するので、距離には特に極点付近で最大で 0.3% の誤差が生じます。オプションの radius 引数を渡して、地球とは異なる半径を持つ球体の GLatLng 座標間の距離を算出することもできます。

Google Maps API リファレンス – Google Maps API – Google Codeより引用。

これは便利！今回はこれを利用します。

 function getDistance(srclat, srclng, dstlat, dstlng) {
  var src = new GLatLng(srclat, srclng);
  var dst = new GLatLng(dstlat, dstlng);
  return dst.distanceFrom(src);
 }

リターン値はメートルになるようなので30メートル（1秒＝約30メートル）以上移動したかをチェックします。
これを踏まえると、緯度・経度変化時のコールバック関数は以下のようになります。

 function onLocationChanged(e) {
  if (getDistance(lat, lng, e.coords.latitude, e.coords.longitude) >= 30)
  {
   lat = e.coords.latitude;
   lng = e.coords.longitude;
   getAddress(new GLatLng(lat, lng));
  }
 }

Google Maps APIを利用する上での注意点があります。

注: 逆ジオコーディングは科学的に正確ではありません。ジオコーダは、一定の許容範囲内で最も近いアドレス可能な場所を探そうとします。一致するものがない場合、ジオコーダは通常、G_GEO_UNKNOWN_ADDRESS (602) ステータス コードを返します。

サービス – Google Maps API – Google Codeより引用。

GPSの緯度・経度とGoogle Maps APIを呼び出した結果の緯度・経度が異なる場合があります。要するに、取得できた住所は、意図した地点の住所ではない場合があります。なので、これを理解した上で、住所表示のロジックを実装します。

これを踏まえると、Google Maps APIのコールバック関数は以下のようになります。

 function showAddress(response, latlng) {
  if (response != null && response.Status.code == 200) {
   map.clearOverlays();
   place = response.Placemark[0];
   marker = new GMarker(latlng);
   map.addOverlay(marker);
   marker.openInfoWindowHtml('<b>Address:<\/b>' + place.address);
  }
  else {
   alert("Not found.");
  }
 }

まずますの精度になったと思います。もし良かったら、試してみてください！
iPhone GPS Sample

flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（UI編）の続きです。

iPhone OS 3.0のSafariでGPS機能を利用し、現在地の緯度・経度を取得します。

前回同様、以下のサイトを参考にしました。
各種デバイスの読み取り – iPhone 3G DevWiki

javascriptで現在地の緯度・経度を取得します。

 function initialize() {
  if (navigator != null && navigator.geolocation != null) {
   navigator.geolocation.watchPosition(onLocationChanged);
  }

  map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(lat, lng), 15);
  GEvent.addListener(map, "click", onMapClick);
  geocoder = new GClientGeocoder();
 }

 function onLocationChanged(e) {
  lat = e.coords.latitude;
  lng = e.coords.longitude;
  getAddress(new GLatLng(lat, lng));
 }

navigatorオブジェクトのgeolocationを利用します。
ブラウザやプラットフォームによってはサポートされていない場合があるため、PCブラウザでアクセスされた場合も考慮して、存在チェックをした後、値を取得します。

if (navigator != null && navigator.geolocation != null) {
navigator.geolocation.watchPosition(onLocationChanged);
}

緯度・経度の取得には、どうやら2種類の関数があるようです。

各種デバイスの読み取り – iPhone 3G DevWiki参照。

今回は移動時の対応もするので、watchPositionを使用しました。

位置が変わるたびに発生するイベントのコールバック関数の中で、緯度・経度を取得し、適切な値であればその地点の住所を表示します。

lat = e.coords.latitude;
lng = e.coords.longitude;

ここまでで、こんなのが出来ました。

現在地の住所を表示します。もし良かったら、試してみてください！
※　前回のサンプル同様、クリックした場所の住所も表示されます。
※　geolocationがサポートされてないブラウザの場合は、クリックした場所の住所表示のみになります。
iPhone GPS Sample

■参考サイト
各種デバイスの読み取り – iPhone 3G DevWiki

flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0にアップデートしてみたで、iPhone SDK 3.0もインストールしたので、なにかiPhoneアプリでも作ってみようかと思っていたのですが、iPhone OS 3.0のSafariではGPS機能が使えるということを知り、iPhone向けのWebアプリを作ってみることにしました。

ろっきーのflashcast：フリーで働くITエンジニア集団のブログ: GoogleAPI～郵便番号から地図を表示してみる～によると、Google Maps APIがバージョンアップされ、Google Maps API – Google Codeに、逆ジオコーディング機能がついたようなので、これを使いたいと思います。

Google MAPS API に登録する – Google Maps API – Google CodeよりGoogle Maps APIを利用するためのキーを取得します。

flashcast：フリーで働くITエンジニア集団のブログ: GoogleAPI～住所から緯度経度を取得する（その1）～を参考に、キーも取得できたので、作りながら仕様を決めていきたいと思います！