ゴミ箱.net

汚物は消毒

夏休み自由研究 Google Maps APIを使ったウェブサービスを作る

暇なのでGoogle Maps APIを使ったウェブサービスを立ち上げてみる。…といっても内部にデータを保持しないのでただの静的なウェブサイトだが。

家賃の相場を別のサイトから取得し、地図上に色つきで表示するようにしてみた。
賃貸相場マップβ

スクレイピング


家賃相場のデータに関しては、AJAXを使って別サイトのHTMLを取得し、HTMLに対してスクレイピングを行うことで地名と家賃の対応を得る。
問題は、取得先が人様のサイトであるため、クロスドメインのAJAXをせざるを得ない点だ。セキュリティ的に問題があるためか普通にはできないので、いろいろと小細工が必要なようだ。
今回はjQueryおよび、jQueryのCross-Domain Ajax プラグインを使うことにした。

Cross-Domain Ajax プラグインは、コールバック関数によって非同期に取得したHTMLを処理することが可能である。しかも、jQueryのセレクタの記法によって簡単に要素を取得できるため、スクレイピングにぴったりである。
以下に例を示す。example.comからHTMLを取得し、クラスhogeのついた要素すべてについて処理を行う。
    $.get("http://example.com/", function(data){
$(data.responseText).find(".hoge").each(function() {
//適当な処理
});
});


地名から地図上の座標を得る


データを取得したら地図上に配置する必要がある。
Google Map JavaScript API V3を使えば、地図を自分のウェブページ上に配置するだけならあっという間である。
ちょっと細工が必要なのが、地名から地図上の座標への変換と、地図上にマーカーとテキストを配置する点である。

地名から地図上の座標への変換は、Google Map APIのジオコーディングを用いる。

厄介なのは、一度に一地点しか変換できない貧弱なAPIのくせに、APIの呼び出しを連発すると呼び出し回数の制限を越えたぞゴルァと怒られてエラーが帰ってくることである。
エラーが発生した場合は適当な時間を置いてリトライする必要がある。
ところでJavaScriptにスリープ関数なんかあったか?
いいえありませんm9(^Д^)
さあ困ったぞwww

解決策として、エラーが発生した場合はJavaScriptのタイマーを使い、数秒後に処理関数を再度呼び出すようにする。
その際、どこまで処理が進んだかを覚えておくためにフラグを立てておき、二度手間を防ぐようにしておけばいいだろう。

もうひとつ困った問題として、Google Maps APIはコールバック関数で変換結果を受け取るようなインターフェースなのだが、そのコールバック関数に対してデータを渡すことが意外と面倒だったりする。
Google Maps APIの呼び出し元においてローカル変数を定義しておいてコールバック関数で参照しようとしたが、呼び出し元でローカル変数を書き換えるとコールバック関数側で参照する値にまで影響が出てしまうのでボツ。

これについては、APIの呼び出しごとに異なる値を埋め込んだコールバック関数のオブジェクトを生成することで対応した。
これについてはJavascriptでイベントハンドラのコールバック関数に引数を渡す - yummy-yummyを参考にした。JavaScriptにおいては関数すらオブジェクトとして扱われるため、このような芸当が出来る。

地図上にマーカーと文字列を貼り付ける


座標を取得したら、地図上にマーカーと文字列を貼り付ける。
マーカーはまあいいだろう。Google Maps APIのチュートリアルどおりだ。

少し困るのは、文字列を貼り付けるのをどうするかという点である。
ぐぐる様が用意している情報ウィンドウはでかくてへぼい。地図上に値を貼り付けてると吹き出しで何も見えねえw
あまりにぐぐるの情報ウィンドウがへぼいので、google-maps-utility-libraryを使うことにした。
ダウンロード用のデータは用意されてないので、リポジトリを漁ってJavaScriptのファイルsrc/infobox_packed.jsを拾ってくる。使い方はdocs/reference.htmlを見ればおk。
小さい上に色も変えれるすぐれものだ。

細かい話だが色を変える処理について。
家賃の値を0から360の色相に変換し、RGB色空間とHSV色空間の相互変換 Javascript版 - 今日も適当ダイアリーに紹介されてる関数を使って色相をRGB値に変換。その後、RGBそれぞれの値を16進表記の文字列に直して#ffffffの表記にしている。
意外に面倒だw
スポンサーサイト

PageTop

コメント


管理者にだけ表示を許可する