フロントエンドの人はなぜかブログをいっぱい作る。

私もそうなのでブログを作り直した。

きっかけは Twitter で Newt というヘッドレス CMS を見かけたこと。

新しいコンテンツ管理の体験 | ヘッドレスCMS「Newt」

Newtは、APIベースでコンテンツ管理を行うことができるヘッドレスCMSです。Appを使って柔軟に管理画面を構築していくことによって、より快適で新しいコンテンツ管理体験を実現しています。

www.newt.so

無料プランがあったので早速使って見ることにした。

他の CMS との比較

まずは Newt の情報

料金プラン | ヘッドレスCMS「Newt」

ヘッドレスCMS「Newt」の料金プラン。すべてのプランで、メンバー数、モデル数、コンテンツ数が無制限です。2022年7月5日よりProfessionalプランの提供を開始しました。

www.newt.so

無料プランがめちゃくちゃ太っ腹。データ転送量100GB/月に、APIリクエスト制限はなんと 2,000,000回/月！個人で使う分には SSG しておけば絶対に使い切れないレベルの量。
他にもコンテンツ数、モデル数、メンバー数が無制限なので、もうほとんど制限なんてないようなもの。

Newt には CDN API が無料プランからも使えて、アセットをエッジから快適に取得することができる。嬉しい。

画像の最適化も、自分でクラウドストレージを用意すれば無料でできるので良い。Google Cloud Storage ならある程度まで無料なので、機会があったら使ってみることにする。

無料プランでここまでできるのはめちゃくちゃ嬉しい。デプロイ Webhook も無料で使えて、JavaScript SDK も公式から提供されている。TypeScript にも対応している。

デベロッパに優しい設計になっていてめちゃくちゃ快適だった。

microCMS

Newt は国産だが、もう一つの国産ヘッドレス CMS の microCMS と比べると圧倒的に優れているのがわかる。

最大3個のAPI...?最大3人のメンバー...?

リクエスト呼び出し数が無制限だとしても、Newt の200万回も無制限のようなもんなので、これだけ見ても Newt が優勢。さらに詳しく比較してみる。

料金プラン｜microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。

microcms.io

データ転送量20GB/月...?

コンテンツ数は1万と、到底使い切れるようなものではないと思うが、やはり Newt の方が制限が緩い。

Newt には CSV 出力はないが、フロントエンドエンジニアが CSV に触れる機会もほとんどないんじゃないのかと思うので、個人で扱う場合にはなんら問題ない。

microCMS でできることは大抵 Newt でできる。

Contentful

Contentful Pricing | Contentful

Scale our composable content platform in lock-step with your business, from your first digital experience to enterprise-wide content delivery across teams, channels and markets.

www.contentful.com

GraphQL に対応してるらしいが私は別に GraphQL がなくて困ったことはない。
色々なプラグインを使ってカスタマイズしていく形式に近いっぽい。Wordpress みがある。

以前使った時は、ダッシュボードの要素がわかりにくいというか、どこから記事を追加してどこで書くのかわかりにくくてすぐ使うのをやめてしまった。

プラン名にもあるとおり、無料プランは「Community」プランなので、複数人で小規模〜中規模の開発をするときに使うのかもしれない...

Strapi

Strapi - Open source Node.js Headless CMS 🚀

Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.

strapi.io

セルフホストするタイプのヘッドレス CMS。無料だが難点が多い。

何回か使ったことがあるが、やはり自分でホストする必要があるのが面倒になってしまう。社内や組織内で使うのなら良いのかもしれないが、APIドキュメントがゴミだったり、SDKが最新版に追いついていなかったり、謎の挙動が多いため、結局プロダクションレベルでは使えないので、どこでも使えない。

Payload

Payload CMS | Node & React TypeScript Headless CMS

Payload is a headless CMS and application framework built with TypeScript, Node.js, React and MongoDB

payloadcms.com

セルフホストするタイプのヘッドレス CMS。無料だが、最近出てきたもののため挙動が安定しない。

一番のネックは MongoDB を自分で用意する必要があるということ。わざわざこのために Realm で DB 用意するのは面倒。見た目はオシャレだが、使いやすくはないので結局使わない。

総括

結局 Newt が一番良い。外国産の CMS では、日本語入力にしばしば難があり、記事を書くことすらままならないことがある。わざわざセルフホストしても、ホストするクラウドに制限が発生してしまうので、大人しく提供されたサービスを受け取った方が楽。

使いやすさ

Newt はめちゃくちゃ使いやすい。もちろん、いくつか使いづらい点もあるのだが、他の CMS に比べればマシである。

良いと思った点

ダッシュボードがわかりやすい

これは重要。ここで変に余計な操作が必要になったり、覚える必要があったりすると疲れるが、Newt はめちゃくちゃ良い設計になっているので、直感的に扱えて楽。

一般的な CMS のように、記事やタグなどのモデルを作る画面、記事一覧の画面がある。

モデルを構成する要素には、よくある「テキスト」や「リッチテキスト」に、マークダウン専用の「マークダウン」や、「日付」、「画像」があり、普通のブログサイトを作るのに必要なものは揃っている。しかも、最近流行りなのか「絵文字」という絵文字単体の要素があったり、色の「カラー」や「ファイル」など、ちょっと便利なやつもある。

もちろん、記事のモデルにタグの要素を入れる「参照」も可能。
必須項目やタイトル設定、配列設定も可能。無料プランでも全然困らないレベルで CMS の機能が提供されている。

マークダウンの記事プレビューができる

普通にありがたい。最低限のプレビューができるので、マークダウンのミスの確認などができる。

ドキュメントがしっかりしてる

クイックスタート | ドキュメント | ヘッドレスCMS「Newt」

Appテンプレートを利用した、Newtでのコンテンツ管理を紹介します。 Appの追加からAPIでの取得まで、順を追って説明します。

www.newt.so

日本語で解説されているので、わかりやすい。

Newt CDN API | Newt API Reference

Newt CDN APIのリファレンスページです。Newt CDN APIはCDN経由でデータを取得します。コンテンツの配信に利用します。公開済みのコンテンツについて扱えます。

developers.newt.so

API のリファレンスもついており、その場ですぐにリクエストをテストすることもできる。

気になった点

マークダウンエディタ

• Tab キーを押すとインデントが変わるのではなく、次の要素にフォーカスしてしまう

これは、コードをちょっと修正するときやリストのインデントを調整したいときに不便。スペースで無理やり揃えてやる必要がある。

コンテンツの作成画面

• 「保存」・「保存して公開ボタン」が押せない瞬間がある

内容を更新した後の数秒間は、保存ボタンがグレーアウトして押せない。

グレーアウトが解除されるまで保存できないので、地味にだるい。おそらく、実際のコンテンツと保存されるコンテンツが違うものにならないように、変更のマージン期間みたいなのを用意しているのかもしれない(語彙力)。Twitter のファボボタンのような、 楽観的な更新の UI にした方がユーザーには優しいのではないかなと思った。

総括

いくつかちょっと気になる点はあるけど、他の CMS と比べたらめちゃくちゃ使いやすい。

まとめ

今までの国産・外国産の CMS と比べたら、個人用途なら Newt が圧倒的に使いやすいし無料プランの制限も緩くておすすめ。