Headless CMSとしてのProcessWire活用術：API化とフロント分離の実装ガイド

ヘッドレスCMS（Headless CMS）とは、バックエンド（管理画面・データ管理）とフロントエンド（表示部分）を分離したCMSのことです。

ページの出力をHTMLで提供せず、データのみをAPIで提供し、表示は別のフレームワークが担います。

ヘッドレス化のメリット：

• フロントエンドにReact, Vue, Svelteなどを自由に使える

• 高速・軽量なSPAやPWAの構築が可能

• モバイルアプリや複数サイトへのデータ共有が簡単に

• セキュリティやスケーラビリティの向上

ProcessWireはもともとデータ構造が柔軟で、ページ単位で自由にJSON出力を構成できるため、ヘッドレス化には非常に向いています。

ProcessWireのページは、テンプレート内でPHPにより自由に出力できます。

これを活かして、テンプレートファイル内でJSONを出力すれば、即席のREST APIが構築可能です。

例えば /api/posts/ というURLで記事一覧をJSONで返すように設定すれば、フロントエンドからJavaScriptでfetchして利用できます。

例：ブログ記事一覧をJSONで返す

/site/templates/api-posts.php を作成し、下記のように記述します：

<?php
header("Content-Type: application/json");

$posts = $pages->find("template=post, limit=10, sort=-created");

$data = [];
foreach ($posts as $post) {
    $data[] = [
        "id" => $post->id,
        "title" => $post->title,
        "body" => $post->body,
        "created" => date("c", $post->created),
    ];
}

echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

これで https://example.com/api-posts/ にアクセスすると、記事一覧がJSON形式で取得できるようになります。

APIを公開する際には、セキュリティ対策も忘れてはいけません。

公開APIと非公開APIの分離

• 公開用エンドポイント：認証不要、公開情報のみ

• 管理用API：トークンやセッション認証が必要

CORS設定（クロスドメイン制御）

JavaScriptから外部ドメインでアクセスする場合は、以下のようなCORSヘッダが必要です。

header("Access-Control-Allow-Origin: *"); // 実際はドメイン制限推奨

認証トークンの検証例

$token = $_GET['token'] ?? '';
if ($token !== 'your-secure-token') {
    http_response_code(403);
    echo json_encode(["error" => "Forbidden"]);
    exit;
}

たとえばNext.jsの getStaticProps() から以下のようにデータ取得が可能です：

export async function getStaticProps() {
  const res = await fetch('https://example.com/api-posts/');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

取得した posts をページ内でループ表示すれば、Jamstack型ブログの完成です。

ProcessWireのAPIをさらに強化するには、以下のようなモジュールも便利です。

ProcessGraphQL

• GraphQL APIを自動生成

• クエリベースで柔軟にデータ取得可能

SlimPHP や FastRoute との連携

• より洗練されたREST APIルーティングを実現

• モダンなエラーハンドリングやミドルウェア対応

ProcessWireは、静的HTML生成にも強いCMSですが、それだけではありません。

APIベースで扱うことで、柔軟なヘッドレスCMSとしての一面を活かすことができます。

「好きなフロントで自由に表示したい」

「SPAやPWAを作りたい」

「1つのCMSで複数のサービスにデータ提供したい」

そんな要望があるなら、ProcessWireをヘッドレスCMSとして運用してみてはいかがでしょうか？

補足リンク

• ProcessWire公式ドキュメント： https://processwire.com/docs/

• ProcessWire GraphQLモジュール： https://github.com/dadish/ProcessGraphQL

• Next.js公式： https://nextjs.org/