第4回：トップページのお知らせ一覧をCMS化する

この章でやること

• 管理画面でカテゴリー・カスタムフィールド・サンプル記事を準備する

• _top.twig のお知らせ一覧セクションをCMS化する

• V2_Entry_Summary モジュールの関数形式の書き方を理解する

• モジュールIDを作成して表示条件（カテゴリー・件数）を設定する

この章が終わると、管理画面で投稿した記事がトップページのお知らせ一覧に自動的に反映されます。

1. CMSのデータを準備する

テンプレートを実装する前に、管理画面でCMSのデータを準備します。必要な作業は「カテゴリーの作成」「カスタムフィールドの設定」「サンプル記事の投稿」の3つです。

1-1. カテゴリーを作成する

このチュートリアルでは、ルートブログの配下に「お知らせ」カテゴリーを作成します。

インストール時に Develop テーマを選択している場合はこの作業は不要です。

1. 管理画面の左メニューからルートブログの「カテゴリー管理」を開く

2. 「カテゴリーを追加」をクリック

3. 以下のとおり設定して保存する

1-2. カスタムフィールドを設定する

一覧ページでサムネイル画像を表示するため、エントリーにメディアフィールドを追加します。カスタムフィールドはHTMLで定義したフィールド構造をテンプレートファイルに書くことで管理画面の入力欄になる仕組みです。

まず以下のディレクトリ構成でファイルを作成します。

/themes/sample/
└── admin/
    └── entry/
        └── field.html   ← 新規作成

field.html に以下を記述します。メディアフィールドのHTMLはカスタムフィールドメーカーで生成します。

クイックサーチ機能を利用することでカスタムフィールドメーカーのページに移動することができます。MacOSであれば ⌘ + k　、Windows であれば Ctrl + k でクイックサーチを表示して「カスタムフィールドメーカー」と入力し、Enter キーを押下するか、メニュー内の「カスタムフィールドメーカー」をクリックしてください。

カスタムフィールドメーカーで「メディア」タイプを選択し、以下の設定で生成してください。

生成されたHTMLを field.html に貼り付けて保存します。管理画面のエントリー編集画面を開くと、画像アップロード欄が追加されていることを確認できます。

1-3. サンプル記事を投稿する

テンプレートの動作確認用にサンプル記事を3件以上投稿します。

1. 管理画面の「エントリー管理」から「エントリー作成」をクリック

2. カテゴリーで「お知らせ」を選択

3. ステータスを公開に設定

4. タイトル・本文・メイン画像・タグを適当に設定して公開

記事が3件揃ったらテンプレートの実装に進みます。

2. 対象のHTMLを確認する

対象となるHTMLは、_top.twig 内の <section id="news"> です。

<section id="news" class="py-14 sm:py-20 bg-white">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="...">News</h2>
    <ul class="border-t border-gray-200">
      <li>
        <a href="/news/20250807.html" class="...">
          <time datetime="2025-08-07" class="...">2025.08.07</time>
          <span class="...">新商品</span>
          <span class="...">新しい季節限定メニューが登場しました</span>
        </a>
      </li>
      ...
    </ul>
    <div class="mt-8 text-center">
      <a href="/news/">お知らせ一覧へ →</a>
    </div>
  </div>
</section>

この <li> の繰り返し部分をCMSのデータに置き換えます。

3. V2_Entry_Summary モジュールのスニペットを書く

a-blog cms Twig版でエントリーの一覧を出力するには module() 関数でモジュールのデータを取得します。

まず、<ul class="border-t border-gray-200"> の手前でモジュールデータを取得し、<li> の繰り返し部分をループに置き換えます。

{% set entrySummary = module('V2_Entry_Summary') %}

<ul class="border-t border-gray-200">
  {% for entry in entrySummary.items %}
    <!-- 一覧表示の繰り返し部分 -->
  {% endfor %}
</ul>

次に <!-- 一覧表示の繰り返し部分 --> の位置に、元のHTMLにあった <li> 〜 </li> をそのままコピーして貼ります。

{% set entrySummary = module('V2_Entry_Summary') %}

<ul class="border-t border-gray-200">
  {% for entry in entrySummary.items %}
    <li>
      <a href="/news/20250807.html" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
        <time datetime="2025-08-07" class="flex-shrink-0 text-sm text-gray-500">2025.08.07</time>
        <span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800">新商品</span>
        <span class="font-medium text-gray-800 truncate">新しい季節限定メニューが登場しました</span>
      </a>
    </li>
  {% endfor %}
</ul>

この状態で https://ablogcms-tutorial.ddev.site/ にアクセスすると、「新しい季節限定メニューが登場しました」が何件も繰り返し表示されます。まだ固定のHTMLを繰り返しているだけですが、ループが動作していることを確認できます。

