ヘッドレスCMS - Strapiを使ったブログ管理画面の実装

ヘッドレスCMSの利点

従来型CMSでは、コンテンツ管理と表示（ビュー）が密に結びついています。一方、ヘッドレスCMSは、コンテンツを管理・提供する「バックエンド」のみを担い、表示は外部のフロントエンドに委ねる構成です。

ヘッドレスCMSを採用する主なメリットは次の通りです。

・表示性能・スピード向上
・フロントエンド自由度の向上
・マルチチャネル配信の容易さ
・開発・運用の分業化
・セキュリティ／スケーラビリティ
・ベンダーロックイン回避

ただし、プレビュー機能構築が必要、技術ハードル上昇などの注意すべきデメリットもあります。用途と体制を見極めて導入判断をするのが良いでしょう。

Strapiの概要

Strapi は、Node.js 上で動作するオープンソースのヘッドレスCMS です。管理画面 UI が標準で備わっており、API（REST／GraphQL）を即座に公開できます。

主な特徴：

・コンテンツ型（Content Type）を GUI 上で定義可能
・リレーション、フィールド拡張、カスタムロジック追加可能
・認証・認可機能（ユーザー／ロール管理）を標準搭載
・ローカライズ（多言語）機能を備えており、将来的な国際化対応が可能
・拡張性が高く、カスタムロジックを中間層に自由に追加できる

このラボでは、Strapi を立ち上げて、社内ブログ用の記事を管理・表示できる流れを構築します。

Strapi – 初期設定

1. プロジェクト生成
npx create-strapi@latest my-blog --quickstart
このコマンドで、Strapi がデフォルト設定で起動します。

2. 管理者ユーザー登録
ブラウザで管理画面を開くと、初回アクセス時にログイン用アカウント作成画面が表示されます。管理者アカウントを作成します。

3. Content Type の作成
管理画面の「Content-Type Builder」で、「Post」（記事）などのコレクションタイプを作成し、以下のようなフィールドを追加します。

・title（文字列）
・body（rich text / text）
・publishedAt（日時）
・slug（文字列）
・tags（リレーション：Tag モデル）
・（オプション）thumbnail（メディア／画像）

4. API 権限設定
管理画面の「Settings」→「Roles & Permissions」（または “Users & Permissions”）へ移動します。
Public ロールに対して、Post の find／findOne 権限を有効にし、フロントエンドから記事取得を許可します。

Strapi – コンテンツの登録

管理画面の「Content Manager」から「Post」を選択し、新規追加します。
各フィールド（タイトル・本文・スラグ等）を入力します。
tags フィールドには既存のタグを選ぶか、新規タグを作成してリレーションを設定します。
公開（Publish）ボタンをクリックします。
複数の記事とタグをあらかじめ登録しておきます。

Strapi – フェッチ

フロントエンド（Next.js／React／Vue 等）から API を使って記事を取得します。REST API の例は次の通りです。

GET /api/posts?populate=*&filters[slug][$eq]="example-slug"

・populate=* を指定することで、関連タグ・画像などを含む展開取得が可能です。
・複数記事取得時はページネーションパラメータを付与します（例：pagination[page]／pagination[pageSize]）。
・また、GraphQL プラグインを有効にすれば、GraphQL ベースでのクエリ取得も可能です。

取得した JSON をフロント側で処理し、記事リスト表示や個別記事ページを構築します。