MT Hackathon に参加してきました

シックス・アパートさんが引っ越しされて初めてのイベント「MT Hackathon @ Six Apart New Office 〜Data API で Chromeアプリを作ろう〜」に参加してきました。が、Chromeアプリは作れません。Chromeアプリどころか、MT Data APIの基礎からやらないとと言う状況なので、参加者の皆さんがいろいろなアプリを作る中、一人で基本的なべたなData APIを利用したテンプレートを作ってました。

まぁ、いろいろとやりたいなと漠然と思っていたことがあったのですが、自分のスキルでは出来ないことがわかり、あえなく撃沈でした。

とりあえず、当日作ったものに手を加えて、このブログのアーカイブページのサイドバーに「最新の記事 20件」として埋め込んでみました。

通常、Movable typeは静ファイルを書き出しますが、例えばブログ記事を書いたときはインテックステンプレート（ブログのトップページなど）とそのブログ記事、ブログ記事が関係するブログ記事リスト（カテゴリーページ、月別アーカイブページなど）が再構築されて新しい内容に書き変わります。

これは新規のブログ記事とは直接関係ないページは再構築されないということになります。そうすると、新規のブログ記事と関係のない古いブログ記事やカテゴリー一覧のページは再構築されません。そのため、再構築されないページに最新のブログ記事一覧などがあっても、ブログ投稿時に再構築されないので、最新のブログ記事一覧に最新のブログ記事が表示されない状態になってしまいます。

今まではこれらを解決するためには下記の様な方法がとられていました。

最新のブログ記事一覧の部分だけインデックステンプレートで作って、それをJavascriptなどで読み込む。
全ページをその都度、もしくは定期的に再構築する。
Movable Type自体をダイナミック・パブリッシングにする。

これらの方法ですと、無駄なファイルが出来てしまったり、手間がかかる、静的ファイル生成ではなくなってしまうなどがありました。

Data APIが登場したことによって、上記の様なことはかなり解消出来たのではないかと思います。今回の「最新の記事 20件」の表示は下記のようになってます。mt-data-api.jsの読み込みや、jQueryも必要になります。詳しくは下記のGitHubのページに上げてあります。
mt-template-data-api-recent-entry-list

// 初期化
var api = new MT.DataAPI({
baseUrl: 'mt-data-api.cgi',
// 任意の名前を設定してください。例：clientId: 'apple'
clientId: '任意の名前'
});

// BlogのIDを設定
// 例：var blogId = 1;
var blogId = ブログのID番号;

// その他のパラメーターの設定
// 以下ではエントリー記事の件数とData APIで取得するフィールドを指定しています。
var params = {
limit: 20,
};

// エントリー一覧を作ってみよう！
// エントリーエンドポイント：mt-data-api.cgi/v1/sites/2/entries

api.listEntries(blogId ,params ,function(response){
if(response.error){return;}
for ( i=0; i< response.items.length; i++){

// 必要な項目を変数に代入
// 変数に代入せず、直接、「perlink」を「response.items[i].permalink」にすることも出来ます。
var perlink = response.items[i].permalink;
var enttitle = response.items[i].title;

jQuery('#recententrylist').append( jQuery('<li>').append( jQuery('<a>').attr('href', perlink).append( enttitle )));

}
});

ちなみにhonda-beat.jpの右サイドバーの各ブログの記事リストは、インデックス・テンプレートに全ブログの記事リストを書き出しておいてjQueryを使って読み込ませています。

また、ブログ記事一覧を読み込ませている<dd>要素を空要素にしたくなかったので、<dd>要素にはブログトップへのリンクを作ってあり、リストを読み込む際にそのリンクのソースを上書きするようにしています。

<dl class="contentslink">

<dt><h2 class="categorytitle menuevent">イベント情報</h2></dt>
<dd id="event">
<a href="http://www.honda-beat.jp/event/">イベント情報のトップ</a>
</dd>

<dt><h2 class="categorytitle menugnob">ガレージノブ</h2></dt>
<dd id="gnob">
<a href="http://www.honda-beat.jp/g_nob/">ガレージノブのトップ</a>
</dd>

<dt><h2 class="categorytitle menulink">リンク集</h2></dt>
<dd id="link">
<a href="http://www.honda-beat.jp/link/">リンク集のトップ</a>
</dd>

<dt><h2 class="categorytitle menupartslist">パーツリスト</h2></dt>
<dd id="partslist">
<a href="http://www.honda-beat.jp/partslist/">パーツリストのトップ</a>
</dd>

<dt><h2 class="categorytitle menubeatlife">ビートライフ</h2></dt>
<dd id="beatlife">
<a href="http://www.honda-beat.jp/beat_life/">ビートライフのトップ</a>
</dd>

</dl>

実際に書き出されているHTMLソースは上記ですが、<dd>要素の「<a href="http://www.honda-beat.jp/event/">イベント情報のトップ</a>」という部分などが、新規ブログ記事のリストで上書きされます。

いずれここもData APIにしたいな...。

あとこのブログのカテゴリーリストもか...。