Ajaxで部分的に動的読み込みするプラグイン(その1)

Movable Typeで、ページの一部分をAjaxで動的読み込みするプラグインを作りました。
テンプレートタグだけで読み込むことができ、原則としてJavaScriptの知識は不要です。

1.プラグインの背景

Movable Typeは、基本的に静的生成(再構築)でページを出力します。
静的生成では、ページにアクセスがあった時に再構築済みのファイルを送信するだけなので、表示が速く、サイトを見に来る人にとってのメリットが大きいです。
また、アクセスが集中しても、サーバーの負荷が上がりにくいというメリットもあります。

しかし、完全に静的生成だけにしようとすると、記事が増えるたびに全てのページを再構築することが必要になります。
サイトを管理する側にとって、使い勝手が悪いです。

静的のメリットを極力生かしつつ、再構築の手間を軽減する方法として、ページの一部をAjaxで動的に読み込む方法があります。
サイドバーなど、多くのページで共通の部分を独立したファイルに出力し、それをAjaxで各ページに読み込むようにすれば、再構築の負荷を減らすことができ、またサイト全体の再構築が必要になることも少なくなります。

2.プラグインのインストール

プラグインは以下からダウンロードします。

JQAjaxInclude_1_01.zip

ダウンロードしたZipファイルを解凍すると、「plugins」と「mt-static」のフォルダができます。
これらのフォルダを、Movable Typeのインストール先ディレクトリにアップロードします。

3.テンプレートの書き方

当プラグインでAjaxでの動的読み込みを行うには、テンプレートに以下のように書きます。

3-1.MTAjaxIncludeタグ

まず、テンプレートの中で、Ajaxで動的読み込みしたい位置に、空のdiv要素等を入れ、id属性でIDを指定しておきます。
そして、その後に以下のようなテンプレートタグを入れます。
idモディファイアには、読み込み先の要素のIDを指定します。

<mt:JQAjaxInclude id="読み込み先の要素のID">読み込むページのURL</mt:JQAjaxInclude>

例えば、「sidebar」というdiv要素に、ブログのディレクトリにある「sidebar.html」というファイルを読み込むには、以下のようにテンプレートを組みます。

<div id="sidebar"></div>
<mt:JQAjaxInclude id="sidebar"><$mt:BlogURL$>sidebar.html</mt:JQAjaxInclude>

3-2.MTAjaxIncludeJSタグ

次に、テンプレートの中で、</body>タグの直前に、以下のテンプレートタグを入れます。

<$mt:JQAjaxIncludeJS$>