第1回：Twig版チュートリアルをはじめよう
このチュートリアルで学ぶこと
静的HTMLサイトを部分的にCMS化する流れを、Twigテンプレートエンジンを使って体験します。
完成イメージは次のとおりです。
トップページ：「お知らせ一覧」が管理画面から更新できる状態になる
詳細ページ：記事ごとにタイトル・本文・日付が動的に切り替わる
一覧ページ：サムネイル画像・ページャーつきのお知らせ一覧が動く
このチュートリアルを終えると、「コーダーが書き上げた静的HTMLを、最小限の変更でCMS管理下に置く」という実務に直結するフローが身につきます。
なぜ Twig なのか
a-blog cms は Ver. 3.2 から、従来の標準テンプレートに加えて、Twig によるテンプレート記述をサポートしています。
標準テンプレートは a-blog cms 独自の記法で設計されており、できることは豊富です。一方で、ループや条件分岐といった制御構文が独自仕様になっているため、シンプルな出力は簡単にできても、少し複雑なカスタマイズをしようとすると途端に覚えることが増えるという側面があります。
Twig は PHP 製のテンプレートエンジンで、Craft CMS・Symfony・Drupal などでも広く採用されています。変数の出力・ループ・条件分岐の書き方が、PHP や JavaScript などの一般的なプログラミング言語に近いため、「Twig の書き方を覚える」というより「すでに知っている書き方がそのまま使える」という感覚で書けます。
たとえば条件分岐なら、標準テンプレートでは a-blog cms 固有の構文を覚える必要がありますが、Twig では次のように書けます。
{% if entry.tags %}
{% for tag in entry.tags %}
<span>#{{ tag.name }}</span>
{% endfor %}
{% endif %}「タグがあれば一覧を出す」という意図が、コードを読んだだけで伝わります。Twigに慣れたメンバーがいれば、a-blog cmsを知らなくてもテンプレートのロジックを読み解けます。これはチーム開発や長期保守において大きなメリットになります。
どちらの形式でも a-blog cms の機能はすべて利用できます。新規テーマをTwigで書く、あるいは既存テーマをTwig化してメンテナンス性を高める、どちらの用途にも使えます。
1. サンプルのウェブサイトを確認します
ここからは実際に、静的HTML を CMS化する手順を進めていきます。最初に、チュートリアルで使用するサンプルのウェブサイトを確認しましょう。
今回のチュートリアルでは、HTML ファイル 15枚 からなる静的なウェブサイトをサンプルとして使用します。デザインは Tailwind CSS を用いてスタイルを定義しており、メニューなどの動きには Alpine.js を利用しています。
サイトの構成は以下のようになっています。
├── index.html # トップページ（メインビジュアル・サービス紹介・お知らせ一覧）
├── news/
│ ├── index.html # お知らせ一覧ページ
│ ├── page2.html # お知らせ一覧 2ページ目
│ ├── 20250710.html # お知らせ詳細（5記事分）
│ ├── ...
│ └── 20250807.html
├── service/
│ ├── index.html # サービス一覧
│ ├── catering.html
│ ├── cooking-class.html
│ └── private-chef.html
├── contact/
│ ├── index.html # お問い合わせフォーム
│ ├── confirm.html
│ └── thanks.html
├── css/
│ └── custom.css
└── images/チュートリアルでは、このうち トップページの「お知らせ一覧」 と お知らせの詳細ページ（news フォルダ内の HTML） を題材に、静的 HTML を CMS 管理に置き換える流れを学びます。 まずは 「お知らせ部分を CMS化する」 ことで、手軽に「できた！」という達成感を体験しましょう。
サンプルファイルのダウンロード (3MB)
相対パスとルート相対パスについて
HTML を CMS のテーマとして利用する際、画像や CSS へのパス指定方法によっては、表示が崩れることがあります。ここでは、相対パスとルート相対パスの違いを確認しておきましょう。
サンプルファイルには、相対パス版のファイルとルート相対パスの両方が同梱されています。
相対パス
現在のファイルを基準にして、そこから見た相対的な位置を指定する方法です。
<link rel="stylesheet" href="../css/custom.css">
<img src="./images/logo.png">../ は「1つ上の階層」を意味します。
ページの階層が深くなると、../../ のように複雑になりやすい。
パソコンでファイルを直接閲覧可能です。
ルート相対パス
サイトのルート（ドメイン直下 /）を基準にして指定する方法です。
<link rel="stylesheet" href="/css/custom.css">
<img src="/images/logo.png">
どのディレクトリにあるページからでも同じ指定が使える。
CMS 化したときに、テンプレートの場所に関わらず一貫して参照できる のでおすすめ。
ウェブサーバーのドキュメントルートにアップロードして閲覧が可能になります。
既存の静的 HTML サイトを CMS 化する場合、すでに用意されている HTML は 相対パス で書かれているケースが多いと思われます。
a-blog cms では相対パスでも動作しますので、どちらを使っても問題ありません。
ただし、これから新しくコーディングを行うサイトであれば、担当者には 「ルート相対パスでお願いします」 と伝えておくことをおすすめします。
ルート相対パスを使うことで、テンプレートの階層や呼び出し場所に依存せず、どのページからも一貫して正しく参照できる だけでなく、後からファイル構成を整理して階層を移動した場合でもパスが変わってしまう心配が少なくなり、のちのち実装が楽になります。
2. 動作環境を用意します
このチュートリアルでは、a-blog cms Ver. 3.2.x の環境で、Develop テーマを新規インストールしたところから始める 前提で説明しています。
本文中の例では https://ablogcms-tutorial.ddev.site/での利用を想定していますが、2-2 の ablogcms.io（無料お試し環境） を利用する場合でも問題ありません。その際は、以下のフォームで利用する URL を設定し、（変更する）ボタン をクリックしてください。
このドキュメントページ内のリンクが https://ablogcms-tutorial.ddev.site/ から指定した URL に書き換わり、クリックするとその環境に対応したページを開けるようになります。
2-1. ローカル環境に新規にインストールする
a-blog cms は動的な Web アプリケーションです。静的な HTML ファイルをただ置くだけでは動かず、動作するためにいくつかのソフトウェアが必要です。
Web サーバー — ブラウザからのリクエストを受け取り、処理結果をレスポンスとして返すソフトウェアです（Apache や Nginx など）
PHP インタープリター — a-blog cms 本体は PHP で書かれています。PHP のコードを解釈・実行するプログラムが必要です
データベース — 記事やユーザーなどのデータを保存・取得するための仕組みです（MySQL など）
これら3つを自分のパソコン上に個別にインストール・設定するのは手間がかかります。DDEV を使うと、これらをまとめてコンテナとして動かすことができ、バージョン管理や設定の手間を大幅に省けます。
DDEV とは
DDEV は、Web 開発用のローカル環境を素早く、確実に立ち上げるためのツールです。内部的には Docker を使ってサーバーを動かしていますが、複雑な Docker の設定を自分で書く必要はありません。コマンド数行で PHP・MySQL・Web サーバーが揃った環境が手に入ります。
すでに Docker を直接使ったことがある方なら、docker-compose.yml を手書きする代わりに、DDEV がその作業を引き受けてくれるイメージです。
なぜ DDEV を使うのか
MAMP は GUI で操作できるシンプルさが魅力ですが、チーム開発や複数プロジェクトの管理が複雑になりがちです。Docker を直接使う方法は柔軟性が高い反面、設定ファイルの記述に慣れが必要です。
DDEV はその中間にあたる選択肢で、以下のようなメリットがあります。
macOS・Windows・Linux すべてで同じように動く
プロジェクトごとに PHP バージョンを切り替えられる
ddev startひとつで起動、ddev stopで停止とシンプルチームで設定ファイルを共有すれば全員が同じ環境を再現できる
セットアップ手順
1. Docker をインストールする
DDEV は内部で Docker を使うため、先に Docker のインストールが必要です。お使いの OS に合わせて DDEV 公式ドキュメントを参照してインストールしてください。
複数のDocker provider がありますが、Docker 公式が提供する Docker Desktop の利用を推奨します。
2. DDEV をインストールする
次に DDEV 本体をインストールします。お使いの OS に合わせて DDEV の公式ドキュメントを参照してください。
インストール後、以下のコマンドを実行してバージョンが表示されれば、正しくインストールされています。
ddev -v3. プロジェクトフォルダを作成する
任意の作業ディレクトリに、プロジェクト用のフォルダを作成します。
mkdir ablogcms-tutorial
cd ablogcms-tutorial4. a-blog cms のファイルを配置する
ダウンロードページから a-blog cms のパッケージをダウンロードし、展開してください。展開後、ablogcms ディレクトリの中身をプロジェクトフォルダ直下の web/ ディレクトリに配置してください。
ablogcms-tutorial/
└── web/ ← a-blog cms のファイルをここに展開する5. DDEV プロジェクトを設定する
以下のコマンドで DDEV の設定ファイルを生成します。
ddev config --project-type=php --docroot=web --php-version=8.4 --database=mysql:8.4PHP バージョンは動作条件を確認して、必要に応じて変更してください。
6. DDEV を起動する
ddev start起動が完了すると、アクセス用の URL（例: https:/ablogcms-tutorial.ddev.site）が表示され、以下のます。
7. a-blog cms をインストールする
ブラウザで表示された URL にアクセスするとインストール画面が開きます。
データベースの接続設定は以下のように入力してください。
項目 | 値 |
|---|---|
データベースホスト |
|
データベース名 |
|
ユーザー名 |
|
パスワード |
|
db は DDEV が自動的に用意するデータベースコンテナのサービス名です。localhost や 127.0.0.1 では接続できませんのでご注意ください。
よく使うコマンド
コマンド | 説明 |
|---|---|
| プロジェクトを起動する |
| プロジェクトを停止する（データは保持される） |
| プロジェクトを再起動する |
| プロジェクトの接続情報を表示する |
| Sequel Ace でデータベースを開く |
| プロジェクトとデータベースを削除する |
| すべてのプロジェクトとコンテナを停止する |
その他のコマンドについては DDEV 公式ドキュメント（Commands） を参照してください。
あとは画面の指示に従って進め、必要な情報を入力しながらインストールを完了してください。途中で テーマの選択画面 が表示されますので、必ず 「Develop」 を選択してください。
2-2. 無料のお試しサーバー ablogcms.io を利用する
CMS を試しに触れる際に一番のハードルになるのは、動作環境の準備 です。この点をクリアするために、開発元では 30日間限定の無料お試しサーバー環境 を用意しています。
SFTP 接続が可能 ： テーマファイルを編集してカスタマイズできます。
PHP のアップロードは不可 ： カスタマイズはテーマファイルに限られます。
メール送信には注意 ： フォームなどからのメール送信を行う場合は、SMTP 設定が必要です。
完全無料 ： お試し後に課金されることはありません。
30日で環境は自動削除 ： 期限が過ぎると利用できなくなります。
繰り返し利用可能 ： 必要であれば新しい環境を再度申し込むことができます。
インストール作業を省略して、すぐに a-blog cms を試したい方におすすめの方法 です。
まとめ
この章でやったことのおさらいです。
サンプルサイトの構成と、このチュートリアルで扱う範囲を確認した
Twig と標準テンプレートの記法の違いを概観した
a-blog cms の動作環境を用意した
次の章では、Twigテンプレートの基本構文を学びます。実際にコードを書き始める前に、変数・ループ・条件分岐の3パターンを最小サンプルで確認しておきましょう。