HiLOG

　友人のMattaiが1年半ほど前にMattaniLogという彼のサイトで「おでかけMap」というコンテンツを設置した。ブログで扱ったおでかけの内容を地図にポイントする、というもの。ネットで公開されている白地図をベースにMacromediaのFlashで作成してあった。面白いコンテンツだなあと思っていたのだけれど、この時にはHiLOGにも組み込むところまではいかなかった。

　最近になってGoogleMapsをはじめとしてネット大手が地図サービスのAPIを公開し、一般のひとがAPIを使って自身のサイトに地図を組み込むことが手軽にできるようになってきた。これらの地図は拡大・縮小や移動がマウスの操作だけで簡単にできたり、地図帳のような描いた地図と衛星写真の地図とを瞬時に切り替えたりできる、という触っているだけで楽しいもの。これを使っておでかけMapを作成したら面白いだろうなと1ヵ月ほど前から設置方法などをWebで調べはじめて、ようやく、「おでかけHiLOG」が完成した。

　直接GoogleMapsのAPIを呼ぶのではなく、KsGMapという汎用Google Maps APIスクリプトを介してコールする方法を選んだ。具体的には以下のとおり。

(1) Googleアカウントの取得
　僕はGoogleアカウントを既に取得していたので、今回はなにもしなかったが、持っていない場合は、Google アカウントのサイトからアカウントを取得する。絵文字とe-mailによる認証、利用許諾への同意が必要になる。

(2) Google Maps APIキー取得
　Google Maps APIのSign Upサイトで利用許諾に同意した上で、GoogleMapsを導入したいサイトのURLのうち、最後のファイルそのものを除いたディレクトリまでを「My Web Site URL」に入力し、「Generate API Key」ボタンを押すとAPIキーが発行される。

(3) KsGMapの設置
　KsGMapのサイトからスクリプト本体(Version 1.02)とプラグイン(今回はマップ・ナビゲーション・プラグイン(Version 1.01)を使用)をダウンロードし、サイトの解説に従い設置。
　KsGMapは本体やプラグインがJavaScriptで提供され、これを呼び出すhtmlファイルと、地図情報のxmlファイル、マーカー類の画像データからなっている。htmlファイルとxmlファイルはサンプルが提供されているので、取得したAPIキーでサンプルがサンプルが表示できるか確認し、うまく表示できれば徐々にカスタマイズを加えていく、という方法をとった。

(4) カスタマイズの内容
　マップとカテゴリナビゲーション、アイテムナビゲーションのシンプルなサンプルという一番シンプルなサンプルからスタートした。

a. データ項目の変更
　まずは情報ウィンドウ(地図上のマーカーをクリックするとふきだしに表示される内容)の表示項目をおでかけMapの内容にあうようにxmlファイルのmapdataタグのセクションを変更。あわせて、情報ウィンドウ内の表示方法をテンプレートで定義するtemplateタグのセクションを変更。
　情報ウィンドウ内におでかけした時の写真を縮小して表示したいが、写真があるところとないところがある。このためhtmlファイルのheadタグ内にユーザー関数としてuser_KsGMapItem_makeHTML関数を定義し、写真がある時はIMGタグに展開し、ない時はIMGタグを生成しないようにした。

b. カテゴリ分け、マップ分け
　GoogleMapsでは一度に表示するマーカーの数が多くなると表示が遅くなる。HiLOGのこれまでの日記記事からおでかけMapに登録しようと思った記事は100近くあったので、カテゴリやマップをわけることにした。カテゴリは分けてあっても「全て表示する」という選択肢があるが、マップはマップ用のxmlファイル自体が別になり切り替えて表示していくことになるため全てを表示することはできない。このため、「関西・関東」といったエリアでマップをわけ、「遊ぶ・食べる・買う」というおでかけの内容でカテゴリをわけることにした。
　なお、KsGMapで複数のマップを切り替えながら使うには、マップ・ナビゲーション・プラグインの導入が必要。

c. マーカーの導入
　GoogleMapsで標準で提供しているマーカーはA〜Jまでで、数が少ないのでKsGMapのサイトの素材/関連ファイルのページで公開されているマーカーを導入。ついでにセンターマーカーも導入

d. 「このページのURL」の設置
　RESTに準拠するため「マップ情報（「このページのURL」「緯度／経度」）を加えたサンプル」を参考に、「このページのURL」が表示されるようにした。

(5) その他
　MovableTypeのテンプレートにGoogleMapsをそのまま組み込みたいと思ったのだが、GoogleMapsは文字コードがUTF-8限定になっている。HiLOGはEUCを使っているので組み込みは断念した。地図自体はUTF-8で作成しておいて、IFRAMEタグ等で呼び出すしかないかなあ思う。