ウェビンブログ » google http://blog.webbingstudio.com 札幌のWebデザイナー・カスタマイズアドバイザー WebbingStudioのよしなし語り Fri, 30 Jul 2010 00:11:50 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 地図追加機能を投稿画面に標準で実装しているCMS http://blog.webbingstudio.com/2010/01/entry_map.html http://blog.webbingstudio.com/2010/01/entry_map.html#comments Wed, 27 Jan 2010 07:25:54 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1300

前回の記事で書いた通り、地図を追加する機能を標準で持っていないMovableTypeに、それを実装しようとすると、この記事を書いた時点では有力なプラグインがなく、面倒なカスタマイズが必要になります。

あんな長いチュートリアルを書いておいてなんですが、どうしてもMovableTypeを使わなければならない案件でないなら、標準で実装しているCMSを提案した方が、予算・工数の面からも確実というものです。

私が把握している、投稿画面に地図追加機能を実装しているCMSは下記の通りです。

  1. a-blog cms
  2. concrete5
  3. bingo!CMS
  4. Jimdo

このうち、bingo!CMSはYahoo!マップ、それ以外はGoogleMapsのAPI Keyを取得する必要があります。

地図の目的地を検索し、中心に持ってきて吹き出しのコメントを入力する、という操作感はどれもほぼ同じです。
尚、冒頭のスクリーンショットはa-blog cmsの画面です（私の本サイトの投稿画面なので、デフォルトとはカラーリングが異なります）。

ただし、四つのCMSは設計思想が微妙に異なっています。
a-blog cmsはMovableType・WordPressと同様に、カテゴリーや時系列のアーカイブでコンテンツを出力する更新方法が基本設計ですが、残りの三つは実際に表示されているコンテンツ内をクリックして、ホームページビルダーやDreamweaverのように、直感的に編集させる更新方法が基本になっています。

コンテンツが少なく、各ページの構成が異なるサイトであれば下の三つの方が構築しやすいですし、前の記事のような、入力フォーマットがが決まっているコンテンツを大量に生成するサイトであれば、a-blog cmsが適していると考えられます。

個人的には、MovableType・WordPressの代替として選択するのであれば、管理画面のカスタマイズのしやすさの点からも、機能面の近さからもa-blog cmsをお勧めしたいところです。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2010/01/entry_map.html/feed 0 MovableTypeでGoogleMapsを住所からthickboxで表示する http://blog.webbingstudio.com/2010/01/movabletype_googlemaps_thickbox.html http://blog.webbingstudio.com/2010/01/movabletype_googlemaps_thickbox.html#comments Sat, 23 Jan 2010 06:39:15 +0000 WebbingStudio http://blog.webbingstudio.com/?p=1281 建物や場所を紹介するサイトをCMSで構築する場合、管理画面にGoogleMapsなどの地図をプレビューして直感的に更新したいところです。

需要が高いと思いますが、MovableTypeは意外にも、2010年1月の時点でこの機能を追加できる有力なプラグインがないようです。
手作業でのカスタマイズ方法は下記ページで紹介されていますが、投稿画面編集・GoogleMapsの座標取得の知識が必要です。

Movable Typeの記事投稿画面にGoogle Mapsを表示｜Skyward Design

もうひとつの選択肢として、「Mapper」プラグインを使って、管理画面で入力した「住所」から地図を自動表示させる方法があります。
今回はさらにjQueryプラグイン「thickbox」を連携させ、モーダルポップアップで表示するカスタマイズを紹介します。

デモサイト

本記事のデモサイトはこちらです。（ベース：MovableType5）

Mapperプラグインデモ ＊ 道民部がたむろしている店

時間ないので店は数件しか登録してないですが…w

お店の個別ページで、「地図を表示する」リンクをクリックすると、住所を参照した地図がthickboxのポップアップで表示されます。
住所欄には正規版の機能であるカスタムフィールドを使っていますが、追記欄をうまく活用すればMTOSでも可能です。

注意点

住所から検索・変換をしているため、正確性にやや難があります。
（デモサイトの場合、串鳥の座標が東急の真上になってしまってます）
吹き出しの内容も詳細指定するなど、完璧さを重視する場合はGoogleの公式コードを直接書き込むなど、別の方法を検討してください。

プラグイン・ライブラリを用意する

まず、カスタマイズに必要な素材を用意します。

「Mapper」は、任意のMTタグ内に書かれた[map:住所]という「Mapタグ」を地図に変換するMovableTypeプラグインです。

http://code.google.com/p/ogawa/wiki/Mapper_Plugin

