いろんなヘッドレスCMSを触ってみる

いろんなヘッドレスCMSがあるので、それぞれどんな特徴があるのか調査📝

Contentful

ドイツ発のヘッドレスCMS

ドキュメント

こちらから閲覧可能

価格

こちらから確認できます
。
Community（フリープラン）のひとつ上になると、急に $489 / month かかってしまうので、Community の範囲内で余裕を持ってデータ管理できた方が良さそう。
一方で Community でも基本的な機能にあまり制限が設けられていなさそうなので、個人ブログや簡単なお知らせ機能等であれば問題なく利用できそう。

データ転送

フリーで 750GB/月（超過不可）・Professionalで 750GB/月（課金で超過あり）・Enterpriseで 10TB（課金で超過あり） となっています（アセットの転送量のみ）

APIリクエスト

フリーで 2,000,000/月（超過不可）Community で 2,000,000/月 （課金で超過あり）、Premium で制限なしです

ユーザー

価格のところにありますが、フリープランでは５人までで、登録できるロールは管理者と編集者の2種類となっています。
Enterprise では25人で最大4つまでのロール、Premium では 3000人で制限なしのカスタムロールが設定できるようです

コンテンツ

Contentful では、一番上にGroupという括りがあります。
その下には、ContentModelというデータの定義があり、その定義に沿ってContentというデータが作成されるような仕組みになっています。

それらの概念とは別に、Mediaというデータが Contentful にはあります。
Media では、画像や動画などのファイルを保存することができます。
フリー版ではアップロードするファイルごとに50MBまでのサイズ制限がついているようで、動画とかだと厳しい場合があるかもしれません。

Media で保存したファイルは、Content から参照することができます。
それぞれのコンテンツやモデルは以下の画像のような関係の認識。

データフェッチ

APIキーは4種類あるぽい
APIキー周りの話は、こちらから確認できますが、このページの文面を見る限りデータ取得にはContent Delivery APIを使用すればよさそう
Javascript では SDK が提供されている
クライアントを作成して

const client = createClient({
    space: CONTENTFUL_SPACE_ID,
    accessToken: CONTENTFUL_ACCESS_TOKEN,
});
const entries = await client.getEntries<IBlogFields>({
    content_type: "blog",
    order: "-fields.release",
});
return entries.items.map((item) => item.fields);

その他

Webhooks

Webhooks を利用してコンテンツ等の更新時にデプロイしたりできそう
また、Webhooks で発火したイベントをもとにデータを S3 とかにバックアップしたりすることもできるぽい（https://dev.classmethod.jp/articles/contentful-s3-backup/）

豊富なプラグイン

Contentful は様々な SaaS と連携するプラグインが他のCMSと比較しても多いイメージがありました
何か既に運用している基盤サービスがあって、そこと連携してごにょごにょしたい人にとって有力な候補となるかもしれません

モデルの型ファイル出力

有志の方？のライブラリを用いて用いて、Contentful 上で定義されているモデルの型の出力が可能
Typescripts で開発している場合はかなり便利そう

export interface IBlogFields {
  /** Title */
  title: string;

  /** release */
  release?: string | undefined;

  /** author */
  author?: Entry<{ [fieldId: string]: unknown }> | undefined;

  /** slug */
  slug: string;

  /** content */
  content?: Document | undefined;

  /** thumbnail */
  thumbnail?: Asset | undefined;
}

/** ブログ用のモデル */

export interface IBlog extends Entry<IBlogFields> {
  sys: {
    id: string;
    type: string;
    createdAt: string;
    updatedAt: string;
    locale: string;
    contentType: {
      sys: {
        id: "blog";
        linkType: "ContentType";
        type: "Link";
      };
    };
  };
}

Newt

Newt は日本発のCMS

ドキュメント

こちらから閲覧可能

価格

こちらから確認できます
なんとコンテンツ数・モデル数・メンバー数がフリープラン含め無制限...（2022年12月時点）
今後のプラン展開を経て変わる可能性はありますが、太っ腹すぎる...
予約投稿機能なんかも全プランでついています
フリープランではアップロードするファイルごとに50MBまでのサイズ制限があり、ここは Contentful と同様の仕様です
またフリープランでは、ロールは管理者権限のみしか割り当てられないので、ユーザー間で細かくロールを制御したい場合は Professional プランを契約する必要があります
Professional プランでも ¥2,980 とかなり安いので、後々の規模拡大や運用変更も考えやすいのかなと思いました

データ転送

フリーで100GB/月・Professionalで 300GB/月・Enterpriseで 1TB~ となっています（コンテンツの転送量も含まれる？）

APIリクエスト数

フリーで 2,000,000/月かつ超過不可・Professionalで 2,000,000/月かつ課金で超過可・Enterpriseで 無制限 となっています

ユーザー

価格のところにありますが、メンバー数は無制限です
ロールはフリープランでは管理者権限のみ。
Professional では3つのロールがデフォルトで与えられており、それ以降は１つ増えるごとに500円課金されるシステムのようです。
一番上の Enterprise はロール数無制限

コンテンツ

