a-blog cmsでPost Include後のコンテンツにJSを実行する
June 07 Sat 2014 | メモ
Post Includeとは
a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されて います。この方法は組み込みJavaScriptのpost include機能を利用します。（v1.3.0より）
これにより簡単にコンテンツをAjaxで読み込んでくる事が出来るのですが、読み込んできた コンテンツにJavascriptを実行したい場面があると思います。（a-blog cmsの組み込みJSは標準で実行されます）
Post Include にコールバックを指定する
以下のコードのようform要素のonreset属性でコールバックを仕込むことができます。 （ここでは、Post Includeでページング処理をしています）
<form action="" method="post" class="js-post_include-bottom" onreset="callback();" >
<div class="small-centered js-acms_loader" style="margin:20px auto;"></div>
<input type="hidden" name="page" value="{forwardPage}" />
<input type="hidden" name="tpl" value="/include/mainTop.html" />
<input type="hidden" name="ACMS_POST_2GET" value="続きを読み込む" class="button expand" />
</form>Post IncludeされてきたコンテンツにWebフォントを適用してみる
今回試しに、FontPlusさんのWebフォントを当ててみました。
FontPlusのスマートライセンスではJavascriptを使用して動的（現在表示されている文字のみをダウンロードしてくる）にWebフォントを適応するので、Post Includeでひっぱてきた記事には、Webフォントが当たっている物と当たってない文字が混ざって表示されます。
そこで先ほど仕込んだPost Includeのコールバックを使い、後から読み込んだコンテンツに対してWebフォントを当ててあげます。
FontPlusさんではAPIが公開されていてフォントを再度適用するのも簡単でした。 FONTPLUS API機能説明
<script type="text/javascript" src="http://webfont.fontplus.jp/accessor/script/fontplus.js?xxx=xxx" charset="utf-8"></script>
<script type="text/javascript">
function callback() {
FONTPLUS.reload();
}
</script>Webフォントはじめて使ってみたのですが、面白いですね！ 皆さんも是非お試しを！
といった事でPost Includeでよく使いそうなコールバックについてのメモでした。