MovableTypeの月別アーカイブ(Monthly Archive)は、標準のmain indexテンプレートでは、月ごとに1行づつ表示が追加されていく。これを回避するためにプルダウンメニューにするカスタマイズを採っているところが多いが、むるダウンメニューでは結局メニューを表示するとずらっと表示されてしまうので別の方法がないかとWebを調べ、ArchiveDateHeaderプラグインとMTPerlScriptプラグインんを使って次のように表示するよう変更した。
月別アーカイブ一覧の表示方法を変更
参考にしたサイトは以下のとおり。
Junkline : MT の過去ログリンク表示を nDiary （ごにょり済み）風にで、MTArchiveListタグ内で年が変わったときにヘッタを表示できる
ArchiveDateHeaderプラグインの存在を知った。
また、ぬりかべブログ : ArchiveDateHeader Plugin の応用でArchiveDateFooterに相当することを、MTPerlScriptスクリプトを使って実現する方法を知った。この内容はArchiveDateHeaderプラグインを公開しているサイトのコメントとして掲載されていたとのこと。
具体的なカスタマイズの内容は以下のとおり。
(1) ArchiveDateHeaderプラグインを導入
Adam Kalsey : Archive Date Header Pluginから、ArchiveDateHeader.zipをダウンロード・解凍する。
ArchiveDateHeader.plを(MT)/plugins/にアップロードし、属性を705に変更する。
(2) MTPerlScriptスクリプトを導入
Brad Choate: PerlScript Pluginから、mtperlscript-1_4.zipをダウンロード・解凍する。
perlscript.plを(MT)/plugins/に、perlscript.pmを(MT)/extlib/bradchoate/にアップロードし、両方の属性を705に変更する。
(3) main indexテンプレートの月別アーカイブ一覧の箇所を変更
以下のとおり変更した。
<div class="sidetitle">
これまでの記事（月別）
</div>
<div class="side">
<TABLE border="0" cellpadding="3">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader>
<tr><td valign="top" width="25%">
<b><$MTArchiveDate format="%Y"$></b>
</td><td valign="top" width="75%">
</MTArchiveDateHeader>
<a href="<$MTArchiveLink$>" title="<$MTArchiveCount$>件の日記"><$MTArchiveDate format="%m"$></a>
<MTPerlScript>
$a = '<MTArchivePrevious><$MTArchiveDate format="%Y"></MTArchivePrevious$>';
$b = '<$MTArchiveDate format="%Y"$>';
if ($a ne $b) {print "</td></tr>"};
</MTPerlScript>
</MTArchiveList>
</table>
</div>
yhiroaki (2006年03月25日 17:26)
| 
(1)
http://yhiroaki.s45.xrea.com/mt/mt-tb.cgi/981
画面イメージ
| �．┘螢∩�択 | おでかけの行き先を「関西・関東」等のエリアをプルダウンメニューから選択する。 |
| �▲献礇鵐訌�択 | おでかけのジャンルを「遊ぶ・食べる・買う」からプルダウン・メニューで選択する。 「遊ぶ」は観光地・イベントなど、「食べる」はレストランなどその場所で食べる施設、「買う」はお菓子・お土産などお買い物スポット。 |
| �９圓�先 | おでかけの行き先 |
| �ぅ泪奪�/サテライトの選択 | 「マップ」ボタンを押すと地図形式で、「サテライト」ボタンを押すと衛星写真で地図が表示される。 画面イメージの右下が地図形式、左上が衛星写真。 |
| �ッ録泙琉榮亜Τ搬隋�縮小 | 矢印で地図の表示エリアが移動し、上下のスライドバーで地図が拡大・縮小する。 |
友人の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タグ等で呼び出すしかないかなあ思う。
HiLOGを開設した2004年1月からyhiroaki.s45.xrea.comというxreaのレンタルサーバーの標準ドメインを利用してきたが、今回、hilog.netという独自ドメインを取得することにした。理由は今年の年賀状に「育児日記更新中!」としてHiLOGの画面を小さくキャプチャして紹介しようとしたところ、URLが長いと画面キャプチャのサイズとの兼ね合いでバランスが悪かったから。もう1つ、去年の年賀状でも画面キャプチャはせずURLの紹介だけをしたところ、結構年配の親類のひとからHiLOGを見たというメールをもらって、URLをタイプしてもらう負担を減らしたいという思いもあった。
ドメイン取得にはVALUE-DOMAINのドメイン登録代行サービスを利用した。.netや.comドメインは年間990円と安価に取得できる。VALUE-DOMAINはHiLOGで利用しているレンタルサーバーのXREAと提携関係にあるので設定がスムーズだし、XREA以外のレンタルサーバー等へのドメインの持ち出しもOKになっている点もいい。
VALUE-DOMAINでは独自ドメインを取得する方法以外にhogehoge.xrea.jpのようなサブドメインであれば無料で取得できる。友人が運営しているMattani Logではこの方法を採っている。サブドメインにすることも考えたけれど、レンタルサーバーをXREAから変更する時に足かせになったら嫌だなあと漠然と思って独自ドメインを取ることにした。このあたりはまあ好みというかその時の気分なんだろうと思う。
独自ドメインをとった後の選択肢は2つある。
■選択肢1：以前のyhiroaki.s45.xrea.comでのアクセスを独自ドメインに転送する方法
この方法の場合、まずVALUE-DOMAINのサイトにログインし、[ドメイン操作]-[DNSレコード/URL転送の変更]をクリックし、取得したドメインを選択した後、[DNS情報変更]画面の[自動設定]で自分がレンタルサーバーで利用しているXREAのサーバー名を指定し、[変更]ボタンを押す。
続いて、XREAの管理画面にログインして、[マイドメイン利用]-[ドメインウェブ]をクリックし、[ドメイン情報入力]の[Main(public_html/):]のテキストボックスに取得したドメインを入力しドメイン設定]ボタンを押すことで設定操作は完了。
■選択肢2：逆に独自ドメインをyhiroaki.s45.xrea.comに転送する方法
VALUE-DOMAINでの設定操作は選択肢1と同じ。
XREAの管理画面にログインして、[マイドメイン利用]-[ドメインウェブ]をクリックし、[ドメイン情報入力]の[Main(public_html/):]のテキストボックスに「blank」を入力し、[Sub1(public_html//)]などの未使用のエリアに独自ドメインを入力し、転送先にyhiroaki.s45.xrea.com上のURL、HiLOGの場合であれば「http://yhiroaki.s45.xrea.com/mt/」を入力する。さらに同じエリアの[ディレクトリを作成しない]チェックボックスにチェックを入れる。最後に[ドメイン設定]ボタンを押すことで設定操作が完了。
どちらの場合も数時間〜48時間程度でDNSへの反映等がおこなわれるとのことだ。今回は選択肢2の方法を取ることにした。yhiroaki.s45.xrea.comドメインで検索エンジンがそこそこ拾ってくれているので、選択肢1を選んだときにどう影響するかわからないというのが大きな理由だ。もう1つの理由は、これまで「http://yhiroaki.s45.xrea.com/mt/」で運用してきたが、独自ドメインでhilog.net/mt/になるよりは、hilog.netだけのほうがいいと考えた。選択肢2であればそれが可能だ。
選択肢2の欠点は、URL転送方式なのでブラウザのURL欄にはyhiroaki.s45.xrea.comドメインが表示されること。HiLOGのデータは再構築しているのでHiLOG上の主なリンクはhilog.netに変わっているけれど、そのリンクをクリックしても結局yhiroaki.s45.xrea.comに転送されてしまうためだ。まあこれは選択肢2とはそういうものだと思うしかない。
選択肢1/2によらない課題として、現時点ではmt.cfgを変更していないのでトラックバックURL等はyhiroaki.s45.xrea.comドメインのものが表示されている。
もう1つ、日記の本文で別の日の日記にリンクしている内容については再構築してもリンクが更新されずyhiroaki.s45.xrea.comドメインのままになっている。1つ1つ手作業で修正する気にはなれないので、バックアップを取った上で置換すべきかどうか検討中。
この2つの課題については対処方法が決まれば備忘録としてまたHiLOGに書きたいと思う。
