ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost（送信）した結果を、ページのリロードなしで表示する機能です。

config.js内の設定

/js/config.jsの以下の箇所に設定内容が記載されています。

//--------------
// post include
postIncludeOnsubmitMark     : '.js-post_include',
postIncludeOnreadyMark      : '.js-post_include-ready',
postIncludeOnBottomMark     : '.js-post_include-bottom',
postIncludeOnIntervalMark   : '.js-post_include-interval',
postIncludeMethod           : 'replace', // ( 'swap' | 'replace' )
postIncludeEffect           : 'slide', // ( 'slide' | 'fade' | '' )
postIncludeEffectSpeed      : 'slow', // ( 'slow' | 'fast' )
postIncludeOffset           : 60,
postIncludeReadyDelay       : 0,
postIncludeIntervalTime     : 20000,
postIncludeArray  : [{
//  'mark'       : '.js-post_include-original',
//  'type'       : 'submit',
//  'method'     : 'swap',
//  'effect'     : 'slide',
//  'effectSpeed': 'slow'
}],

Ver. 2.8.0よりpostIncludeEvalValueMarkの設定ではキャッシュさせないポストインクルードが動作しなくなりました。詳しい実装方法については「post includeの結果をキャッシュさせない方法」の代替案をご覧ください。（2020年11月19日）

Ver. 2.11.25よりデフォルトの設定だと tplコンテキストが無効になりました。ポストインクルードを利用する際には ポストインクルードの準備 をご覧ください。（2021年6月16日）

Ver. 2.11.25 以降のバージョンでデフォルトで tplコンテキスト の設定が無効になるような設定になりました。 理由として tplを指定すればクライアント側で、好きなテンプレートを指定することができてしまうため、 同一コンテンツの複数のページができてしまうためになります。

そのため、ポストインクルードでテンプレートを指定が無視されてしまう事になります。 また、この設定はログインしている際には指定が無効になっていますので開発中に気がつきづらいので注意が必要です。

<input type="hidden" name="tpl" value="include/search.html" />

このような記述をした場合にも tpl が有効にならない事になります。

設定を全体を解除する（非推奨）

private/cofig.system.yaml にある forbid_tpl_url_context を off に設定します。

forbid_tpl_url_context: off

設定を部分的に解除する

private/cofig.system.yaml にある allow_tpl_path にポストインクルードで利用するファイルを指定します。複数ある場合にはカンマで区切って設定します。

allow_tpl_path: [inlcude/search.html, hoge/custom.html]

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJSのpost include機能を利用します。

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとページを移動せずに同じページ内で検索結果を表示することができます。

ここでは例として、サイト内検索フォームから検索すると、ある特定のコンテンツエリアを書き換えて検索結果を表示する手順を説明します。

1. 検索結果の表示を用意する

（1）フォームを送信した後に表示する内容をテンプレートとして用意します。例えば、ここではsearchResultSample.htmlというテンプレートを用意します。このテンプレートには検索結果の表示部分のみ記述しています。

<!-- BEGIN_MODULE Entry_List -->
<ul><!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

（2）手順1（1）で作成したモジュールをモジュールIDにし、引数設定の[keyword]にチェックを入れます。これで、フォームから送られたキーワードに合致するエントリーが表示されるようになります。

<!-- BEGIN_MODULE Entry_List id="searchResultSample" -->
<ul><!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

モジュールIDの引数設定

2. フォームを用意する

（1）サイト内検索フォームを用意します。

<form action="" method="post">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

（2）form要素にclass属性とtarget属性を追加します。「class="js-post_include"」はこのとおりに記述し、target属性は#の後に任意の名前を記述します。（"#"はidを意味しています）このtarget属性は検索結果の表示を置き換える場所を指定しています。

target属性がない場合は、form自体が検索結果表示に置き換わります。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

（3）検索結果を表示するテンプレートを参照します。

例）include/searchResultSample.html というテンプレートを参照する場合の例です。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

3. 検索結果表示部分と関連付ける

検索結果を表示したいコンテンツエリアに、form要素のtarget属性と同じ名前を付けます。手順2（2）で指定したtarget属性の値と同じ名前が付いている要素部分が、検索結果表示として置き換わります。

target属性で指定した要素自身を置き換えるか、その中身を置き換えるかを設定することができます。設定の詳細は「post includeの基本設定」の「postIncludeMethod」を参照してください。

例）form要素のtarget属性で"#jsChangeContents"と記述した場合

<div id="jsChangeContents">
<p>この部分が置き換わります。</p>
</div>

動作サンプル

下の検索フォームに語句を入力して[検索]ボタンを押すと、「この部分が置き換わります。」が検索結果に置き換わって表示されます。

ソースコード

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>
<div id="jsChangeContents">
  <p>この部分が置き換わります。</p>
</div>

これで、検索結果を別ページに移動せずに表示できるようになります。

a-blog cmsでは、フォームの送信ボタンを押さずに検索結果をAjaxを使用して表示できる機能が標準で実装されています。

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとフォームの送信ボタンを押さずに同じページ内で検索結果を表示することができます。

