並べ替え可能な表で作るアーカイブインデックス
目次
Movable Type のアーカイブインデックスは、デフォルトテンプレートだと ardhives.html で出力されるファイルで、ブログサイトのサイトマップのようなものです。
今回は、2008-08-27 時点でこのブログで導入している並べ替えが可能な表（テーブル）形式のアーカイブインデックス（All Entries）の作り方を紹介してみます。けっこう気に入っているので。
このアーカイブインデックスの特徴とメリット
このアーカイブインデックスには以下のような特徴とメリットがあると思います。
- すべてのブログ記事の一覧性が高い
- ブログ記事タイトル、投稿日、カテゴリで並べ替えができる
- サクッと概要が読める
- 他のブログであまり見たことがない（自己満足）
このアーカイブインデックスのデメリット
- ブログ記事がかなり多いサイトには向いていない
使用するライブラリの準備
このアーカイブインデックスでは、jQuery と以下のような jQuery プラグインを使用します。
これらのリンクから、「 jquery.tablesorter_0.zip 」と「 facebox-1.2.tar.gz 」をダウンロードし、解凍します。
次に、解凍してできた facebox のフォルダの中に、facebox.css というファイルがあります。その中で、絶対パスで背景を設定している部分を 5 箇所、以下のように変更しておいてください。こうしておくと、Movable Type の公開ディレクトリの設定に影響されなくなると思います。
[変更前] background:url(/facebox/b.png);
[変更後] background:url(b.png);手順を簡単にするため、解凍したフォルダを丸ごと Movable Type のブログ公開ディレクトリにアップロードします。tablesorter は今回使用しないファイルもたくさん含まれていますので、不要な方は削除してください。
これで準備完了です。
アーカイブインデックステンプレートのカスタマイズ
今回は、Movable Type 4.2 のデフォルトのテンプレートを使用します。あらかじめバックアップはとっておいてください。
デフォルトテンプレートの削除
はじめに、デフォルトのアーカイブインデックス・テンプレートの 25 行目くらいから 153 行目あたりの以下のソースを削除します。
（省略）
削除した後のテンプレートは次のようになります。なお、改行は削除して詰めました。
<$mt:Include module="HTMLヘッダー"$>
<$mt:BlogName encode_html="1"$>: アーカイブ
">
<$mt:Include module="バナーヘッダー"$>
アーカイブ
（この間を削除）
<$mt:Include module="サイドバー"$>
<$mt:Include module="バナーフッター"$>
jQuery などの読み込み
次に、jQuery などのライブラリを読み込みます。今回は、jQuery については Google AJAX API を使って読み込みます。
<$mt:Include module="HTMLヘッダー"$> の次に以下のソースを追加し、必要な JavaScript と CSS を読み込みます。
tablesorter のスタイルは、ここで使用した Blue の他に Green が tablesorter/themes ディレクトリの中に入っています。
アーカイブインデックステンプレートの作成
先ほど削除した部分に、表形式でブログ記事をリストアップする以下のようなテンプレートを書きます。
<$mt:BlogEntryCount$>
Title (<$mt:GetVar name="entry_count"$> entries)
Data
Category
<$mt:EntryDate format="%Y.%m.%d"$>
<$mt:EntryTitle$>
[preview]
<$mt:CategoryLabel$>
MT タグの説明は省略しますが、いくつか順を追って説明します（主に上記ソースの青字部分）。
頭で変数 entry_count にすべてのブログ記事数を代入しています。
<$mt:BlogEntryCount$> table 要素の id="myTable" は変更することができますが、変更する場合は head に書いた以下の JavaScript もそれに合わせて変更してください。
ブログ記事をリストアップするソースを mt:Entries タグで囲みます。このとき、lastn モディファイアの値に変数 entry_count （ブログ記事数）を設定するとこにより、すべてのブログ記事をリストアップすることができます。
次に、表の 2 列目に当たる td 要素を説明します。
ブログ記事ページにリンクしたブログ記事タイトルを表示します。
<$mt:EntryTitle$>div 要素にブログ記事の概要を出力させますが、display: none; で非表示にしておきます。その div 要素（のid）に対して張った直前の a 要素（ [preview] ）に rel="facebox" を追加することにより、リンクをクリックしたときに facebox が起動し、オーバーレイで表示することができます。
[preview]
3 列目に当たる td 要素で、ブログ記事につけららたカテゴリを、親カテゴリから順に > で区切って出力します。
<$mt:CategoryLabel$> 完成したテンプレートファイルは以下のようになります。
このテンプレートを再構築した結果、以下のように表示されました。表のヘッダー（ th 要素部分）をクリックすると、昇順、降順が変更できます。
[preview] をクリックすると、ブログ記事の概要がオーバーレイ表示され、「続きを読む」をクリックすると、ブログ記事の個別ページへ移動できます。
いかがでしょう。ぜひお試しください。