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

リアルタイム再構築プラグインをAjaxと組み合わせると、アクセスがあるたびに表示が変わるようにしたい部分を作ることができます。

PHPと組み合わせてもできますが、その方法だとリアルタイム再構築が終わらないとページ全体が表示されず、Blogの読者に「ページの表示が重い」という印象を持たれます。
しかし、Ajaxと組み合わせれば、リアルタイム再構築以外の部分が先に表示されて、リアルタイム再構築が終わった時点でその部分が表示されます。
これなら、ページの大半の部分は先に表示されていますので、読者は待ったという感じを持つことは少ないと思われます。

サンプルのページはこちらにあります。
Internet Explorerだと効果が分かりにくいかも知れませんが、FirefoxやOperaでは効果が比較的良く分かります。

1.prototype.jsのインストール

Ajaxでページを表示する方法はいろいろありますが、ここでは人気が高い「prototype.js」を使うことにします。
まず、以下のサイトでprototype.jsを入手します。

Prototype JavaScript Framework

prototype.jsをダウンロードしたら、Blogの出力先ディレクトリにアップロードしておきます。

2.リアルタイム再構築したい部分をテンプレートにまとめる

次に、リアルタイム再構築したい部分を、1つのテンプレート・モジュールにして保存します。
テンプレート・モジュールの名前の付け方は任意です。

3.組み込み先のテンプレートを書き換える

次に、リアルタイム再構築した部分を組み込むテンプレートを書き換えます。

まず、そのテンプレートのヘッダー部分に、以下のタグを入れて、prototype.jsを使える状態にします。 

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

次に、リアルタイム再構築する部分を組み込みたい位置に、以下を入れます。
divタグの「ID名」には、適当なIDを自分で決めて指定します。
また、JavaScriptの中にある「ID名」には、divタグにつけたのと同じID名を指定します。 

<div id="ID名">
<p>Now Loading...</p>
</div>
<script type="text/javascript">
<!--
new Ajax.Request('<$MTRealtimeRebuildCGIPath$>',
                  { method: 'get',
                    parameters: '<$MTRealtimeRebuildQueryParam tmpl_name="リアルタイム再構築するテンプレートの名前" ajax="1"$>', 
                    onComplete: ajax_disp });

function ajax_disp(httpObj)
{
    $("ID名").innerHTML = httpObj.responseText;
}
-->
</script>