Ver. 2.8 で ctx（外部コンテキスト）が実装されてから、URLにない情報を動的に引っ張ってこれるになったため、ポストインクルードの利用頻度は下がったと思います。ただ現状でもポストインクルードにしかできない事もあります。このハンズオンでは、そんなポストインクルード機能の一例をご紹介します。

ここでは、beginner2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。

ポストインクルードの基本

まず、初めて触る方もいると思うので、ポストインクルード機能のおさらいをします。

どんな機能？

ポストインクルード（post include）機能は、フォームでpost（送信）した結果を、ページのリロードなしで表示する機能です。つまりページリロードなしに、他ページの情報を引っ張ってくることができます。技術的にはJavaScriptのAjaxを使用しています。

使い方

使い方は簡単で、検索したい情報の書かれた「POST_2GETモジュール」フォームを用意し、クラスに js-post_include をつけるだけです。あとは、検索ボタンを押した時に、フォームの情報の内容をひっぱてきて、 target で指定した要素に、コンテンツをページリロードなしで表示します。（targetを省略した場合は、form自体が置きかわります）

<form action="" method="post" class="js-post_include acms-form" target="#target">
  <input type="text" name="keyword" value="カスタムフィールド " size="15" />
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="submit" name="ACMS_POST_2GET" class="acms-btn" value="検索" />
</form>

<div id="target"></div>

ポイントは、フォームで tplコンテキスト を指定している点です。これがなくてもポストインクルードは動作しますが、テンプレートを指定していないので、ページ全部を持ってきてしまいますので、テンプレートを指定する場合が多いと思います。

下にデモを用意したので、検索ボタンを押してみてください。

ポストインクルードの実装ポイント

これで、基本の使い方はわかりましたが、もう少しポストインクルードの実装方法をみていきます。

コンテンツの情報は、input要素だけでなく action でも指定可能

基本的には、ACMS_POST_2GETモジュールは、input要素でコンテンツの情報を指定しますが、 actionでもURLコンテキストを指定可能です。例えば以下のようにキーワードをactionに指定する事も可能です。

<form action="?keyword=カスタムフィールド" method="post" class="js-post_include acms-form" target="#target">
  <input type="hidden" name="tpl" value="include/searchResultSample.html" />
  <input type="submit" name="ACMS_POST_2GET" class="acms-btn" value="検索" />
</form>

<div id="target"></div>

すぐさま実行

さきほどまでは、自分でボタンを押すまで、コンテンツをひっぱてこないようになっていましたが、ページ表示時に自動で持ってきたい場合もあると思います。その時は、フォームにつけるクラス名を「js-post_include-ready」に変更します。これで自動できにひっぱってくることができるようになります。

その他のオプション

そのほかにもオプションはありますが、ここでは割愛します。詳しくは、ドキュメント をご覧ください。

次のエントリーをひっぱってくる

ポストインクルードの基本が抑えられたので、本題の次のエントリーを引っ張ってくる実装をしていきましょう。

概要

エントリー詳細ページで、次の記事へのリンクをつけることは、よくあると思います。ただ詳細ページを表示する Entry_Bodyモジュール の変数表をみると、urlとエントリータイトルしか出力ができません。デザインによっては、画像を表示したり、カスタムフィールド の情報を出力したい場合があると思います。これをポストインクルードを使って実装していきましょう。

ポストインクルードを仕込む

まず次のエントリー、前のエントリーのリンク部分をカスタマイズしましょう。beginner2019テーマだと、 themes/beginner2019/include/parts/pager.html になります。

<!-- BEGIN serialNavi:veil -->
<nav aria-label="ページ送り">
	<ul class="serial-nav clearfix">
		<li class="serial-nav-item serial-nav-item-prev"><!-- BEGIN prevLink -->
			<form action="{url}" method="post" class="js-post_include-ready">
				<input type="hidden" name="tpl" value="include/parts/serial-navi.html">
				<input type="hidden" name="ACMS_POST_2GET">
			</form>

			<!-- END prevLink -->
		</li>
		<li class="serial-nav-item serial-nav-item-next"><!-- BEGIN nextLink -->
			<form action="{url}" method="post" class="js-post_include-ready">
				<input type="hidden" name="tpl" value="include/parts/serial-navi.html">
				<input type="hidden" name="ACMS_POST_2GET">
			</form>
			<!-- END nextLink -->
		</li>
	</ul>
</nav>
<!-- END serialNavi:veil -->

ポイントは、次（前）のエントリーの情報が、URLとタイトルしかないので、フォームの action に、URLを入れて、次（前）のエントリー情報を渡しているところになります。 またクラスに、 js-post_include-ready を指定して、自動的に読み込まれるようにしています。

リンクのテンプレートを作る

ポストインクルードの仕込みができたので、表示するテンプレートを用意しましょう。 今回は、 themes/beginner2019/include/parts/serial-navi.html に新しいHTMLを作成します。モジュールは色々な情報を出力できる、 Entry_Summary を使いましょう。

<!-- BEGIN_MODULE Entry_Summary ctx="/bid/%{BID}/eid/%{EID}" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<a href="{url}"><!-- BEGIN image:veil -->
	<img src="%{ROOT_DIR}{path}" alt="{alt}" class="acms-img-responsive" width="100"><!-- END image:veil -->
	<!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" class="acms-img-responsive" width="100"><!-- END noimage -->
	<p>{title}</p>
</a>
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

ポイントは、ctx（外部コンテキスト）で情報を絞っているところです。bidとeidをURLの情報で絞り込むようにしています。ctxの記述がないと、単なるエントリーのリストが表示されてしまいます。（ctxではなくモジュールID化しても大丈夫です）