「thickbox」は、リンクに特定のclassを指定するだけで、画像やHTMLをモーダルポップアップさせるjQueryのプラグインです。

http://jquery.com/demo/thickbox/

jQuery本体も、まだ使ったことがない場合はこちらからダウンロードしてください。

http://jquery.com/

thickbox自体の設置方法はここでは割愛します。必要なファイルをサーバーにアップロードしておいてください。

GoogleMaps API Keyを入手する

Mapperを利用するには、API Keyを取得する必要があります。

下記ページで利用するサイトのURLを登録し、キーを取得してください。

http://code.google.com/intl/ja/apis/maps/signup.html

プラグインを有効化する

MovableType内にMapperをアップロードします。
管理画面内のMapperの設定画面に入ると、GoogleMaps API Keyを求められます。さっき入手したキーをコピペして保存してください。

住所のカスタムフィールドを作成する

住所欄のカスタムフィールドを作成します。
ここでは「CFaddress」としました。ここのベースネームを変更した場合や、追記を利用する場合は、以降のGoogleMapsを呼び出すテンプレートのMTタグを読み替えてください。

ブログ記事テンプレートを２つ作る

Mapperで生成される地図はJavaScriptを多用しています。このため、コンテンツ内のMETAタグの指定や、今回使うthickbox等のjQueryライブラリと衝突しやすいです。
それを防ぐために、地図だけインラインフレームで呼び出します。

MovableTypeは同じアーカイブで出力URLが違うページを複数作ることができるので、これを利用して「ブログ記事テンプレート」を２つ設定します。

画面のように設定すると、

ブログ記事
[ブログのURL]/[カテゴリー]/post-[エントリーID].html
Google Maps
[ブログのURL]/[カテゴリー]/map-[エントリーID].html

という、二種類のHTMLが記事ごとに生成されることになります。

コンテンツ用テンプレートの作成

「ブログ記事」という名前のテンプレートの方が、コンテンツ（地図を呼び出す本ページ）となります。
HTMLソースを書き、head内に以下のコードを追加してください。

<link rel="stylesheet" type="text/css" href="[ファイルへのパス]jquery.thickbox.css" media="All" />

<script type="text/javascript" src="[ファイルへのパス]jquery.js"></script>
<script type="text/javascript" src="[ファイルへのパス]jquery.thickbox.js"></script>

地図を表示するポップアップのリンクを表示したい個所に、以下のようにコードを書きます。
a要素内のURLの詳しい記述方式については、thickboxのページ内の「Inline Content」の項を参照してください。

<mt:If tag="CFaddress">
<a href="#TB_inline?width=600&height=480&inlineId=mapframe&modal=true" class="thickbox">&raquo;&nbsp;地図を表示する</a>
</mt:If>

さらにページの末尾、bodyの閉じタグの上あたりに、以下のコードを書きます。
フレームのwidthとheightは任意調整してください。

<mt:If tag="CFaddress">
<div id="mapframe" style="display: none;">
  <p class="map-title"><$mt:EntryTitle encode_html="1"$>の周辺地図</p>
  <iframe src="map-<$mt:EntryID$>.html" width="600" height="400" marginwidth="0" marginheight="0"></iframe>
  <p class="map-close"><input type="submit" value="×閉じる" onclick="tb_remove();" /></p>
<!-- /#mapframe --></div>
</mt:If>

重要なのは、インラインフレームの内部HTMLを指定している部分です。

map-<$mt:EntryID$>.html

上記のようにEntryIDタグを仕込むことで、２つ目のエントリーテンプレートを呼び出すことになります。

ポップアップ用テンプレートの作成

「Google Maps」という名前のテンプレートの方は、ポップアップ用です。以下のコードが全てになります。
地図のwidthとheightは任意調整してください。

<html>
<body style="margin: 0; padding: 0;">
<mt:If tag="CFaddress">
<mt:Mapper width="600" height="400" zoom="18">
  <p>[map:<$mt:CFaddress convert_breaks="0"$>]</p></mt:Mapper>
</mt:If>
</body>
</html>

Mapperで拡張されたMTタグを使い、カスタムフィールドの「住所」を表示します。
段落でマークアップさせないよう、「convert_breaks」モディファイアに「0」を指定しておいた方が安全です。

METAタグなどは敢えて指定しない方が、各ブラウザでちゃんと表示されるようです。

最後にテンプレートを再構築し、リンクをクリックするとポップアップが出るか確認してください。


TwitterTwitterで記事を紹介して下さい（-人-）]]> http://blog.webbingstudio.com/2010/01/movabletype_googlemaps_thickbox.html/feed 2