PHPを使って国産ヘッドレスCMS「microCMS」を試す

以前から注目されている国産のヘッドレスCMSであるmicroCMSを試してみました。ヘッドレスCMSはAPIベースで更新するため、フロントエンドとバックエンドが分離され、コンテンツの“データ部分”だけを管理することができます。そのためウェブページはもちろん、アプリや、SNS、デジタルサイネージなど他媒体にもデータを出稿することができます。
※WordPressとの違いについては、公式ブログに分かりやすい記事「ヘッドレスCMSって何？WordPressとの違いや特徴を解説」があるので参照してください。

1. ユーザー登録〜最初の設定

microCMSのサイトでユーザー登録を済ませ、無制限でAPIを呼び出すことができ、最大5個のAPIを使える無料のHobbyプランで試してみます（2025年6月現在）。コンテンツ（API）の「＋」から「自分で決める」を選択します。「API名」と「エンドポイント」を入力し、APIの型は「リスト形式」としました。

続いてAPIスキーマの定義で、WordPressで言うカスタムフィールドを設定するような感覚で、コンテンツの内容に応じて「フィールドID」「表示名」「種類」を設定していきます。あとから追加や編集など行いたい場合は、右上の「API設定」→「APIスキーマ」から設定できます。

ここまで設定できたら、表示および動作確認用に「＋追加」からダミーの情報を入力します。

2. PHPを使ってmicroCMSのコンテンツを表示

続いてmicroCMSで入力したコンテンツの内容を表示するためのフロント側を用意します。microCMSはNext.jsやNuxt、Gatsby、Astroなどのフレームワークと連携することができますが、今回は汎用的なPHPで試してみます。チュートリアルのPHPとの連携からSDKをインストールする方法もありますが、今回はChatGPTが用意してくれたオリジナルコードでやってみます。

PHPを実行できる環境にtest.phpなどのファイル用意します。APIプレビューをクリックし、「取得」ボタンを押すと入力した内容がJSON形式で表示されているのを確認できます。この画面にある「GET」のAPIのURLと、「X-MICROCMS-API-KEY」のAPIキーを入力します。

$apiUrl = 'https://username.microcms.io/api/v1/XXXXX/YYYYY'; // APIのURLを入力
$apiKey = 'XXXXXXXXXXXXXXXXX'; // X-MICROCMS-API-KEYのAPIキーを入力

上記に続けて、JSONデータを読み出すコードを記述します。
※コードの表示がうまくいかないため、以下のコード9行目「curl_■xec」は「curl_exec」に変更をしてください。

// cURLを使ってAPIにリクエスト
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'X-MICROCMS-API-KEY: ' . $apiKey
]);

$response = curl_■xec($ch); // ←※■をeに置き換えてください。
curl_close($ch);

// JSONをデコード
$data = json_decode($response, true);

・・・・・

2-1. テキストフィールド・テキストエリア

一番オーソドックスな単一行のテキストフィールドの入力内容を表示してみます。以下のサンプルコードでは、三項演算子（条件式 ? 真の場合の値 : 偽の場合の値;）をつかって条件分岐をしています。titleが存在すれば、HTMLタグや特殊文字をhtmlspecialchars()をつかってエスケープしたうえで表示し、存在しなければ「テキストが取得できません」を表示しています。種類が複数行の「テキストエリア」でも同じです。

// フィールドID「title」、表示名「タイトル」、種類「テキストフィールド」
<?php $title = isset($data['title']) ? htmlspecialchars($data['title']) : 'テキストが取得できませんでした'; ?>
<h1><?php echo $title; ?></h1>

2-2. リッチエディタ

ブログ記事の投稿画面にあるようなリッチエディタの場合は、HTMLの内容をそのまま表示する必要があるため、エスケープ処理は行わずそのまま表示するようにします。

// フィールドID「contents」、表示名「内容」、種類「リッチエディタ」
<?php if (!empty($data['contents'])): ?> // もしcontentsの内容が空でなければ
  <div class="contents">
    <?= $data['contents'] ?>
  </div>
<?php endif; ?>

2-3. 日付

種類が日付の場合はひと工夫が必要です。microCMSからはISO 8601形式「2025-06-10T15:00:00.000Z」で取得されるため、PHPの DateTime クラスを使って整形する必要があります。同じように三項演算子を使って条件分岐を行い、タイムゾーンを設定して表示します。

// フィールドID「date」、表示名「日付」、種類「日付」
<?php $date = isset($data['date']) ? (new DateTime($data['date'], new DateTimeZone('UTC'))) -> setTimezone(new DateTimeZone('Asia/Tokyo')) -> format('Y年n月j日') : '日付が取得できませんでした'; ?>
<p><?php echo $date; ?></p>

2-4. 真偽値（ブーリアン）

「はい」のときは表示、「いいえ」のときは表示しないなど、ラジオボタンを用いて真偽値で制御する方法です。サンプルコードは、「はい」「いいえ」で表示する内容を変更する処理を行っています。

// フィールドID「boolean」、表示名「はい or いいえ」、種類「真偽値」
<div class="boolean">
<?php
if (isset($data['boolean'])) {
    if ($data['boolean']) {
        echo '<p>「はい」のときに表示する内容</p>';
    } else {
        echo '<p>「いいえ」のときに表示する内容</p>';
    }
} else {
    echo '設定されていません';
}
?>
</div>

2-5. セレクトフィールド

選択した複数の項目の内容を表示するなど、チェックボックスを用いて制御する方法です。サンプルコードは、foreach構文を使って選択した項目の内容をリストタグ<li>を使って出力しています。

// フィールドID「select」、表示名「選択」、種類「セレクトフィールド」
<ul class="select">
<?php
if (isset($data['select']) && is_array($data['select'])) {
    foreach ($data['select'] as $item) {
        echo '<li>' . htmlspecialchars($item) . '</li>';
    }
} else {
    echo '<li>設定されていません</li>';
}
?>
</ul>

2-6. 画像・複数画像

最後にmicroCMSにアップロードした画像を表示する方法です。URLで値が返ってくるため、<img>タグであればsrcに設定する方法が一番シンプルです。複数画像のときは、foreach構文を使って全部を出力します。

// フィールドID「img」、表示名「画像」、種類「画像」
<?php if ($imgUrl): ?><img src="<?php echo $imgUrl; ?>"><?php else: ?>画像なし<?php endif; ?>

// フィールドID「imgArray」、表示名「複数画像」、種類「複数画像」
<div class="imgArray">
<?php
if (isset($data['imgArray']) && is_array($data['imgArray'])) {
    foreach ($data['imgArray'] as $img) {
        if (isset($img['url'])) {
            $imgUrl = htmlspecialchars($img['url']);
            echo '<img src="' . $imgUrl . '">';
        }
    }
} else {
    echo '画像なし';
}
?>
</div>