3年前（MT3.35）と今回（MT5.02）と構築環境に違いはあるものの考え方は同じで、通常のブログ記事アーカイブとは別に、カスタムフィールドに入力した住所情報から Mapper_Plugin で Google Maps を表示するブログ記事アーカイブを作っておき、個別アーカイブページの地図表示のリンクからこの Google Maps のアーカイブページを表示させるという方法です。

前回はサブウィンドウで Google Maps を表示させましたが、今回は写真をオーバーレイ表示する Lightbox の jQuery 版、jQuery lightbox を利用していることから、Google Maps も同じようにオーバーレイ表示したいと考え、画像だけでなく HTML もオーバーレイ表示できる ThickBox を利用することにしました。

しかし、Google Maps の場合はすんなり行かず、いくつかの Tips がありましたので、その覚え書きです。

試しに ThickBox のデモサイトで使われている jQuery 1.1.3.1 をダウンロードして入れ替えてみると正常に表示されます。ググってみると、既に ThickBox の開発が終了していて、今回使用している jQuery 1.4.2 や 1.3.x に対応してないことがわかりました。同時にその解決策も紹介されていて、thickbox.js の79行目

TB_TempArray = $("a[rel="+@imageGroup+"]").get();

の @ を取り、

TB_TempArray = $("a[rel="+imageGroup+"]").get();

と書き替えれば rel 属性を付けてグループ化することができました。

参考サイト：「class="thickbox" に rel をつけると画像が表示されない」(Development memo)

次に、これも Google Maps 表示以前の問題ですが、Mac 版 Firefox で表示すると拡大表示の周りがブラックアウトされません。でもこれは単にダウンロードすべきファイルが足りなかっただけ。ThickBox のサイトの Download の項には thickBox.js もしくは thickbox-compressed.js、ThickBox.css、そして loadingAnimation.gif しかないのですが、How to Implement ThickBox の項を見ると、As of version 3.1 you will also need to update the path to the macFFBgHack.png in the thickbox.css file. と書かれています。英語は読めないのですが(笑)、macFFBgHack.png をダウンロードして thickbox.css と同じ場所に置いたら OK でした。

そしていよいよ、ThickBox のウィンドウ内に Google Maps を表示してみます。ThickBox の iFramed Content として表示させるので、Google Maps 用のブログ記事アーカイブのパスを map/<$mt:EntryID pad="1"$>.html とすると、

<a href="map/<$mt:EntryID pad="1"$>.html?width=750&amp;height=570&amp;KeepThis=true&amp;TB_iframe=true" class="thickbox">地図を表示</a>

という具合になります。しかし、いざ表示してみると、ThickBox の領域内で表示した Google Maps の中心が大きくずれています。さらに Internet Explore 8 では地図が一部グレーに塗りつぶされた状態になっています。Thickbox で Google Maps は無理なのかなと思いつつ、これもググってみることに。

まず見つけたのが「MovableTypeでGoogleMapsを住所からthickboxで表示する」という記事。まさにいまやろうとしていることです。あらかじめページの下部でインラインフレームで Google Maps を読み込んで style="display: none;" で非表示にしておき、iFramed Content ではなく Inline Content として ThickBox のウィンドウの中にインラインフレームごと表示させるという方法のようです。
しかし、Firefox や Safari ではちゃんと Google Maps の中心が表示されるのですが、Internet Explorer では相変わらず中心がずれたままです。

さらにググってみて、特に Movable Type に関しての記事ではないのですが「Google MapをThickBox上に表示する方法 - とあるWEBクリエイターのblog」という記事が大変参考になりました。

ThickBox での表示方法は最初に設定した iFramed Content 方式に戻してページ下部での Google Maps の読み込みはやめ、ここに書かれているコードを参考に Mapper_Plugin の 131行目からの Google Maps 表示部分のソースコードを以下のように書き替えました。

my $preamble_tmpl = <<'EOT';
<script type="text/javascript" src="http://maps.google.com/maps?<TMPL_IF NAME="language">hl=<TMPL_VAR NAME="language">&amp;</TMPL_IF>file=api&amp;v=2&amp;key=<TMPL_VAR NAME="google_maps_key">" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
function attachOnLoad(func) {
    window.attachEvent ?
	window.attachEvent('onload',func) : 
	window.addEventListener('load',func,false);
}
function attachBeforeUnload(func) {
    window.attachEvent ?
	window.attachEvent('onbeforeunload',func) : 
	window.addEventListener('beforeunload',func,false);
}
function generateGMap(mapid, address, lat, lng, zoom, maptype) {
	var check_flame_set = function(){
		if(!parent.document.getElementById("TB_window")){
			clearInterval(timerID);
			show_map();
		}else if(parent.document.getElementById("TB_window").style.display=="block"){
			clearInterval(timerID);
			show_map();
		}
	}
	var timerID = setInterval(check_flame_set, 500);
	var show_map = function(){
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById(mapid));
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.addControl(new GOverviewMapControl(new GSize(180,150)));
		var center = new GLatLng(lat, lng);
		if (typeof maptype == 'string') maptype = eval(maptype);
		map.setCenter(center, zoom, maptype);
		var marker = new GMarker(center, G_DEFAULT_ICON);
		map.addOverlay(marker);
		var html = '<div style="width:12em;font-size:small">'+address+'</div>';
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
		});
	    } else {
		document.getElementById(mapid).innerHTML = '<p>The Google Map that should be displayed on this page is not compatible with your browser. Sorry.</p>';
		}
	}
}
attachBeforeUnload(function(){GUnload()});
//]]>
</script>
EOT

