エントリ一覧をページリロードなしで表示する
次のページをその場で表示する
a-blog cmsにはポストインクルードというAJAXを簡単に扱う為の仕組みがあります。 その仕組みを使ってページリロードなしにどんどんエントリーを表示してみます。
まずは、Entry_Bodyを使いボタンを押す事により次のページを引っ張ってきます。
実装方法
<!-- BEGIN forward:veil --><!-- BEGIN forwardLink -->
<form action="" method="post" class="js-post_include"><input type="hidden" name="tpl" value="/include/main_body.html" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="hidden" name="cid" value="%{CID}" />
<input type="hidden" name="page" value="{forwardPage}" />
<input type="submit" name="ACMS_POST_2GET" alt="もっと見る" value="もっと見る" />
</form><!-- END forwardLink --><!-- END forward:veil -->フォームのクラスに「js-post_include」を設定する事によりポストインクルード機能が有効になります。
次にhiddenで渡しているinput要素ですが、tplはAJAXで引っ張ってくるテンプレートを指定します。 このテンプレートにはEntryBoryとここと同じポストインクルードの記述を書きます。
bid,cidはそれぞれブログIDとカテゴリIDになります。
pageで指定している{fowardPage}ですが、EntryBodyの変数で次のページ番号が出力されています。 最後にsubmitにACMS_POST_2GETを指定して完了です。
ページの一番下までいったら次のページを読み込む
まだ開発中ですが、プロトタイプ的なものが出来ましたのでここに書いてみようと思います。 どんな事ができるかというとページを一番下までスクロールすると自動的に次のページを読み込んでくる機能です。 Facebookやtwitterなどのあれですね。
というわけで現段階での実装方法を紹介いたします。ご意見要望があればうれしいです。
実装方法
<!-- BEGIN forward:veil --><!-- BEGIN forwardLink -->
<form action="" method="post" class="js-post_include-bottom"><input type="hidden" name="tpl" value="/include/main_body.html" />
<input type="hidden" name="bid" value="%{BID}" />
<input type="hidden" name="cid" value="%{CID}" />
<input type="hidden" name="page" value="{forwardPage}" />
<input type="submit" name="ACMS_POST_2GET" alt="もっと見る" value="もっと見る" />
</form><!-- END forwardLink --><!-- END forward:veil -->ボタンによるポストインクルードとほぼ違いはありません。 違いはフォームにつけるクラス名を「js-post_include」から「js-post_include-bottom」に変更して頂くだけです。
これで、ページの一番したまでスクロールすると自動的に次のページが読み込まれるようになります。
考えている事
基本的な機能はこれで動いているのですが、オプションで一番下までスクロールしなくても下からの距離を設定できるようにしてみようかなと考えています。
また、下までスクロールしたら起動するポストインクルードするものとは他に、定期的に実行するポストインクルードの話も出てきます。これによりTwitterなどで「新着記事があります」みたいな事が出来るかもです。お楽しみに！