以上で完了です。Entry_Summaryで表示できるものなら、なんでも引っ張ってくることができるようになりますので、ぜひお試しください。

a-blog cms利用約款

このa-blog cms利用約款（以下「本約款」といいます）は、使用者(個人または法人)と有限会社アップルップル (以下「アップルップル」といいます)の間における、a-blog cms、関連するソフトウェア部品群、並びにドキュメント（以下「本ソフトウェア」といいます）に関する約款です。

第1条【ライセンス】

使用者は、本約款の定めに従い、本ソフトウェアを利用できるライセンスを有するものとします。使用者は、本ソフトウェアを1台のサーバー上に存在する1つのウェブサイトにインストールすることができます。

第2条【禁止事項】

使用者は、次の各号に定める行為を行ってはなりません。

1. 本ソフトウェアから派生するソフトウェアを制作すること
2. 本ソフトウェア又はその複製を如何なる形態においても、第三者に販売、譲渡、ライセンス供与、開示、その他の方法による移転等第三者が使用できるようにすること
3. 本ソフトウェアの改造、翻訳、逆コンパイル又は逆解析（リバース・エンジニアリング）を、法律上認めている範囲を超えて行うこと及びそれを試みること
4. 本ソフトウェア上の権限の表示又は商標を変更すること
5. 本ソフトウェアを公序良俗に反したコンテンツとして使用すること

アップルップルは、本ソフトウェアに関する全ての権利（全ての知的財産権を含む）を保有し、本約款において明示的には許諾していない本ソフトウェアに関する全ての権利をも保有します。

第3条【著作権表示】

アップルップルは、本ソフトウェアを使用するに使用者に対してバナー及びテキストでの著作権表示を強制することはしません。ただし、著作権がアップルップル以外にあると誤認させる行為一切を禁じます。 a-blog cmsが生成するHTMLドキュメントには、下記のコードがHEAD要素内に追加されます。

<meta name="generator" content="a-blog cms" />

第4条【技術サポート】

本ソフトウェアの利用に関して、電話でのサポートは提供されません。
質問、要望を含めた無償サポートは、ウェブサイト上のフォーラムでのみ行われますが、開発元によるサポートを保証するものではありません。 有償でのメールサポートとして、スタンダードライセンスに対して「年間メールサポート」が、プロフェッショナル、エンタープライズライセンスに対して「年間メンテナンス」が別途契約として提供されます。これらはサービスの契約期間中有に専用メールフォームから契約ドメインの「インストール及びアップデートについて」「テーマ、モジュールなどのカスタマイズについて」「エントリー投稿などの使用方法について」「その他、a-blog cmsの操作に関連するもの」についての質問を受け付けるものとなります。 なお、有償無償を問わず、サポート対象は現行バージョンから2メジャーバージョン前までのものとします。バージョンの定義は、製品バージョンナンバーの小数点第一位をメジャーバージョンとします。

第5条【無担保・無保証】

本ソフトウェアは、現状有姿の状態で提供され、明示的にも黙示的にも、何らの担保及び保証するものではありません。アップルップル及びその供給者は、その商品性、特定目的への適合性及び第三者の権利を侵害していないことを黙示的に担保・保証することを含み、明示的であると黙示的であるとを問わず、如何なる種類の担保・保証をも行うものではありません。 本ソフトウェアの品質、性能、インストール、使用に伴うプログラム・エラー、装置の損傷、データやソフトウェア・プログラムの消失、不稼動及び中断等一切のリスクは、使用者の負担とします。本ソフトウェアの使用に関する適切性の判断は、使用者自身の責任で行うものとし、その使用による一切のリスクは、使用者の負担とします。

第6条【責任制限と免責】

使用者は、アップルップルが損害発生の可能性を事前に通知した場合は勿論それ以外の場合であっても、利益の逸失、信用の失墜、不稼動、データ使用不能等に起因する損害並びにその他顕在化していない損害を含み直接的、間接的、偶発的、例外的、結果的若しくは懲罰的損害に関して、アップルップルは一切の責任を負わないことを明示的に理解し同意します。また、使用者はアップルップル及びその他のパートナーを　使用者による本ソフトウェアの使用から及びその他本ソフトウェアに関わり発生する如何なる直接的、間接的、偶発的、例外的、結果的、懲罰的損害についての責任から一切免責することに同意します。

第7条【プログラム・サービス・約款の改訂および提供の終了】

アップルップルは、アップルップルのウェブサイトにて公示することにより、本ソフトウェア並びに本約款を変更することができるものとします。また、アップルップルは本約款並びにアップルップルの提供するサービスを、書面による通知のあるなしにかかわらず、終了することができるものとします。 プログラムは基本的にバージョンナンバーの小数点第一位をメジャーバージョンとし、発表日から2年間または次メジャーバージョンの発表のいずれか先に訪れる日まで、小数点第三位をバージョンナンバーとしたバグフィックスおよびセキュリティフィックスリリースを行います。 発表日から2年間が経過または次メジャーバージョンが発表されたプログラムに対してはバグフィックスおよびセキュリティフィックスリリースを提供しません。

第8条【一般規定】

本規約は、日本国法に準拠するものとします。 本ソフトウェア利用に際して、訴訟の必要が生じた場合には、名古屋地方裁判所を第一審の専属管轄裁判所とします。

http://example.com/ccd/ecd.html/tpl/modified.html

http://example.com/tpl/renewal/newTop.html

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

<!-- 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 -->

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

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

<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>

<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>