第7回:サンプルデータをインポートして完成を確認しよう


この章でやること

  • 既存のお知らせエントリーを削除し、サンプルデータをインポートする

  • 完成確認チェックリストで動作を網羅的に確認する

  • 次のステップ(フォームのTwig実装)への道筋を把握する

1. エントリーを削除する

a-blog cms は、エントリー単位でのエクスポート&インポートが可能です。

  1. 管理画面の「エントリー管理」を開く

  2. カテゴリー「お知らせ」を選択して検索する

  3. 表示されたエントリーをすべてチェックする

  4. 一括操作のSELECTメニューから「ゴミ箱」を選択し、実行する

8-2. インポートする

  1. インポートデータ : news_improt_data.zip をダウンロードします。

  2. (エントリー作成)ボタンの右横にある 「その他」メニュー → 「インポート」 を選択します。

  3. エントリーインポート画面 が表示されます。

  4. ステータスを「公開でインポート」に設定し、ファイルを選択してインポートを実行します。

SCR-20250826-bdfw

インポートが完了したら、https://ablogcms-tutorial.ddev.site/news/ を開いて新しいお知らせが反映されていることを確認してください。

3. 完成確認チェックリスト

チュートリアルで実装した3つのメインテンプレート(トップ・一覧・詳細)が正しく動作しているか、以下の順序で確認しましょう。各項目は該当する章の実装内容に対応しています。

確認の流れ

トップページ → 一覧ページ → 詳細ページの順に、実際にクリックしながら確認すると効率的です。


トップページ(_top.twig)— 第4章で実装

#

確認項目

該当実装

1

お知らせ一覧に「お知らせ」カテゴリーの記事が5件表示される

モジュールID news_top の表示件数

2

日付が 2025.08.07 の形式で表示される

date('Y.m.d') フィルター

3

カテゴリー名が正しく表示される

{{ entry.category.items[0].name }}

4

記事タイトルをクリックすると詳細ページに遷移する

{{ entry.url }}

5

管理ボックスが横並びで表示される

@include("/admin/action.html")

6

管理者がモジュールにホバーすると「編集」リンクが表示される

{{ include('/admin/module/setting.twig', ...) }}


一覧ページ(news/index.twig)— 第6章で実装

#

確認項目

該当実装

1

お知らせが3件ずつ表示される

モジュールID news_index の表示件数

2

記事に画像が設定されている場合、サムネイルが表示される

{% if entry.mainImage and entry.mainImage.path %} + resizeImg(600)

3

サマリーが200文字で切り詰められて表示される

mb_trim(200, '...') フィルター

4

「もっと見る」をクリックすると2ページ目に遷移する

{% if entrySummary.pagination.nextPage %}

5

最終ページでは「もっと見る」が表示されない

entrySummary.pagination.nextPage が空のとき非表示


詳細ページ(news/_entry.twig)— 第5章で実装

#

確認項目

該当実装

1

記事ごとに異なるタイトル・本文が表示される

module('V2_Entry_Body', null, { eid: EID })

2

日付が 2025年8月7日 の形式で表示される

entry.datetime + date フィルター

3

カテゴリー名が表示され、クリックするとカテゴリーURLに遷移する

{{ entry.category.items[0].url }}

4

タグが設定されている記事では #タグ名 が表示される

{% for tag in entry.tags %}

5

ブラウザのタブに記事タイトルが表示される

{{ ENTRY_TITLE }}

6

パンくずリストに記事タイトルが表示される

{{ ENTRY_TITLE }}

7

エントリー編集ボックスが表示される(ログイン状態)

{{ include('admin/entry/action.twig', { entry }) }}


共通項目

#

確認項目

該当実装

1

すべてのページで管理ボックスが正しいデザインで表示される

acms-admin.min.css + acms.js

2

ログアウト状態では管理ボックスおよびエントリー編集ボックスが非表示になる

moduleInfo は管理者のみ

3

CSS・JavaScriptのパスに /themes/sample/ が自動付与されている

a-blog cms のパス補完

4

<meta name="generator" content="a-blog cms" /> が出力されている

CMS経由表示の確認


4. Twig 構文のエラーについて

Twig 構文にエラーがあるとデバッグモード時に以下のようなエラーメッセージが表示されます。

このようなエラーが出た場合、Twig のエラーメッセージを確認すると原因を特定しやすくなります。エラー画面には次の情報が表示されます。

  • エラー内容:何が問題か(例:Unknown "dete" filter

  • ファイル名と行番号:どのテンプレートの何行目か(例:news/_entry.twig line 137)

  • 修正のヒント:Twig が推測してくれる場合がある(例:Did you mean "date"?

フィルター名のタイプミス

フィルター名を間違えると「Unknown "○○" filter」と表示されます。たとえば datedete と打ち間違えると、次のようなエラーになります。

Unknown "dete" filter. Did you mean "date" in "news/_entry.twig" at line 137?

エラーメッセージの「Did you mean "date"?」を手がかりに、該当行のフィルター名を確認して修正してください。

5. 次のステップ

このチュートリアルではお知らせ機能のCMS化を扱いました。実務ではさらに以下の実装が必要になります。

お問い合わせフォームのCMS化

サンプルサイトの contact/ フォームはまだ静的なHTMLのままです。a-blog cmsにはフォーム機能が標準搭載されており、入力画面・確認画面・送信完了画面をテンプレートとして実装できます。

フォーム機能のドキュメントを参考に実装してみましょう。

テンプレート継承の活用

このチュートリアルでは各テンプレートに <head> や管理UIリソースを個別に書きました。Twigのテンプレート継承{% extends %}{% block %})を使うと、共通部分を親テンプレートに集約して保守性を高められます。

さらに詳しく学ぶ


まとめ

この章でやったこと:

  • サンプルデータをインポートし、完成確認チェックリストで動作を確認した

  • Twig 構文のエラーについての確認ポイントを把握した

  • フォームのCMS化・テンプレート継承など、次のステップへの道筋を確認した

このチュートリアルを終えて、静的HTMLを a-blog cms のTwig テーマとして動かす基本フローが身につきました。標準テンプレートとの最大の差分は「module() 関数でデータを取得し、モジュールごとの返り値の構造に応じて出力する記法」です。これらを押さえれば、モジュールIDによる設定管理など、a-blog cmsとしての仕組みは標準テンプレートと変わりません。ぜひ次のプロジェクトからTwig テンプレートでのテーマ開発を試してみてください。