ポストインクルード

目次

Entry_Continueモジュールと組み合わせて記事の続きをページ遷移なしで表示する


ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

通常は続きを読むのリンク部分をクリックすると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の続きを読む」ボタンを押すと、ページ遷移なしで記事の続きが表示されるようにすることができます。

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


ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

ここでは、組み込み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'
}],

postIncludeOnsubmitMark ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。
postIncludeOnreadyMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。
postIncludeOnBottomMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページの下部までスクロールしたら自働的に送信されて結果を表示します。「.js-post_include-bottom」の場合は、class="js-post_include-bottom" が付与されているform要素に適用されます。
postIncludeOnIntervalMark ここで指定したセレクタのフォームは、送信ボタンを押さなくても一定時間ごとに自働的に送信されて結果を表示します。「.js-post_include-interval」の場合は、class="js-post_include-interval" が付与されているform要素に適用されます。
postIncludeMethod swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える
postIncludeEffect slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし
postIncludeEffectSpeed postIncludeEffectでエフェクトが指定されている時のみ有効になります。slow:ゆっくり表示 / fast:早く表示
postIncludeOffset postIncludeOnBottomMark で指定されたセレクタのフォームの下部からの読み込み開始位置になります。
postIncludeReadyDelay postIncludeOnreadyMark で指定されたセレクタのフォームの読み込み開始時間を遅くする設定になります。ミリ秒で設定します。
postIncludeIntervalTime postIncludeOnIntervalMark で指定されたセレクタのフォームの読み込み時の更新頻度をミリ秒で設定します。
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

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

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

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


ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

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の引数設定

モジュール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)

ページを移動せずにフォームの検索結果を表示する(post include)


ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

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の引数設定

モジュール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>

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

位置情報を付加してポストインクルードする


ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

ポストインクルードを使うことで、検索結果など別コンテンツをページを移動することなく引っ張ってくることができます。技術的には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クエリストリングを参照に変更

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


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

POSTモジュールについて


ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。

代替機能として、組み込みJS「htmx」の利用を推奨いたします。

ポストインクルードでは通常「ACMS_POST_2GET」モジュールを利用します。

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

ACMS_POST_2GETモジュールは、POSTする情報(ブログ情報、エントリ情報、テンプレート、キーワードなど)から、URLに変換してリダイレクトします。ポストインクルードではこのリダイレクトされたURLのHTMLを取得して表示します。

POST_2GET_Ajax

Ver. 3.1.17 から新しいモジュール「ACMS_POST_2GET_Ajax」が利用できるようになりました。

ACMS_POST_2GETモジュールとの違い

tpl指定した場合の挙動が異なります。「ACMS_POST_2GET」モジュールの場合、tpl指定されていても、URLにtplコンテキストが入らない場合があります。

以下のポストインクルードを例に実際に取得するHTMLのURLの違いを見てみます。ここで「%{CID}」は「news」カテゴリーを指定しているものとします。

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

ACMS_POST_2GETの場合

https://example.com/news/search.html?keyword=xxxxxx

ACMS_POST_2GET_Ajaxの場合

https://example.com/news/tpl/search.html?keyword=xxxxxx

この場合「ACMS_POST_2GET」の場合は「themes/ご利用テーマ/news/search.html」テンプレートがないと404になりますが、「ACMS_POST_2GET_Ajax」の場合は、tpl指定されているので「themes/ご利用テーマ/search.html」があれば取得できることになります。

「ACMS_POST_2GET」の場合でも、テンプレートをカテゴリディレクトリに設置すれば解決しますが、多くのカテゴリがある場合は同じテンプレートをカテゴリー毎に設置しないといけなくなります。

「ACMS_POST_2GET_Ajax」であれば、必ずURLに「tplコンテキスト」が入るので、1つのテンプレートで済みます

Ver. 3.1.17 以降のバージョンの場合、ポストインクルードで指定するモジュールは「ACMS_POST_2GET_Ajax」をご利用ください。