リアルタイム再構築プラグイン（MT4/5対応版・その3）

リアルタイム再構築プラグインをAjaxと組み合わせて使うと、ページにアクセスされるたびに変化するような部分を、リアルタイムに再構築して表示することができます。
その例として、MT4付属のFeeds.App Liteプラグインと組み合わせて、フィードを表示する方法を紹介します。

1.フィード表示用のテンプレートモジュールを作る

まず、フィードを表示するためのテンプレートモジュールを作ります。

テンプレートモジュールを新規作成し、名前を「フィード表示モジュール」にします。
そして、テンプレートの内容として以下を入力します。
その際、MTFeedタグの「フィードのURL」の部分は、表示したいフィードのURLに書き換えます。

<MTFeed uri="フィードのURL">
<ul class="widget-list">
<MTFeedEntries lastn="10">
<li class="widget-list-item"><a href="<$MTFeedEntryLink encode_html="1"$>"><$MTFeedEntryTitle$></a></li>
</MTFeedEntries>
</ul>
</MTFeed>

2.フィードの表示先を作る

次に、フィードの表示先を作ります。
サイドバーのテンプレートモジュールで、フィードを表示したい位置に、以下を入力します。

<div class="widget-feed widget">
    <h3 class="widget-header">フィード</h3>
    <div class="widget-content">
        <div id="view_feed">読み込み中です・・・</div>
    </div>
</div>

3.Ajaxの処理を入れる

次に、Ajaxの処理を入れて、「フィード表示モジュール」のテンプレートをリアルタイム再構築するようにします。

Ajaxの処理を行う方法はいろいろありますが、今回はMT4に標準で入っている「client.js」というライブラリを使ってみます。
手順2.のタグの直後に、以下のJavaScriptを追加します。

<script type="text/javascript">
<!--
if (typeof TC == 'undefined') { TC = {}; }
-->
</script>
<script type="text/javascript" src="<$MTStaticWebPath$>js/tc/client.js"></script>
<script type="text/javascript">
<!--
TC.Client.call({
    load : feed_load_success,
    error : feed_load_error,
    method : 'get',
    uri : '<$MTRealtimeRebuildLink tmpl_name="フィード表示モジュール" ajax="1"$>'
});

function feed_load_success(resp) {
    document.getElementById('view_feed').innerHTML = resp.responseText;
}

function feed_load_error(resp) {
    document.getElementById('view_feed').innerHTML = 'エラーが発生しました。';
}
-->
</script>

4.再構築

最後に、Blogの各ページを再構築します。
これで、ページを表示した時点でフィードが読み込まれて表示されるようになります。