リアルタイム再構築プラグイン(その4)

リアルタイム再構築プラグインとAjaxを組み合わせた実際の例として、エントリー内の画像をランダムに選んで、サイドバーに表示するものを紹介します。
なお、エントリー内の画像を出力するために、拙作のEntryImagesプラグインも利用します。

1.prototype.jsを使えるようにする

まず、prototype.jsを使えるようにします
画像を表示したいテンプレートを開き、ヘッダー部分に以下のタグを入れます。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>

なお、prototype.jsの入手方法は、昨日のエントリーを参照してください。

2.画像出力用のテンプレート・モジュールの作成

次に、テンプレート・モジュールを新規作成して、その名前を「エントリーの画像」にします。
そして、以下のようなタグを入力して、エントリーの画像を出力できるようにします。

<MTEntryImages sort_order="random" img_lastn="100" random_lastn="5">
   <p style="text-align : center;"><a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>"><img src="<$MTEntryImageSrc$>" width="120" height="90" alt="<$MTEntryImageAlt$>" /></a></p>
</MTEntryImages>

なお、上の例では、エントリーの画像の中から最近の100個を取り出して、その中の5つをランダムに選ぶようにしています。

3.サイドバーにタグを追加

次に、画像を表示したいテンプレートを開き、サイドバーの部分に画像表示のための部分を作ります。
MT標準のテンプレートの場合だと、以下のようにタグを入れます。

<div class="module-images module">
   <h2 class="module-header">エントリーの画像</h2>
   <div id="entry_images_list" class="module-content">
   <p>Now Loading...</p>
   </div>
</div>

また、小粋空間のテンプレートの場合だと、以下のようにタグを入れます。

<div class="sidetitle">
Entry Images
</div>

<div class="side" id="entry_images_list">
Now Loading...
</div>

4.JavaScriptを入れる

3.で入力したタグの後に、以下のJavaScriptを入れます。
このJavaScriptによって、「エントリーの画像」のテンプレートがリアルタイム再構築され、その出力が、IDが「entry_images_list」のdivタグの位置に表示されます。

<script type="text/javascript">
<!--
new Ajax.Request('<$MTRealtimeRebuildCGIPath$>',
                 { method: "get",
                   parameters: '<$MTRealtimeRebuildQueryParam tmpl_name="エントリーの画像"$>',
                   onComplete: dispFile });

function dispFile(obj)
{
    $("entry_images_list").innerHTML = obj.responseText;
}
-->
</script>