サイドバーの最新記事を「Ajax によるモジュール化」に変更

バージョンアップを機会に、サイドバーの最新記事の表示を、小粋空間に掲載されているAjax によるモジュール化を利用する方法に変更しました。

これはAjaxを使ってあらかじめ記事の更新のたびに再構築されたテンプレートを読み込んでいるものです。

準備

必要なファイル

Prototype JavaScript Frameworkから、prototype.jsをダウンロードし、scriptフォルダへアップロード

次のコードをajaxUtil.jsとして保存してscriptフォルダへアップロード

function getFile(url, id) {
    url = url + "?" + Math.random();
    new Ajax.Updater({success: id},
                     url, {
                         method: 'get',
                         onComplete: end,
                         onFailure: error
                     });
    return false;
}

テンプレートの作成

サイドバーに表示させるインデックステンプレートを、最近のブログ記事（recent_entries.html）として作成。

表示させたいテンプレートの箇所に次のコードを挿入

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<$mt:Link template="最近のブログ記事"$>', 'entries');
//]]>
</script>

小粋空間では、getFile('<MTBlogURL>テンプレートのファイル名', 'entries');で、テンプレートを指定していますが、私の場合は、getFile('<$mt:Link template="テンプレート名"$>', 'entries');でテンプレートを取得しています。

スクリプトの呼び出し

HTMLヘッダーテンプレートのHEAD要素内に次のコードを記述。なお、私の場合はマルチブログになっているので、MTBlogHostタグを使っています。

<script type="text/javascript" src="http://<$mt:BlogHost$>/script/prototype.js"></script>
<script type="text/javascript" src="http://<$mt:BlogHost$>/script/ajaxUtil.js"></script>

以上で再構築すれば完成です。

詳しくは、「Movable Type WEBデザインの新しいルール」（翔永社：刊、荒木勇次郎・松永英明：共著）をご覧ください。