イベントカレンダープラグイン(その13・JQAjaxIncludeプラグインとの組み合わせ)

だいぶ間が空きましたが、イベントカレンダープラグインの続きです。
今日は、JQAjaxIncludeプラグインを組み合わせて、開催中のイベントなどの情報を、なるべくリアルタイムに近い形で表示する方法を紹介します。

1.背景

イベントカレンダープラグインを使う場合、現在開催中のイベントや、終了したイベント、また今後開催予定のイベントを表示する際に、ページにアクセスがあった時点での最新の情報にしたいところです。

Movable Type 6的には、Data APIを使って、動的に表示したいです。
イベントカレンダープラグイン自体はData APIにも対応していますので、動的表示も可能です。
ただ、Data APIだとJavaScript等が必要で、テンプレートタグしか組めない人には難しいです。

そこで、以下のような方法を取ることにします。

  1. 現在開催中のイベントなど、出力したい情報を、インデックステンプレートで出力するようにします。
  2. 1.のテンプレートを定期的に再構築し、ファイルに出力します。
  3. 先日公開したJQAjaxIncludeプラグインを使って、2.のファイルを動的に読み込みます。

2.イベントの情報をインデックステンプレートで出力

まず、出力したいイベントの情報を、インデックステンプレートでファイルに出力します。
例えば、現在開催中のイベントの情報を、ul／liのリストで出力したいなら、インデックステンプレートを以下のように組みます。 

<mt:CurrentEventEntries>
  <mt:EntriesHeader><ul></mt:EntriesHeader>
  <li><$mt:EntryTitle$></li>
  <mt:EntriesFooter></ul></mt:EntriesFooter>
<mt:Else>
  <p>現在開催中のイベントはありません。</p>
</mt:CurrentEventEntries>

3.インデックステンプレートを定期的に再構築する

次に、2.のインデックステンプレートを定期的に再構築します。

定期的な再構築には、昨日紹介したrebuilt-pagesツールを使うことができます。
また、スカイアーク様で公開しているwww-rebuilderというツールを使うと、特定のIDのインデックステンプレートだけ再構築することができ、rebuilt-pagesより効率的です。

4.JQAjaxIncludeプラグインでファイルを読み込む

最後に、JQAjaxIncludeプラグインを使って、再構築済みのファイルをAjaxで読み込みます。

例えば、以下のような状況だとします。

  • テンプレート内に、IDが「current_events」のdiv要素を作り、そこに現在開催中のイベントを読み込みます。
  • インデックステンプレートの出力ファイル名は、「current_events.html」にしています。

この場合、テンプレート内で、現在開催中のイベントを出力したい位置に、以下のようなタグを追加します。 

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

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

<$mt:JQAjaxIncludeJS$>