ポストインクルード

目次

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

ここでは、組み込み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',
//  'speed'     : 'slow'
}],
postIncludeEvalValueMark    : '.js-post_include-eval_value',
postIncludeOnsubmitMark ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。
postIncludeOnreadyMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。
postIncludeMethod swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える
postIncludeEffect slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし
postIncludeEffectSpeed postIncludeEffectでエフェクトが指定されている時のみ有効になります。
slow:ゆっくり表示 / fast:早く表示
postIncludeOffset js-include_bottomで読み込み時の下部からの読み込み開始位置になります。
postIncludeReadyDelay js-include_readyで読み込み時の読み込み開始時間を遅くする設定になります
postIncludeIntervalTime js-post_include-intervalで読み込み時の更新頻度をミリ秒で設定します。
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。
postIncludeEvalValueMark JavaScriptのコードを変換する場合に使用します。フォームが送信されたタイミングでJavaScriptのコードを変換し、送信結果の表示を更新します。
例)<input type="hidden" name="keyword" value="ACMS.Config.searchEngineKeyword" class="js-post_include-eval_value" />

設定内容を変更するには

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて」を参照してください。

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

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>

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

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

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)

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

ポストインクルードを使うことで、検索結果など別コンテンツをページを移動することなく引っ張ってくることができます。技術的には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モジュールが書かれたテンプレートを、位置情報付きのポストインクルードで読み込めば、現在位置から近い順で表示する事ができるようになります。

ポストインクルードで色々な情報を引っ張ってくる

ポストインクルードを使うことにより、現在表示している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">
<!-- ファイル名 ( 降順 ) -->
<input type="hidden" name="order" value="id-asc">
<!-- ID ( 昇順 ) -->
<input type="hidden" name="order" value="id-desc">
<!-- ID ( 降順 ) -->
<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">

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