[MovableType ]

MTPhotoCalendar で写真をカレンダー表示

Adobe Photoshop Albumというデジカメ写真管理ソフトには写真をカレンダー状に並べて表示する機能があります。Casioのデジカメでは液晶画面で写真一覧をカレンダー状に表示できます。写真一覧を時系列に並べるだけでも楽しいんですがカレンダーと組み合わせると、その日に行った場所や会った人、食べたものなどを月日に対応づけて一覧することができるので、日々の生活をありありと思い出してつい見入ってしまうほど楽しめます。

こうしたカレンダー型写真一覧をblogで作ってみたいと思っていました。blogの記事にも写真を載っけてますから、それを抜き出してカレンダー状に並べればよいわけです。きっと誰かが作っているだろうとは思いつつ、勉強を兼ねて作ってみました。 MovableTypeにはテンプレート記述でカレンダーを作る機能がありますから、ちょっとしたプラグインを書くことで実現できました。名付けて MTPhotoCalendar です。できあがったカレンダーはこんな感じになります。

このカレンダーを作るには、次のようにします。

1. MTPhotoCalendar plugin を組み込む。
2. PhotoCalendarのテンプレートを作成する。
3. アーカイブを再構築する。
4. 他のテンプレートへリンクを追加する

順に説明しましょう。MovableType 2.661で作成していますので、3.X系の方は違っているかもしれません。ご注意ください。(追記: MT4対応版を追加しました)

MTPhotoClandarの組み込み

まず下記からpluginをダウンロードします。このpluginはフリーで使っていただいてかまいません。

• MTPhotoCalander-0.1.zip
• MTPhotoCalander-0.2.zip (追記:MT4対応版)

これを展開して、その中の mt-photo-calendar.pl をMTをインストールした場所のpluginsディレクトリにコピーします。pluginの組み込みはこれで完了です。

PhotoCalendar のテンプレートを作成

MTPhotoCalendar pluginを組み込むと、次の4種類のタグがテンプレート記述に使えるようになります。

<MTIfCalendarImage width="nnn" height="nnn" > ～ </MTIfCalendarImage>

当該日にエントリに画像が存在すればタグ内部が有効になる。属性widthとheightでカレンダーの各マスに表示する画像の最大サイズを指定する。

<$MTPhotoCalendarImageSrc$>

当該日のエントリ中の画像のURL。

<$MTPhotoCalendarImageWidth$>

当該日のエントリ中の画像の幅。

<$MTPhotoCalendarImageHeight$>

当該日のエントリ中の画像の高さ。

これらのタグを使って、カレンダー用のテンプレートを記述します。ページ全体は月別アーカイブのテンプレートを使って作成するとよいでしょう。本文部分をカレンダーと置き換えます。カレンダー部分はMTのデフォルトの Main Index のテンプレートに含まれているカレンダー部分をそのまま使うとよいでしょう。私の場合はカレンダー部分は下記のようになります。テンプレートをカスタマイズしているので標準状態のものとは若干異なっています。赤色の部分が今回追加した部分ですので、この部分を同じように追加すればよいでしょう。

<table border="1" cellspacing="0" cellpadding="0">
<caption id="menu">
<$MTArchivePrevious$>
<a href="<$MTArchiveDate format="photo_%Y%m.html"$>">«</a>
</MTArchivePrevious>
<a href="<$MTArchiveLink$>" target="_top">
<$MTArchiveTitle$>
</a>
<$MTArchiveNext$>
<a href="<$MTArchiveDate format="photo_%Y%m.html"$>">»</a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="日曜日" align="center" width="100">
<span class="calendar-head" >日</span></th>
<th abbr="月曜日" align="center" width="100">
<span class="calendar-head">月</span></th>
<th abbr="火曜日" align="center" width="100">
<span class="calendar-head">火</span></th>
<th abbr="水曜日" align="center" width="100">
<span class="calendar-head">水</span></th>
<th abbr="木曜日" align="center" width="100">
<span class="calendar-head">木</span></th>
<th abbr="金曜日" align="center" width="100">
<span class="calendar-head">金</span></th>
<th abbr="土曜日" align="center" width="100">
<span class="calendar-head">土</span></th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" height="85"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1">
<a 
href="<$MTArchiveDate format="%Y_%m.html"$>#<$MTArchiveDate format="%Y%m%d"$>"
target="_top"><$MTCalendarDay$>
<MTIfCalendarImage width="100" height="75">
<br />
<img src="<$MTCalendarImageSrc$>" width="<$MTCalendarImageWidth$>"
height="<$MTCalendarImageHeight$>" border="0">
</MTIfCalendarImage>
</a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>

MTIfCalendarImageの内部でMTCalendarImageSrcを使うと、当該日のエントリ中の画像URLを取り出せます。 サイズを指定しているのは、画像の大きさを一定サイズにそろえるためです。別なタグを使って画像サイズを取り出しているのは、横長画像と縦長画像が混在する場合に、どちらの画像も指定した最大サイズに収まるように調整するためです。画像のサムネイルを生成しているわけではなく見ての通り表示サイズを調整しているだけなので、少々画質が粗くなったりするかもしれません。

こうしてできあがったテンプレートをMTに設置します。 MTの「ブログ編集メニュー」画面を開きます。「テンプレートの編集」を選び、「アーカイブに関連したテンプレート」にある「新しいアーカイブ・テンプレートを作る」を実行します。テンプレートの名前を「Photo Calendar Archive」とし、「テンプレートの中身」の欄に作成したテンプレートを貼り付けます。「保存」を押すとMovableTypeにテンプレートが組み込まれます。

次に「ウェブログの設定」を選び、「アーカイブの設定」を選びます。「アーカイブの種類」がMonthlyのところに「Photo Calendar Archive」が現れているはずです。「アーカイブ・ファイルのテンプレート」の欄に「photo_<$MTArchiveDate format="%Y%m.html"$>」と記入します。テンプレート欄は「Date-Based Archive」など既存の月別アーカイブのテンプレートにラジオボタンが付いている状態にしておけばよいでしょう。

アーカイブの再構築

ここまできたら、あとは「サイトの再構築」で「Monthly アーカイブだけ」を再構築してしばし待ちます。再構築が完了したら、「アーカイブディレクトリ/photo_200501.html」のような名前でPhotoカレンダーページができあがっているはずです。 「http://あなたのblogアーカイブパス/photo_200501.html」のようなURLを開いて試してみてください。

他のテンプレートへのリンク追加

ここにインデックスページなどからリンクを張るには、テンプレートで次のように書きます。このblogでは月別アーカイブへのリンクに並べて置いてみました。お試しください。

<a href="<$MTBlogArchiveURL$><$MTArchiveDate format="photo_%Y%m.html"$>">
Photo Calendar</a>

以上のステップを全部完了すれば、これまでに投稿したblog記事の写真を全部カレンダー状に表示することができます。さらに、写真付きの記事を日々追加していくだけで自動的にPhoto Calendarが作られます。ただし、再構築の時間がだいぶ余計にかかるようになってしまいますので、ご注意ください。

写真付きカレンダーで今までの自分の書いた記事を振り返ってみると、単に今までの記事が縦に並ぶアーカイブページを眺めるのとは違った楽しさがあります。人のカレンダーを見ても面白くないでしょうから、ぜひご自分のblogでお試しください。