この記事はJAMstack Advent Calendar 24日目の記事です。
前提
本投稿にはJAMStackとヘッドレスCMS自体の説明は省きます。
JAMStackとは何か、ヘッドレスCMSとは何かといった所については、JAMstack Advent Calendarの主催者であるshibe97さんが大変分かりやすい日本語記事を幾つか投稿してくださっているので、是非見てみてください。
-
JAMstackとは何を指すのか今一度考えてみる
- Jamstack公式ページの和訳 + 考察記事
- ヘッドレスCMSとは何か?従来CMSとの違いやメリデメを解説!
- GitベースのCMSとAPIベースのCMSの比較
はじめに
フリーランスエンジニアのyanagiと申します。
自分用にHeadlessCMSについての知見をまとめようとしていたところ
JAMstack Advent Calendarの存在を知り、どうせならと参加してみました。
headlesscms.orgを見ると、数多くのヘッドレスCMSが存在する事がわかります。
ぱっと見で人気がありそうなのはStrapi, Contentful, Ghost, NetlifyCMSあたりでしょうか。
これらにどんな違いがあるのか、何を基準に選んだらいいのか
中々考えるのが大変な部分だと思うので、そのあたりの参考になる記事をかけたらと思っています。
探していたもの
そもそもなぜ4種類ものHeadlessCMSを触ったのかという話になるのですが
現在、株式会社Xemono様にて
企業のコーポレートサイトやWebメディアなどを簡単に作れるパッケージ製品の開発を行っており(近日公開予定)
パッケージのベースとなる良いCMSを探していました。
大雑把な前提は以下通りです。
- JAMStackの思想で作りたい
- viewはnuxtとTypeScriptで作る
- デプロイ & ホスティングはgithub actionsとgithub pagesで実現する
CMSに求めていた機能は以下の通り
- 最低限、ステージング環境と本番環境が欲しい
- 管理画面が日本語対応であると嬉しい
- 維持・管理コストは低い方が良い
- コンテントタイプの定義等を簡単に再利用したい
- コンテンツ側の自動テストもしたい
- 情報が多い方が良い
これらの要求を満たしてくれそうなものと、既に開発実績のあったWordpressを使う方法を試してみました。
- WordpressのHeadless化
- Strapi
- ContentFul
- microCMS
使い方等には言及しません。
どの製品もドキュメントがしっかりしているので、良いと思う製品があれば公式の方から色々読んでみてください。
簡単な比較
2019/12/24現在の状況
主観を含む部分が多くあります。
自分の調べが足りない所もあるかもしれません。
もし間違いがあったらコメント等で指摘頂けたら幸いです。
製品 | コスト・手間 | 定義・データの再利用 | プレビュー | 権限管理 | バリデーション | graphQL化 | 日本語化 |
---|---|---|---|---|---|---|---|
headless wordpress | × | ○ | × | ○ | ○ | ○ | ○ |
Strapi | × | ○ | × | ○ | △(必須のみ) | ○ | ○ |
Contentful | ○ | ○ | ○ | △(有料) | ○ | ○ | × |
microCMS | ○ | × | ○ | ○ | △(必須のみ) | × | ○ |
各製品の特徴と使ってみた感想
1. WordpressのHeadless化
特徴
- wp-jamstack-deploymentsなどのプラグインを用いてWordpressをHeadlessCMS化する
- wordpressの管理画面をそのまま用いる事が出来るのでwordpressを使い慣れたユーザーにとってはメリットが大きい
- できる事は多いが、プラグインを使ったりして自分でなんとかすることになる(手間)
感想
今年10月より運営を開始している東方我楽多叢誌はこの方法で実現しています。
開発者側としては案件ごとのカスタマイズの手間が多かったり、wordpress特有の作業(プラグインを入れたり、functions.phpをこねくり回したり)が残っていたり、折角JAMStackでやろうとしているのに開発体験が中々高まりません。
Wordpressのホスティングの方法にもよるかとは思いますが、セキュリティ的にも気を使わなければいけない部分が多く
純正のHeadlssCMSに比べるとコストも大きくなりがちかと思います。
一方で、wordpressの管理画面をそのまま用いる事が出来るというのは、コンテンツを管理するユーザーにとって大きなメリットです。
そのあたりについては、JAMstack Advent Calendar 8日目の記事が大変参考になります。
ユーザーの性質や開発する製品によってはこの選択肢もあるという事は頭の片隅においておきたい所です。
2. Strapi
特徴
- オープンソース / サーバーインストール形のAPIベースHeadlessCMS
- CMS側も自分でカスタマイズ可能
- CMS側のホスティングを自前でやる必要がある
- dockerイメージが既にある
- DBをmysql, mariadb, mongodb, postgreSQL, SQLiteから選べる
- 拡張性が高い - ドキュメント
- 日本語化も可能
感想
構築自動化、マイグレーションなど開発者がやりたいと思うような事は大概できそうです。
拡張性の高さ故に、覚える事も多い印象です。
CMS自体のホスティングが自前というところもあり、小さめの案件にはあまり向かないかもしれません。
wordpressをサーバーインストールしていじり倒しているような案件や、CMSを内製しているような案件はこちらに置き換える事が出来るのではないかと思います。
3. ContentFul
特徴
- クローズドソースでAPIベースのクラウドサービス
- HeadlessCMSの中では上位の利用者の多さ、情報も多い
- CMS側を自分でホスティングする必要がない
- プライシング
- microプランでも環境を二つまで作れる(staging/productionなど)
- cliツールの機能やapiが充実している - ドキュメント
- Webhookが自分で定義できる。github actionsとの連携も容易
- 日本語への対応は今のところない
感想
日本語対応以外は今回探していた要件と一番合致したのがContentFulでした。
クラウドサービスであるため、自前でホスティングする必要ないにもかかわらず、CLI経由でマイグレーションができたり、環境を複数用意できたり、痒い所に手が届いている印象です。
おそらく、開発者が欲しいと思う機能は大体あるし、殆どの操作がCLI経由で出来るので、コマンド一発で構築終わり!が実現できます。
利用者が多く、情報や有志のモジュールが多い点も良い。
microプラン($39/月)はユーザー登録時に一つもらえるため、大抵の案件はそちらでまかなえると思います。
管理画面が非エンジニアには扱いにくそうなところと、microプランだと権限が1つまでしか設定できず、管理者と入稿者で権限を分けられないところがネックにはなってくるでしょうか
この辺りは後述のmicroCMSに軍配が上がります。
4. microCMS
特徴
- クローズドソースでAPIベースのクラウドサービス
- 純日本製、日本語のHeadlessCMS
- 公式や作者が頻繁に情報更新している
- freeプランがかなり充実してる(制限がデータ転送量とメンバー数のみ)
- 管理画面のUIが良い、権限も分ける事ができ、ユーザーライク
- APIリファレンスの自動作成機能がある
- Webhookがslackとnetlify向けしかない
- 2019/12/25にカスタム通知が追加されたようです
- https://microcms.io/blog/custom_webhook/
- 必須設定以外のバリデーションがまだ無い
- ドキュメントにあたるものがブログ形式で見辛い
感想
個人的に今一番気になっているHeadlessCMSです。
サービス開始が2019年8月とかなり新しい製品です。
純日本製サービスである上、UIもわかりやすく、非エンジニアのコンテンツ管理者であっても管理画面が扱い易いと思います。
自動作成されるAPIリファレンスも親切で、開発者にとっても易しいと感じました。
特徴にも幾つか挙げた通り、現時点では、機能にせよドキュメントにせよまだ足りないと思う部分は多いものの
更新頻度が高い上、ユーザーの要望を積極的に取り入れており、
今後、ドンドン良いサービスになっていくのではないかと思っています。
何かあった時の問い合せが日本語で良いのも日本人にとってはありがたいポイントだったりします。
現時点でも、とにかくコストや工数を抑えて小規模なコーポレートサイトやポートフォリオサイトを作りたいといった場合には向いているサービスだと思います。
まとめ
HeadlessCMS界隈は群雄割拠状態で、どのような案件でも「これ!」とオススメできる製品はまだ無さそうです。
自分のやりたい事や仕事相手の性質、作る製品の事を総合的に考えて技術選定をする必要があります。
(それはHeadlessCMSに限った話では無いですが)
本投稿が少しでも技術選定の助けになれれば幸いです。