Movable TypeとGoogle Maps APIを組み合わせてコンテンツを掲載している沖縄旅日記、Shimalogを、少し改良してみました。メモも兼ねて記事にまとめておきます。

個別記事ページに地図を掲載

記事で扱っている場所を分かりやすく示すため、個別記事ページでもGoogle Mapsを表示するようにしました。地図を見るためにわざわざGoogle Mapsに移動しなければならないのは面倒ですよね。

個別記事ページで指定された緯度・経度をマップの中心にし、一定のズームレベルでGoogle Mapsを表示するJavaScriptの関数（mapLoadと命名）を新たに作成しました。

mt-search.cgiを用いて関連する記事を表示

個別記事ページに表示させるようにした地図をさらに活用するため、表示している記事に関連する記事（地理的に近い記事）を同じ地図内でマッピングし、関連する記事に容易にアクセスできるようにしました。

関連する記事は、「タグ」を用いてmt-search.cgiで抽出しています。/（MTインストールディレクトリ）/search_templates/内に、検索結果をXMLとして出力するテンプレートを作成し、mt-config.cgiで代替テンプレートとして登録しました。そして、JavaScript内でmt-search.cgiを呼び出す際、引数で登録した代替テンプレートを使用するように指定します。

MTのシステムテンプレート内にある「検索結果」テンプレートをカスタマイズするのではなく、代替テンプレートとしたことにより、通常のキーワード検索も併用することが可能です。

• サンプル記事
• 検索結果ページのカスタマイズ（シックス・アパート）

• ※ Web Designing 2009年1月号に掲載された事例を応用して作成しました。
• ※ Shimalogでは、現在キーワード検索は提供していません。

地域の切り替え機能を追加

従来よりGoogle Mapsを表示していたShimalogトップページですが、沖縄県全体を表示するようズームレベルを設定していたため、海の中にポツンとアイコンが立っているようで、地図として分かりにくい状況でした。

そのため、ガイドブック等と同じように沖縄県を3ブロック（本島周辺・八重山・宮古）に分け、アクセス時は沖縄本島周辺を地図の中央にセットするようにしました。そして、ユーザーの希望に応じて表示地域を変更（マップの中心を移動し、ズームレベルを変更）できるよう、moveCenter関数を新たに作成しました。

またファーストビューにGoogle Mapsが入るよう、コンテンツ掲載順の入れ替えを行いました。

• サンプル

まとめ

Web Designing等に掲載された事例を研究し自分なりに応用すると、より使いやすいコンテンツを作ることが出来ると感じました。また、Movable Typeは工夫次第で新しいものが生み出せる可能性を持っていることが分かります。今後も小さな改良や実験を行っていきたいと思っています。