ドキュメント

開発者ドキュメント

TailCMSでヘッドレスAPIを構築・運用するための実践ガイド。コピー&ペーストで動くコード例付き。

ドキュメント

TailCMS 開発者ドキュメント

TailCMSはオープンなヘッドレスCMSです。管理画面でコンテンツモデルを定義すると、REST・GraphQL APIが自動生成されます。フロントエンドの技術選定は自由——React、Vue、Next.js、モバイル、IoTなど、あらゆるチャネルへ同じコンテンツを配信できます。

このドキュメントでは、セットアップからAPIの使い方、認証、拡張、デプロイまでを順に解説します。

クイックスタート

Node.js 18以上が必要です。次のコマンドで新規プロジェクトを作成します。

npx create-tailcms-app@latest my-project
cd my-project
npm run develop

起動後、ブラウザで /app を開き、最初の管理者アカウントを作成してください。コンテンツタイプを作成すると、即座にAPIが /api/<plural> に公開されます。

アーキテクチャ

TailCMSは「管理(バックエンド)」と「表示(フロントエンド)」を分離したヘッドレス構成です。

  • 管理パネル/app で動作するReact製の管理UI。
  • コンテンツAPI:REST(/api)とGraphQL(/graphql)。
  • データベース:SQLite / PostgreSQL / MySQL に対応。
  • プラグイン:機能を追加できる拡張ポイント。

コンテンツタイプ

コンテンツタイプはデータの構造です。コレクションタイプ(記事一覧など複数)とシングルタイプ(トップページなど単一)の2種類があります。管理画面の Content-Type Builder でノーコードに定義できます。

例:article コレクションを作ると、以下のRESTエンドポイントが自動生成されます。

GET /api/articles
GET /api/articles/:documentId
POST /api/articles
PUT /api/articles/:documentId
DELETE /api/articles/:documentId

コンポーネント

コンポーネントは再利用可能なフィールドの集合です。SEOメタ情報や住所など、複数のコンテンツタイプで共有する構造をまとめられます。動的ゾーン(Dynamic Zone)を使えば、ページビルダーのような柔軟なレイアウトも実現できます。

多言語 (i18n)

ロケールごとにコンテンツを管理できます。APIでは locale パラメータで言語を指定します。

GET /api/articles?locale=ja
GET /api/articles?locale=en

REST API

すべてのコレクションは /api/<plural> に公開されます。レスポンスは datameta を含むJSONです。

// 記事を1件作成
POST /api/articles
{ "data": { "title": "Hello TailCMS", "body": "..." } }

フィルタ

filters 演算子で柔軟に絞り込めます($eq, $ne, $lt, $gt, $contains, $in など)。

// title に "CMS" を含む記事
GET /api/articles?filters[title][$contains]=CMS

// 公開済みのみ
GET /api/articles?filters[publishedAt][$notNull]=true

ソート・ページネーション

// 新しい順に10件ずつ
GET /api/articles?sort=createdAt:desc&pagination[page]=1&pagination[pageSize]=10

レスポンスの meta.pagination に総件数やページ数が含まれます。

populate・fields

リレーションやメディアは既定では含まれません。populate で展開し、fields で取得項目を絞ります。

// author と cover を展開し、title だけ取得
GET /api/articles?populate[author]=true&populate[cover]=true&fields[0]=title

GraphQL

GraphQLプラグインを有効にすると /graphql で単一エンドポイントが使えます。

query {
  articles(pagination: { pageSize: 10 }) {
    documentId
    title
    author { name }
  }
}
mutation {
  createArticle(data: { title: "Hello" }) {
    documentId
  }
}

APIトークン

管理画面の 設定 → APIトークン でトークンを発行し、Authorization ヘッダーに付与します。読み取り専用・フルアクセスなど権限を選べます。

curl /api/articles -H "Authorization: Bearer <API_TOKEN>"

Users & Permissions

エンドユーザー向けの認証・認可も標準搭載。ロール(Public / Authenticated / カスタム)ごとに、どのAPIを呼べるかを制御します。サインアップ・ログインはJWTで行います。

POST /api/auth/local/register
{ "username": "taro", "email": "[email protected]", "password": "..." }

Webhooks

コンテンツの作成・更新・公開などをトリガに、外部URLへPOSTできます。静的サイトの再ビルドや通知連携に便利です。設定は 設定 → Webhooks から。

プラグイン

機能はプラグインで拡張できます。GraphQL、ドキュメント生成、SSOなどが利用可能です。独自プラグインの作成にも対応しています。

npm run tailcms -- plugin:build

デプロイ

本番ビルドして任意のNode.jsホスト・コンテナ・専有クラウドへ。詳しくは デプロイガイド を参照してください。

npm run build
npm run start

CLI

よく使うコマンド:

npm run develop # 開発サーバ(管理画面: /app)
npm run build # 本番ビルド
npm run start # 本番起動

管理画面を開く 料金を見る