4. 変数に置き換える

固定値をCMSの変数に置き換えていきます。置き換える箇所はリンク先・日付・カテゴリー名・タイトルの4点です。

置き換え対応表

{% set entrySummary = module('V2_Entry_Summary') %}

<ul class="border-t border-gray-200">
  {% for entry in entrySummary.items %}
    <li>
      <a href="{{ entry.url }}" class="flex items-center gap-x-4 p-4 border-b border-gray-200 hover:bg-gray-50 transition-colors">
        <time datetime="{{ entry.date | date('Y-m-d') }}" class="flex-shrink-0 text-sm text-gray-500">
          {{ entry.date | date('Y.m.d') }}
        </time>
　　　　{% if entry.category.items is not empty %}
        <span class="flex-shrink-0 rounded-full bg-sky-100 px-2.5 py-0.5 text-xs font-semibold text-sky-800">
          {{ entry.category.items[0].name }}
        </span>
        {% endif %}
        <span class="font-medium text-gray-800 truncate">{{ entry.title }}</span>
      </a>
    </li>
  {% endfor %}
</ul>

https://ablogcms-tutorial.ddev.site/ にアクセスすると、投稿したお知らせ記事がトップページに表示されます。確認できたら、元々HTMLに書かれていた静的な <li> 部分はすべて削除してください。

V2モジュールの変数の見方

V2モジュールでは、Twigテンプレートでモジュールを読み込んだ状態で、クイックサーチ機能から利用可能な変数を確認できる仕組みになっています。

クイックサーチの起動方法

管理者としてログイン中に、以下のショートカットキーを押すことでクイックサーチが開きます。

• Windows / Linux：Ctrl + K

• Mac：⌘（Command）+ K

デバッグモードでの変数確認

クイックサーチを開いた状態で、デバッグモードが有効になっているときに #（シャープ）を入力すると、現在のページで読み込まれているV2モジュールの変数一覧（変数表）が表示されます。

変数名をクリックすると、その変数のパスがクリップボードにコピーされます。
これにより、Twigテンプレートへ変数を貼り付ける際に、手入力せず正確な変数名を利用できます。

5. モジュールIDを設定する

現在の状態では、お知らせ以外のカテゴリーの記事も混在して表示されることがあります。「お知らせ」カテゴリーだけを表示するには、モジュールIDを設定して表示条件を管理画面から指定します。

module() 関数の第2引数にモジュールIDを文字列で渡します。

{% set entrySummary = module('V2_Entry_Summary', 'news_top') %}

また、管理用インクルードをセクション直後に追加して、管理者がページをホバーしたときに「設定」ボタンが表示されるようにします。

{% set entrySummary = module('V2_Entry_Summary', 'news_top') %}

<section id="news" class="py-14 sm:py-20 bg-white">
  {{ include('/admin/module/setting.twig', { moduleInfo: entrySummary.moduleInfo }) }}
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="...">News</h2>
    <ul class="border-t border-gray-200">
      {% for entry in entrySummary.items %}
        <li>...</li>
      {% endfor %}
    </ul>
    <div class="mt-8 text-center">
      <a href="/news/">お知らせ一覧へ →</a>
    </div>
  </div>
</section>

6. 管理画面でモジュールIDを作成する

テンプレートにモジュールIDを書いただけでは機能しません。管理画面側でモジュールIDを登録して表示条件を設定する必要があります。

1. https://ablogcms-tutorial.ddev.site/ の管理ボックスから「（管理ページ）」をクリック

2. 右メニューから「モジュールID」を選択

3. 「モジュール作成」をクリック

4. 以下のとおり設定する

条件設定

7. モジュールIDの表示設定を確認する

モジュールIDを作成すると「条件設定」タブの横に「表示設定」タブが追加されます。ここで件数と並び順を設定します。

表示設定

この設定で、トップページのお知らせには新しい記事から5件が表示されるようになります。

https://ablogcms-tutorial.ddev.site/ にアクセスして、お知らせ一覧に「お知らせ」カテゴリーの記事だけが5件表示されていれば、この章の目標達成です。

まとめ

この章でやったこと：

• module('V2_Entry_Summary', 'news_top') でモジュールデータを取得した

• {% for entry in entrySummary.items %} でループを実装した

• {{ entry.title }}・{{ entry.url }}・{{ entry.date | date('Y.m.d') }}・{{ entry.category.items[0].name }} で各変数を出力した

• モジュールID news_top を管理画面に登録し、カテゴリー・件数・ソート順を設定した

次の章では、一覧から記事をクリックしたときに表示される詳細ページを実装します。本文・タイトル・日付・タグが正しく出力されるようにしていきましょう。