ここでは例として、ある特定のキーワードで検索した場合の検索結果を表示する手順を説明します。

1. 検索結果の表示を用意する

（1）フォームを送信した後に表示する内容をテンプレートとして用意します。ここではsearchResultSample.htmlというテンプレートを用意するとします。このテンプレートには検索結果の表示部分のみ記述しています。

<!-- BEGIN_MODULE Entry_List -->
<ul><!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

（2）手順1（1）で作成したモジュールをモジュールIDにし、引数設定の[keyword]にチェックを入れます。これで、フォームから送られたキーワードに合致するエントリーが表示されるようになります。

<!-- BEGIN_MODULE Entry_List id="searchResultSample" -->
<ul><!-- BEGIN entry:loop -->
<li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

モジュールIDの引数設定

2. 非表示のフォームを用意する

（1）検索フォームを用意します。

<form action="" method="post">
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" />
</form>

（2）form要素にclass属性を追加します。「class="js-post_include-ready"」はこのとおりに記述します。

<form action="" method="post" class="js-post_include-ready">
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" />
</form>

（3）検索結果を表示するテンプレートを参照します。

例）include/searchResultSample.html というテンプレートを参照する場合の例です。

<form action="" method="post" class="js-post_include-ready">
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" />
</form>

（4）検索キーワードを指定します。

例）「サマリー」というキーワードで検索する場合

<form action="" method="post" class="js-post_include-ready">
  <input type="hidden" name="keyword" value="サマリー" size="15" />
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" />
</form>

これで、送信ボタンを押さずに検索結果を表示するようになります。

動作サンプル

下のリストは、フォームで特定のキーワード「サマリー」で検索して合致したエントリーが検索結果として表示されています。フォーム自体は表示されず、検索結果が表示されます。

• 送信ボタンを押さずに検索結果を表示する（post include）

ポストインクルードを使うことで、検索結果など別コンテンツをページを移動することなく引っ張ってくることができます。技術的にはAjaxを使って実現しています。

このポストインクルードはJavaScriptで動いているため、端末の位置情報を取得して、ポストインクルード先に位置情報を渡すことができます。そうすることで、現在位置から近い店舗を表示するなどといった、ユーザーに優しい機能を作ることができます。（Ver. 2.7.0 以上）

注意点

最近のブラウザは https（SSL/TLS対応）でないと、位置情報を取得できない事が多くなっています。この機能を使用する場合は、httpsの環境をご用意ください。

また、最初にアクセスするときにブラウザが、位置情報を取得してもいいか、許可を求めてきます。ここでユーザーが許可を行わないと、位置情報の取得はできません。

位置情報の取得許可の確認画面

実装方法

ポストインクルードの formのデータ属性に 「data-geo="true"」 を追加する事で、自動的に組み込みJSが自動で位置情報を取得してポストインクルードしてくれます。

位置情報の指定のされ方

formのデータ属性に 「data-geo="true"」 を追加する事で、位置情報を付加して指定されたテンプレートにアクセスするのですが、以下のようにクエリストリングとして付加されます。

?lat=xxxxxx&lng=xxxxxx

位置情報のグローバル変数

a-blog cms では、クエリストリングを自動的にグローバル変数化しますので、ポストインクルード先で、 %{lat}, %{lng} などとすることにより、位置情報が取得できます。

サンプル

以下、緯度・経度を表示するサンプルになります。

ポストインクルード

<h2>位置情報</h2>
<form action="" method="post" class="js-post_include" data-geo="true">
  <input type="hidden" name="bid" value="%{BID}">
  <input type="hidden" name="tpl" value="/include/geo.html">
  <input type="submit" name="ACMS_POST_2GET" value="緯度・経度を取得">
</form>

読み込みテンプレート

<ul>
	<li>緯度: %{lat}</li>
	<li>経度: %{lng}</li>
</ul>

動作サンプル（緯度・経度を表示）

Entry_GeoListとの組み合わせ

Entry_GeoListモジュールは、エントリーに位置情報を付加して、ある場所（エントリーや個別指定）から近い順番でエントリーを表示できるモジュールです。このEntry_GeoListと位置情報付きのポストインクルードを使うことで、現在位置から近いエントリーを引っ張ってくる事ができるようになります。

実装方法

Entry_GeoListモジュールIDを作成し、設定の基準点を「URLコンテキストを参照」から「URLクエリストリングを参照（?lat=xxx&lng=xxx）」に変更してください。これでモジュールは、エントリー基準ではなくURLの情報から基準点をとってくるようになります。

URLクエリストリングを参照に変更

そして、Entry_GeoListモジュールが書かれたテンプレートを、位置情報付きのポストインクルードで読み込めば、現在位置から近い順で表示する事ができるようになります。

ポストインクルードを使うことにより、現在表示しているURLとは関係ない情報を好きに引っ張ってくることができます。 モジュールIDを使えば、同じようにURLと関係ない情報を出力することはできるのですが、エントリーの情報を使って、引っ張ってくる値が変わる場合はどは、ポストインクルードが便利です。

例: エントリー詳細ページで、そのエントリーのカスタムフィールドの値を元に、関連する記事一覧を引っ張ってくるなど。

