a-blog cms で ATNDモジュールを作ってみる その2（post_includeの活用）

a-blog cms には、Ajax を利用してページを表示後に、別のコンテンツを読み込む事ができる post include という機能が標準で実装されています。これを利用すると、その1 で問題になっていたキャッシュ部分が少し改善させる事が可能になります。

では、なぜ post include 機能を利用するとキャッシュの問題を少し改善する事ができるのでしょう？

1. サーバ上に作成される各ページのキャッシュにはATNDモジュールは無い状態でキャッシュされる事になります。
2. ATNDモジュール部分の小さなパーツは、単体でキャッシュされる事になります。

これであれば5000ページあったとしても、ATND API へのアクセスはキャッシュの有効期間に1回しかない事になります。あとはキャッシュの時間を5分にするのか、60分にするのかという運用をどうするのかを考える事になります。通常は長い時間キャッシュを有効にしておき、ルール等を利用して post include するテンプレートのキャッシュ時間を短めにする事も、どうにかする事ができるかもしれません。

以下に公式の post include のドキュメントをリンクしておきます。

a-blog cms のマニュアルに掲載されている post include 関連のエントリー

• post includeの基本設定
• ページを移動せずにフォームの検索結果を表示する（post include）
• 送信ボタンを押さずに検索結果を表示する（post include）
• 検索エンジンからのキーワードでサイト内検索結果を表示する（post include）
• post includeの結果をキャッシュさせない方法（post include）

/include/atnd.html

その1のモジュール部分を別ファイルにします。

<!-- BEGIN_MODULE Api_Atnd_EventsUsers -->

<div style="margin-bottom:30px">
<h3><a href="{event_url}">{title}</a></h3>
<p>参加者：{accepted}人 / 定員：{limit}人</p>
<!-- BEGIN user:loop -->
<a href="http://twitter.com/#!/{twitter_id}" target="_blank"><img src="{twitter_img}" width="30" height="30" alt="{nickname}" /></a> 
<!-- END user:loop -->

<p><a href="{event_url}/entry/new">このイベントに参加登録する</a></p>
</div>
<!-- END_MODULE Api_Atnd_EventsUsers -->

上記を呼び出す側のテンプレートに記述する post include の設定

post include は form 部分を Ajax で結果と置き換える機能になりますので、呼び出す側は form タグになります。 また、post include には、submit を押した後に動作させる class="js-post_include" とページの表示が終わってから自動的に動作する class="js-post_include-ready" というのがあります。 今回は自動的に実行なので、以下のようになります。

<form action="" method="post" class="js-post_include-ready">
<input type="hidden" name="ACMS_POST_2GET" />
<input type="hidden" name="tpl" value="/include/atnd.html" />
</form>

また、ログインしている時には毎回APIにアクセスしてしまいますので、無事動作するようになった時点でタッチモジュールを利用して、ログイン時は上記のHTMLを表示しないようにした方がいいかと思います。

<!-- BEGIN_MODULE Touch_Unlogin -->
<form action="" method="post" class="js-post_include-ready">
<input type="hidden" name="ACMS_POST_2GET" />
<input type="hidden" name="tpl" value="/include/atnd.html" />
</form>
<!-- END_MODULE Touch_Unlogin -->

post include のデモ

試しにクリックしてみましょう！

関連エントリー

• a-blog cms で ATNDもジュールを作ってみる その1
• a-blog cms で ATNDもジュールを作ってみる その2（post_includeの活用）
• a-blog cms で ATNDもジュールを作ってみる その3（管理ページでのID設定）
• a-blog cms で ATNDもジュールを作ってみる その4（モジュールID化の方法）

次回は管理ページでIDを設定できるようにする方法をご紹介します。