並べ替え可能な表で作るアーカイブインデックス

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:Ignore>
 <!-- List of monthly archives, if monthly archives are enabled -->
</mt:Ignore>
<mt:IfArchiveTypeEnabled archive_type="Monthly">
 （省略）
 </mt:ArchiveList>
 </div>
</mt:IfArchiveTypeEnabled>
</mt:Ignore>

削除した後のテンプレートは次のようになります。なお、改行は削除して詰めました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
 <$mt:Include module="HTMLヘッダー"$>
 <title><$mt:BlogName encode_html="1"$>: アーカイブ</title>
</head>
<body id="<$mt:BlogTemplateSetID$>" class="mt-archive-index <$mt:Var name="page_layout"$>">
 <div id="container">
 <div id="container-inner">
 <$mt:Include module="バナーヘッダー"$>
 <div id="content">
 <div id="content-inner">
 <div id="alpha">
 <div id="alpha-inner">
 <h1 id="page-title" class="archive-title">アーカイブ</h1>

 （この間を削除）

 </div>
 </div>
 <$mt:Include module="サイドバー"$>
 </div>
 </div>
 <$mt:Include module="バナーフッター"$>
 </div>
 </div>
</body>
</html>

jQuery などの読み込み

次に、jQuery などのライブラリを読み込みます。今回は、jQuery については Google AJAX API を使って読み込みます。

参考：inputlog - Google AJAX APIを使ってjQueryを読み込む

<$mt:Include module="HTMLヘッダー"$> の次に以下のソースを追加し、必要な JavaScript と CSS を読み込みます。

 <link rel="stylesheet" href="<$mt:BlogURL$>facebox/facebox.css" type="text/css" />
 <link rel="stylesheet" href="<$mt:BlogURL$>tablesorter/themes/blue/style.css" type="text/css" />
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">google.load("jquery", "1.2");</script>
 <script type="text/javascript" src="<$mt:BlogURL$>tablesorter/jquery.tablesorter.js"></script>
 <script type="text/javascript">
 $(document).ready(function() 
 { 
 $("#myTable").tablesorter(); 
 $("a[rel*=facebox]").facebox();
 } 
 );
 </script>
 <script type="text/javascript" src="<$mt:BlogURL$>facebox/facebox.js"></script>

tablesorter のスタイルは、ここで使用した Blue の他に Green が tablesorter/themes ディレクトリの中に入っています。

アーカイブインデックステンプレートの作成

先ほど削除した部分に、表形式でブログ記事をリストアップする以下のようなテンプレートを書きます。

<mt:SetVarBlock name="entry_count"><$mt:BlogEntryCount$></mt:SetVarBlock>
<table id="myTable" class="content tablesorter" summary="<$mt:BlogName$>のすべてのブログ記事一覧表">
<thead>
 <tr>
 <th abbr="ブログ記事タイトル">Title (<$mt:GetVar name="entry_count"$> entries)</th>
 <th abbr="投稿日">Data</th>
 <th abbr="カテゴリ">Category</th>
 </tr>
</thead>
<tbody>
 <mt:Entries lastn="$entry_count">
 <tr>
 <td><$mt:EntryDate format="%Y.%m.%d"$></td>
 <td>
 <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>
 <a href="#all_entry_<$mt:EntryID$>" rel="facebox" title="「<$mt:EntryTitle$>」の概要を読む"> [preview]</a>
 <div class="all_entries_table" id="all_entry_<$mt:EntryID$>" style="display: none; font-size: 14px; line-height: 1.8;">
 <p><$mt:EntryExcerpt$></p>
 <p><a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>">続きを読む</a></p>
 </div>
 </td>
 <td><mt:ParentCategories glue=" &gt; "><$mt:CategoryLabel$></mt:ParentCategories></td>
 </tr>
 </mt:Entries>
</tbody>
</table>

MT タグの説明は省略しますが、いくつか順を追って説明します（主に上記ソースの青字部分）。

頭で変数 entry_count にすべてのブログ記事数を代入しています。

<mt:SetVarBlock name="entry_count"><$mt:BlogEntryCount$></mt:SetVarBlock>

table 要素の id="myTable" は変更することができますが、変更する場合は head に書いた以下の JavaScript もそれに合わせて変更してください。

 <script type="text/javascript">
 $(document).ready(function() 
 { 
 $("#myTable").tablesorter();
 $("a[rel*=facebox]").facebox();
 } 
 );
 </script>

ブログ記事をリストアップするソースを mt:Entries タグで囲みます。このとき、lastn モディファイアの値に変数 entry_count （ブログ記事数）を設定するとこにより、すべてのブログ記事をリストアップすることができます。

<mt:Entries lastn="$entry_count">

</mt:Entries>

次に、表の 2 列目に当たる td 要素を説明します。

ブログ記事ページにリンクしたブログ記事タイトルを表示します。

<a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>

div 要素にブログ記事の概要を出力させますが、display: none; で非表示にしておきます。その div 要素（のid）に対して張った直前の a 要素（ [preview] ）に rel="facebox" を追加することにより、リンクをクリックしたときに facebox が起動し、オーバーレイで表示することができます。

<a href="#all_entry_<$mt:EntryID$>" rel="facebox" title="「<$mt:EntryTitle$>」の概要を読む"> [preview]</a>
<div class="all_entries_table" id="all_entry_<$mt:EntryID$>" style="display: none; font-size: 14px; line-height: 1.8;">
 <p><$mt:EntryExcerpt$></p>
 <p><a href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>">続きを読む</a></p>
</div>

3 列目に当たる td 要素で、ブログ記事につけららたカテゴリを、親カテゴリから順に > で区切って出力します。

<mt:ParentCategories glue=" &gt; "><$mt:CategoryLabel$></mt:ParentCategories>

完成したテンプレートファイルは以下のようになります。

archive_index.mtml.txt

このテンプレートを再構築した結果、以下のように表示されました。表のヘッダー（ th 要素部分）をクリックすると、昇順、降順が変更できます。

[preview] をクリックすると、ブログ記事の概要がオーバーレイ表示され、「続きを読む」をクリックすると、ブログ記事の個別ページへ移動できます。

いかがでしょう。ぜひお試しください。