これで当初の思惑どおり、ThickBox で Google Maps を表示させることが出来ました。

以前メールで送られてきた参加者属性によると、40歳代は約1割。この業界の中心は20歳代〜30歳代なんですね。そして、8割以上が関東圏からの参加。今までもそうでしたが、島根からは私一人です。行きたいイベントやセミナー等があると快く行かせてもらえるWillさんいんに感謝です。

今回のイベントは「Corder's Higher」ということで、私は行けなかったんですが2007年5月に開催された "CSS Nite LP3 「Corder's High」" の続編として、コーディングにフォーカスした内容で、特に今回は、スピードコーディングや、今流行の jQuery、そして HTML5 と CSS3 について取り上げられるということで、非常に興味深い内容でした。

続いてのセッションは、大藤幹氏とスキルパートナーズ 大杉充氏による "XHTML&CSS超高速コーディング術 LIVE!"。
テンプレートの活用やシャドウ・コーディングによりコーディング作業自体を速くするということと、普段これが最大のネックなんですが、手戻りを最小限に抑えるということ。今回のセッションの元となる書籍『XHTML&CSS超高速コーディング術』を事前に読んでいましたので、内容はよくわかりました。ただ、LIVEコーディングは正直眠かった。時間が限られてる中での実践は思うように進まなかったりで難しいですよね。

1回目の休憩をはさんで、マインドフリー 徳田和規氏による "Coding with jQuery"、続いて 24-7 長谷川広武氏による "UI実装におけるコーディングあれこれ"。
今や JavaScript はユーザビリティの向上や IE 対応のために必要不可欠と言ってもよいくらいの存在ですが、jQuery などのライブラリによってとても簡単に使えるようになりました。私はこれまで既存の公開されているライブラリを、様々な環境で利用可能かどうかを検証しながら、これは使えると思ったものを利用させていただいてる程度なのですが、これからは jQuery 等も勉強して自分なりにいろいろと使ってみたいと思いました。

2度目の休憩の次は、ドーガ 石本光司氏による "Webパフォーマンス最適化のためのコーディング手法"。
先日4月9日から Google が表示速度をランキングに加味しはじめました。今は google.com だけですが、そのうち日本語サイトも適用されるようになるでしょう。また、ユーザーにストレスを与えないためにも表示速度の改善は重要です。そのために、コーディングレベルでできる改善策として HTTP リクエストを減らすということ。つまり、画像や CSS、JavaScript 等、HTML に読み込むファイル数を極力少なくするということですね。
その中で話に出てきた「CSSスプライト」。ナビゲーションボタンなどを、1枚の画像を CSS で表示位置をずらしながら、複数の要素の背景として表示する手法で、過去に私も使ったことがあります。しかし、テキストを画面から消す "オフレフト"と呼ばれるような手法で実装すると、画像が無効で CSS が有効な場合に何も表示されなくなってしまいますので注意が必要だと思います。

続いて、ピクセルグリッド 高津戸壮氏、AGN 福田泰雄氏による "CSS3 for tomorrow [ver.LP9]"。
CSS3 はまだブラウザの対応が限られているのですが、非常に面白くて楽しく、便利です。今現在、div要素や背景画像を駆使して実現している複雑なデザインが、CSS3 ではおそろしく簡単に実現できます。これからは CSS3 が使えるところは積極的に使い、CSS3 に対応していないブラウザではスタイリッシュなデザインは表現できないけど、情報はきちんと伝えましょう（例えば先進的なブラウザでは角丸になるが、IE は直角など）という考え方でコーディングするのもありですね。既にいくつかのサイトではそのように実装されていますし。
ただ、多くの方が IE を利用してるから難しいんですよね。クライアントも IE を利用してるからデザイン通りになってないじゃないか！ってことになりますし...。

3度目の休憩が終わって、次はピクセルグリッド 小山田晃浩氏とサイバーガーデン 益子貴寛氏による "ノリとツッコミで進める HTML5 ライブコーディング"。
XHTML 1.0 で書かれたページを HTML5 に書き換えるライブコーディングをとおして、HTML5 のいくつかのポイントを知ることができました。プラグインなしで動画が再生できるとうのは有名ですが、より構造を明確にすることが可能になるという点で、早く標準的に使えるようになって欲しいと思いますが、これも IE が非対応。次期 IE9 では対応するということですが、当然 IE6 〜 IE8 もしばらくは使い続けられるわけです。IE で HTML5 を使えるようにする JavaScript "html5.js" を使えば、何とかなるんですが、JavaScript を無効にしている環境を考えると悩ましいです。

最後のセッションは、羽田野太巳による "今日から使えるHTML5 API"。
HTML5 API によって様々なウェブ・アプリケーションが作れるようになるという話。既に Youtube が HTML5 動画プレーヤーを試用運転していたり、また、Gmail でのファイルの添付がドラッグ＆ドロップで可能になるなど、HTML5 API によりウェブとデスクトップの境目が無くなりつつある現状。
内容的には難しいセッションでしたが、このようにユーザー体験が向上すると、当然クライアントからそのようなリクエストが来るわけで、そうなると我々コーダーは HTML5 API の知識が必要になってくるということを聞いて、こりゃあ、年齢が...なんて言ってられないなって、正直焦りを感じました。

最後はこのイベントに合わせて企画されたコーディングコンテストの審査発表。私は年度末のまっただ中で、全く参加する余裕がなかったのですが、この審査の解説も行われる、HTML5 と CSS3 にフォーカスした "CSS Nite LP, Disk 9.2（reprise）" もまた興味深いイベントです。