a-blog cmsで指定条件のエントリーを表示する、「ポストインクルード」の使い方まとめ

この記事は、[a-blog cms Advent Calendar 2017](https://adventar.org/calendars/2570)の2日目の記事です。

指定した条件のエントリー一覧を表示する、a-blog cmsの「ポストインクルード」機能の、バージョン2.7.20時点のガイドラインです。

https://developer.a-blogcms.jp/document/postinclude/

内部的にはAjaxの技術が使用されていますが、HTMLとa-blog cmsの独自タグのみで実装することができます。

# 実装の流れ

大まかな流れについては、以下の記事を参照してください。

送信ボタンを押さずに検索結果を表示する（post include） | a-blog cms developer
https://developer.a-blogcms.jp/document/postinclude/csv-1273.html

1. どのような条件でエントリーを絞り込むかを決める
2. 検索結果を呼び出すモジュールIDを作成する
3. 2.で決めたモジュールのタグを使用して、エントリーの繰り返し部分を表示するテンプレートを作成する<br>（ヘッダやMETAタグは不要です）
4. 実際に検索結果を出力したいテンプレート内に、指定された書式でform要素を書く
5. form要素内に、3.で作成したテンプレートへのパスを、name属性「tpl」で渡す

# 「検索結果を呼び出すモジュールID」の設定方法

モジュールの種類は、汎用性の高い、Entry_Summaryモジュールが無難です。
IDはなんでも良いですが、「summary_postinclude」など、ポストインクルードに使用していることがわかる名称が良いです。

<img width="446" alt="post_include_01.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/21117/5ea3a45c-b5b3-802b-b123-eb38deb9ec67.jpeg">

画像の通り、「条件設定＞引数」の、絞り込みの対象にしたい値に「チェック」を入れます。
カスタムフィールドの値であれば「フィールド」、タグであれば「タグ」です。

よくわからない場合は、全部にチェックを入れてしまっても動作します（処理が遅くなる可能性はあります）。

# 「検索結果を呼び出すform要素」の書き方

## 基本書式

引数と条件は、URLコンテキスト（URLの法則）に従います。
https://developer.a-blogcms.jp/document/urlcontext/entry-2289.html
条件には、グローバル変数（%{BID}など）や、表示中のエントリーの情報を渡すことができます。

```html:acms_postinclude_load_outline.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="(テーマ内の表示テンプレートへのパス)" />
・・・
	<input type="hidden" name="（引数）" value="（条件）" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```
## 絞り込みの例

### 検索結果「りんご」

特に設定を行わない限り、a-blog cmsではカスタムフィールドの値も検索対象となります。
METAタグなど、対象としたくない値がある場合は以下を参照ください。
https://developer.a-blogcms.jp/document/customfield/entry-1749.html

```html:acms_postinclude_load_keyword.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="keyword" value="りんご" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### エントリーIDが100

仕様上、eidは一件しか絞り込めないので、複数呼び出すときは、formタグを繰り返し書きます。

```html:acms_postinclude_load_eid.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="eid" value="100" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### カスタムフィールド「example」の値が「りんご」

カスタムフィールドは、fieldの宣言の行も必要となります。

```html:acms_postinclude_load_keyword_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="field" value="example" />
	<input type="hidden" name="example" value="りんご" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### チェックボックス型のカスタムフィールド「example」に、チェックが入っていない

「値が空（em）」として絞り込みます。

```html:acms_postinclude_load_eid_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="field" value="example" />
	<input type="hidden" name="example@operator" value="em" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### カスタムフィールド「example」の値が「りんご」「バナナ」「みかん」のいずれか

正規表現の「| （いずれか）」で絞り込みます。

```html:acms_postinclude_load_keyword_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="field" value="example" />
	<input type="hidden" name="example" value="(りんご|バナナ|みかん)" />
	<input type="hidden" name="example@operator" value="re" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### タグ「りんご」が付いている

```html:acms_postinclude_load_tag.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="tag" value="りんご" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### タグ「りんご」「バナナ」「みかん」のいずれかが付いている

タグの複数検索は「/」で区切ります。

```html:acms_postinclude_load_tag_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="tag" value="りんご/バナナ/みかん" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### 数値フィールド「example」が101以上

```html:acms_postinclude_load_gte.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="field" value="example" />
	<input type="hidden" name="example" value="101" />
	<input type="hidden" name="example@operator" value="gte" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### 数値フィールド「example」が100未満

「以上」と「未満」の両方の絞り込みはできないようです（できるよという方、コメントで情報ください）。

```html:acms_postinclude_load_lt.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="field" value="example" />
	<input type="hidden" name="example" value="100" />
	<input type="hidden" name="example@operator" value="lt" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

### 公開日が2016年12月1日

「一年前の記事」に活用できます。

```html:acms_postinclude_load_date.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="date" value="2016/12/01" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```


### 公開日が2016年12月1日から2017年11月30日

指定した開催期間内のイベントを表示する場合に活用できます。

```html:acms_postinclude_load_date_range.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
	<input type="hidden" name="tpl" value="include/module/summary_related.html" />
	<input type="hidden" name="date" value="2017-01-01/-/2017-11-30" />
	<input type="submit" name="ACMS_POST_2GET" />
</form>
```

# 補足

## ポストインクルードのイベントハンドラ

生成されたDOMに、ウェブフォントなどのJSの処理を適用したい場合は、「acmsAfterPostInclude」イベントを使用してください。
以下は、FONTPLUSのリロードを行う例です。

```javascript:acms_postinclude_fontplus.js
ACMS.addListener("acmsAfterPostInclude", function() {
  //ここに処理が入ります。
  FONTPLUS.reload();
}, $('.js-post_include').get(0));
```

## 特殊な実装例

ポストインクルードは応用するといろいろなことができます。

位置情報を付加してポストインクルードする
https://developer.a-blogcms.jp/document/postinclude/entry-2767.html

[a-blog cms]ポストインクルードで現在のエントリーを表示しない
https://www.penpale.jp/blog/post_include_hide_current_post.html
（ポストインクルードでも「現在のエントリーを表示しない」を有効にする方法）

お店が今やってるかどうか、アクセス時点の営業情報を表示する（Plugin_Scheduleと連動）
http://tabegoto-shinbun.com/cms/entry-1403.html

----

**a-blog cms Advent Calendar 2017**
https://adventar.org/calendars/2570

1日目はこちら
a-blog cmsのカスタマイズが捗る、Hook.php の設定 | maki-o memo
https://www.maki-o.net/memo/entry-133.html

3日目はこちら
ページの表示速度で気をつけている a-blog cms の「画像サイズ」と「モジュールの実行時間」について | mkasumi.com
https://mkasumi.com/a-blogcms-page-speed-image-size.html