Newt でも一番大きなデータ管理の単位はスペースという概念
さらに Newt では、スペースの下にアプリという括りを持っており、その中にモデルというコンテンツの型を定義することができます
メディアはスペース単位で管理されているため、別々のアプリ間でも共有できるようです

データフェッチ

データ取得に必要な API Key は、Newt CDN APIとNewt APIの２種類があるらしい
詳しくはこちらから確認できるが、CDN経由で取得するかであったり、下書きのものを取得するのかなどの違いがあるらしい
Javascript では SDK が提供されており、以下のように取得できる
データの型を出力する方法は少し調べたところ無料ではなさそうなので、自分で定義する必要ありかも

// クライアント作成
const client = createClient({
  spaceUid: NEWT_SPACE_UID,
  token: NEWT_CDN_API_TOKEN,
  apiType: 'cdn', // You can specify "cdn" or "api".
})

// コンテンツ取得
// appUid: アプリ の UID
// modelUid: アプリに所属するモデルの UID
const contents = await client.getContents<Article>({
    appUid: 'blog',
    modelUid: 'article',
})

const articles = contents.items
return res.json(articles)

その他

外部ストレージの設定

Newt では、データの保存場所に任意の外部ストレージを設定できるようです
外部ストレージを仕様すると Newt のデータ通信量を削減できるため、各プランの制限に余裕をもたすことができます

Webhook

Webhook でコンテンツ更新時にデプロイしたりできるらしい

Appのエクスポート/インポート

Newt では有料プランに限りアプリ単位でデータをインポート/エクスポートできるようです
データのバックアップを取ったりすることができそう
また、エクスポートするデータにはモデルの情報も含まれるため、スクリプトを組めばエクスポートしたデータから Typescript の型情報を生成するみたいなこともできそう
型情報の生成の面で言えば、Contentful は無料でできるので、そこの便利さでは Contentful が勝りそう

microCMS

日本発のCMS

ドキュメント

こちらから確認可能

価格

こちらから確認可能
まずは利用頻度の高そうなフリープランについて
フリープランでは、３個までのAPIを作成することができます
またユーザーは３名まで作成することができ、それぞれの権限設定はできない（全員管理者権限のような形？）となっています
メディア１つの容量制限は40MBとなっており、Contentful や Newt と比べると 10MB 少ない容量となっています

有料プランに注目してみると、２段階認証の必須化やセキュリティチェックシートの回答などセキュリティに関するサービスを受けることができることが明示的にプランに組み込まれています
またSSOログインができるため、既に社内で管理しているアカウントと連携することで運用が楽になったりというメリットもありそうです

APIリクエスト

全プラン無制限！

データ転送量

フリーは 20GB/月（超過なし）、Teamは 200GB/月（課金超過あり）、BusinessとAdvance は 1TB/月（課金超過あり）となります

ユーザー

価格のところにもあるように、フリープランでは３名まで作成でき、ユーザーのロールは作成ができません
有料になると上限を従量課金制で上げることができます
¥1500 課金すること、1ユーザーを作成することができます
また、ロールの設定については Bussiness プラン以上で付与することができるようになります

コンテンツ

microCMS では、サービスという単位を一番大きな単位として管理しています
サービスの中では、APIというデータの型・エンドポイントを設定でき、そこに紐づく形でコンテンツという形でデータを保存できます
メディアという形で画像等を保存することができますが、メディアはサービス単位で保存されるため、同じサービスであれば API をまたいで利用することができます

データフェッチ

一番簡単な例は以下になります
エンドポイントや取得したデータの型は自分で定義する必要がありますが、
とてもシンプルで使いやすそうです

const { createClient } = require('microcms-js-sdk');

const client = createClient({ serviceDomain: 'service-domain', apiKey: 'api-key' });
// service-domain は XXXX.microcms.io の XXXX 部分
client
  .get({
    endpoint: 'hello',
  })
  .then((res) => console.log(res))
  .catch((err)> console.log(err));

この他に画像APIがデフォルトで使えるようです。
この機能を提供している imgix は Newt や Contentful でも連携が可能ですが、別途 imgix アカウント連携が必要となっています

その他

WebHook

コンテンツとメディアの更新をWebHookを用いて検知することができるようです

APIスキーマのインポート・エクスポート

こちらにあるように、APIスキーマを JSON 形式でインポート・エクスポートできるようです
Contentful のように有志の方が作成されたライブラリがあるようで、JSONファイルから型定義ファイルへの変換ができるようです
今後リリース予定の v2 では、OpenAPI の定義ファイルをダウンロードできる機能のリリース予定もあるらしく、スキーマ駆動の開発がよりしやすくなりそう

少しまとめる

結局どれ使おう？

かなりざっくり見てきましたが、
コストをかけないことを念頭に置いて考えると以下のような感じでしょうか？

小さな機能で多くのデータを扱いたい！（ブログを1000件登録するとか？）
=> Newt （エンドポイントは少ないが、データの登録数は一番多そう）

インフラの管理を全てサービス側に任したい！（自分でストレージとか管理したくないとか？）
=> microCMS（画像生成含めサービス側でやってくれる）

既に運用しているSaasと連携したい！（データをクラウドで一元管理したいとか？）
=> Contentful（プラグインで多くのSaasとの連携が期待できそう）