管理画面から任意のエントリーを選んで表示する。｜a-blog cms 

この記事は、「[a-blog cms Advent Calendar 2021](https://adventar.org/calendars/6371)」12日目の記事です。

公式で紹介されている方法ですが、以前、適切な検索キーワードがわからず、該当記事にたどり着くまでに時間がかかったので、実装例から紹介したいと思います。

今回は、テストとして「掃除当番リスト」を作ってみようと思います。

やりたいことは以下です。

- 管理画面：表示したいエントリーを選ぶ。（任意の数）
- 管理画面：選べるエントリーは、指定のカテゴリーに属しているエントリー。
- 表示側：任意の場所に、記事の一覧を表示する。（エントリーのタイトルクリックで、エントリー詳細表示）

![visual.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206717/18714498-3637-ae13-2e17-a20752a39438.png)

## 各エントリーとカテゴリーを用意。
- エントリーの表示を管理するエントリー。（表示したいエントリーを選ぶ。）
- 必要なカテゴリーを用意。
- 必要なエントリーを用意。

今回は表示エントリーの管理に、エントリーのカスタムフィールドを使いましたが、管理・運用によってはカテゴリーやブログなどにカスタムフィールドを使っても良いかもしれません。

## カスタムフィールドを用意する。
表示を管理するエントリー専用に、カスタムフィールドを作ります。

今回はエントリーのカスタムフィールドを使うので、以下ディレクトリにファイルを用意しました。（ご利用の環境に合わせてご用意ください。）
/themes/利用中のテーマ/admin/entry/ecd/管理用エントリーのファイル名.html

続いてコードを用意します。
カスタムフィールドメーカーのカスタムフィールドグループから、カスタムフィールドを用意します。（カスタムフィールドメーカーの画面は、表示側でも使いますので、開いたままにしておいてください。）

今回は、以下の通りにしました。

- グループのタイトル：丸山太郎さん
- フィールド名（変数）：touban
- 入力欄の種類：セレクトボックス
- タイトル：エントリー名
- フィールド：touban_maru
- ツールチップ：なし
- 項目名（label）：あああ（後で変更するのでテキトーに）
- 値（value）：aaaa（後で変更するのでテキトーに）

コードは以下です。

```html:
<h2 class="acms-admin-admin-title2">丸山太郎さん</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
    <tr>
      <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
      <th></th>
      <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
    </tr>
  </thead>
  <tbody>
    <!-- BEGIN touban:loop -->
    <tr class="sortable-item">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <table>
          <tr>
            <th>エントリー名</th>
            <td>
              <select name="touban_maru[]" class="acms-admin-form-width-full">
                <option value=""></option>
                <option value="aaaa" {touban_maru:selected#aaaa}>あああ</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
    <!-- END touban:loop -->
    <tr class="sortable-item item-template">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <table>
          <tr>
            <th>エントリー名</th>
            <td>
              <select name="touban_maru[]" class="acms-admin-form-width-full">
                <option value=""></option>
                <option value="aaaa">あああ</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colSpan="3">
        <input type="button" class="item-insert acms-admin-btn-admin" value="追加" />
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="@touban[]" value="touban_maru" />
<input type="hidden" name="field[]" value="touban_maru" />
<input type="hidden" name="field[]" value="@touban" />
```

上記コードで、管理画面は以下のような表示になります。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206717/54b7cb2b-c8a3-b08a-8d1a-d1e58d2778a5.png)

## 任意のカテゴリーに属するエントリーを選択できるようにする
現状ですと、カスタムフィールドメーカーで設定した選択項目しか選択できません。
この部分を、カテゴリー「掃除（ID:10 / コード:clean）」に属するエントリーの一覧を選択できるようにします。

そのために使うのが、「モジュールの外部コンテキスト挿入機能」と「モジュールのエスケープ機能」です。

[モジュールのエスケープ機能 & モジュールに外部コンテキスト挿入機能を追加](https://developer.a-blogcms.jp/release28/ajax/ctx.html)

まず、23行目あたりの`<option value="aaaa" {touban_maru:selected#aaaa}>あああ</option>`を、以下のように書き換えます。（`\` がついている部分が、エスケープしている部分です。）

```html:
<!-- BEGIN_MODULE Entry_List ctx="cid/10" -->
<!-- BEGIN entry:loop -->
<option value="{eid}" \{touban_maru:selected#{eid}\}>{title}</option>
<!-- END entry:loop -->
<!-- END_MODULE Entry_List -->
```

45行目あたりの`<option value="aaaa">あああ</option>`も、以下のように書き換えます。

```html:
<!-- BEGIN_MODULE Entry_List ctx="cid/10" -->
<!-- BEGIN entry:loop -->
<option value="{eid}">{title}</option>
<!-- END entry:loop -->
<!-- END_MODULE Entry_List -->
```

このようにすることで、予め用意していたエントリーが選択できるようになります。
さらに、カスタムフィールドグループで作っているので、「追加」から選択するエントリーを増やすこともできます。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206717/2d6a1bea-148a-f68a-7ddc-5bff55ef85f1.png)

以上で、任意のエントリー選択が可能になりました！

## 表示させる
続いて、表示側に移ります。

先ほど操作したカスタムフィールドメーカー画面に戻り、「出力ソース」からコードをコピーして、任意のファイルに貼り付けます。（※適切なモジュールのloop内に貼り付けます。テストでは「エントリー本文/Entry_Body」に貼り付けています。）

```html:
<h2 class="acms-admin-admin-title2">丸山太郎さん</h2>
<table class="adminTable acms-admin-table-admin-edit">
  <tbody>
    <!-- BEGIN touban:loop -->
    <tr>
      <td>
        <table>
          <tr>
            <th>エントリー名</th>
            <td>
              <div>
                <!-- BEGIN_IF [{touban_maru}/eq/aaaa] -->あああ<!-- END_IF -->
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- END touban:loop -->
  </tbody>
</table>
```

そして、` <!-- BEGIN_IF [{touban_maru}/eq/aaaa] -->あああ<!-- END_IF -->` 部分を以下のようにカスタマイズしていきます。

```html:
<!-- BEGIN_IF [{touban_maru}/nem] -->
<!-- BEGIN_MODULE\ Entry_List ctx="eid/{touban_maru}" -->
<!-- BEGIN\ entry:loop -->
<a href="\{url\}">\{title\}</a>
<!-- END\ entry:loop -->
<!-- END_MODULE\ Entry_List -->
<!-- END_IF -->
```

すると、選択したエントリーの一覧が表示されるようになります。
エントリータイトルは、エントリー詳細ページへリンクしています。

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206717/b7b6415e-85eb-9666-3991-cbe3c2602fc2.png)

最後に、表示を`<table>`からリスト表示に変えてて、今回のテストは完成です！

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206717/0163618e-860b-7779-24f9-5608d5927efd.png)

この方法を知ってから、a-blog cms実装の幅が広がりました。工夫次第でいろいろ活用できます！

かなりざっくり書いてしまったので、もしこの内容について需要がありましたら、もう少し詳しく書きますので、不明点などコメントください〜