実装方法

POST_2GETモジュールを使用します。POST_2GETモジュールは、POSTデータにa-blog cmsの様々なパラメータを渡して送信すると、そのパラメータを元にURLを組み立て、好きなページを表示できるようになります。（ポストインクルードを使わない場合は、組み立てられたページに移動します）

例: カテゴリーの情報で絞り込み、include/category.html テンプレートを使って表示しています。

<form action="" method="post" class="js-post_include-ready">
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="cid" value="%{CID}" />
  <input type="hidden" name="tpl" value="include/category.html" />
  <input type="submit" name="ACMS_POST_2GET" />
</form>

様々なパラメーター

<!-- ID を指定 IDに沿ったURLが生成されます。 -->
<input type="hidden" name="bid" value="1"> <!-- ブログIDを指定 -->
<input type="hidden" name="aid" value="1"> <!-- エイリアスIDを指定 -->
<input type="hidden" name="uid" value="1"> <!-- ユーザーIDを指定 -->
<input type="hidden" name="cid" value="1"> <!-- カテゴリーIDを指定 -->
<input type="hidden" name="eid" value="1"> <!-- エントリーIDを指定 -->
<input type="hidden" name="cmid" value="1"> <!-- コメントIDを指定 -->

<!-- キーワードを指定 -->
<input type="text" name="keyword" value="%{KEYWORD}">

<!-- タグを指定 -->
<input type="hidden" name="tag" value="aaa">

<!-- フィールドを指定 -->
<input type="hidden" name="hoge" value="aaa">
<input type="hidden" name="field[]" value="hoge">

<!-- 表示順を指定 -->
<!-- 日時 ( 昇順 ) -->
<input type="hidden" name="order" value="datetime-asc">
<!-- 日時 ( 降順 ) -->
<input type="hidden" name="order" value="datetime-desc">
<!-- ファイル名 ( 昇順 ) -->
<input type="hidden" name="order" value="code-asc">
<!-- ファイル名 ( 降順 ) -->
<input type="hidden" name="order" value="code-desc">
<!-- ID ( 昇順 ) -->
<input type="hidden" name="order" value="id-asc">
<!-- ID ( 降順 ) -->
<input type="hidden" name="order" value="id-desc">
<!-- 表示順 ( 昇順 ) -->
<input type="hidden" name="order" value="sort-asc">
<!-- 表示順 ( 降順 ) -->
<input type="hidden" name="order" value="sort-desc">
<!-- フィールド ( 昇順 ) -->
<input type="hidden" name="order" value="field-asc">
<!-- フィールド ( 降順 ) -->
<input type="hidden" name="order" value="field-desc">
<!-- 数値フィールド ( 昇順 )	 -->
<input type="hidden" name="order" value="intfield-asc">
<!-- 数値フィールド ( 降順 ) -->
<input type="hidden" name="order" value="intfield-desc">
<!-- ランダム -->
<input type="hidden" name="order" value="random">

<!-- テンプレートを指定 -->
<input type="hidden" name="tpl" value="/include/sample.html">

<!-- ページを指定 -->
<input type="hidden" name="page" value="3">

<!-- 表示数を指定 -->
<input type="hidden" name="limit" value="50">

<!-- 期間を指定 -->
<input type="hidden" name="start" value="2014-01-01">
<input type="hidden" name="span" value="span">
<input type="hidden" name="end" value="2015-12-31">

<!-- 日付を指定 -->
<input type="hidden" name="date" value="2015-12">

<!-- クエリストリングを指定 ?key1=aaa&key2=bbb-->
<input type="hidden" name="key1" value="aaa">
<input type="hidden" name="key2" value="bbb">
<input type="hidden" name="query[]" value="key1">
<input type="hidden" name="query[]" value="key2">

このようなパラメータを使うことにより好きなページの情報を取得することができるようになります。 実装に困った時は、一度ポストインクルードで出来ないか検討してみてください。

通常は続きを読むのリンク部分をクリックすると1つの記事が表示されるようになりますが、Entry_Continue というモジュールとポストインクルード機能を組み合わせることで、ページの遷移無しに続き部分を読み込んでくる事ができるようになります。

続きを読む部分を表示するテンプレートを準備します。

include/entry/continue.html

<!-- BEGIN_MODULE Entry_Continue -->

<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<hr class="clearHidden" />
<!-- END unit:veil -->
				
<!-- END_MODULE Entry_Continue -->

そして、一覧のテンプレートファイルにある continueLink 部分を探してみて下さい。

<!-- BEGIN continueLink:veil -->
<p class="continueLink clear"><a href="{continueUrl}">「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

の部分を、以下のように修正します。

<!-- BEGIN continueLink:veil -->
<form action="{continueUrl}" method="post" class="js-post_include">
<input type="hidden" name="tpl" value="include/entry/continue.html" />
<input type="submit" name="ACMS_POST_2GET" value=" {continueName}の続きを読む " />
</form>
<!-- END continueLink:veil -->

以上のカスタマイズで「xxxの続きを読む」ボタンを押すと、ページ遷移なしで記事の続きが表示されるようにすることができます。