icon 宇田 龍矢(Tatsuya Uda)のブログ
post-featured-image

Headless CMSでブログを作ってみた

Gatsby.js + DatoCMSでブログを作ってみました。

今更ながらブログを作ってみました。 noteやはてなブログ、Mediumなど様々なブログサービスがある中で、なんでわざわざ自前でブログを用意したかというと、話題のHeadless CMSを勉強のために使ってみたかったからです。

今回は、DatoCMSを使ってみました。 Headless CMSとは何か、Headless CMを使うと何が良いのか。WordPressなどとの違いを簡単に紹介してみます。

追記:DatoCMSの書き心地が悪かったため、Notionブログに移行しました。
Super + Notionのブログ運用、控えめに言って最高です。

Headless CMSとは

Headless CMSとは、ヘッド(フロントエンド)がない、バックエンドだけのCMS(コンテンツ管理システム)サービスです。 API経由でデータを取ってこれるので、好きな場所にコンテンツを表示できます。

代表的なサービスにContentfulやCosmic JSがあります。日本でもmicroCMSという良さげなサービスがリリースされ、最近Headless CMSは勢いがあります。

フロントエンドがないということは、ビューは自前で用意する必要があります。 データ管理は外部のサービスに任せて、ビューは自分の好きなように作りたいという用途に向いています。

具体的には、静的なHTML上でクライアント側からAjax通信でHeadless CMSのAPIを呼び、JavascriptでDOMを書き換えることで、最新のデータを表示できます。

また、既存のサービス内に新しくブログやお知らせ機能を追加したい場合にも、Headless CMSを使うと、バックエンドの開発いらずでブログやお知らせ機能を導入できます。

WordPressとの違い

自前でブログを用意するというと、一番よく使われるのがWordPressです。 WordPressなどの一般的なCMSとHeadless CMSは何が違うのでしょうか。

WordPressはPHPで動いており、レンタルサーバーなどにインストールして使います。 ブログやWebメディアの立ち上げに必要な機能がオールインワンとなっているため、用途が決まっていれば非常に便利です。

一方、Headless CMSはクラウドサービスなので、バックエンドについて考えること無く、既存のサービスに簡単にコンテンツ管理機能を導入できます。

フロントエンドの自由度が増す

既存のサービスがRailsやPythonで動いていたり、社内のバックエンドエンジニアがPHPを扱えない場合でも、WordPressとほとんど同じような機能をバックエンドの開発いらずで導入できます。

また、フロント側の言語をバックエンドの言語に合わせる必要がなくなるため、エンジニアが得意な言語でフロントを開発できます。

複数のWebサイトやアプリ上で共通のコンテンツを扱える

WordPressはビューとバックエンドが結びついているため、一つのシステムでコンテンツを管理する形になります。

例えば、複数のECサイトを運営していて、全てのサイト内で共通のお知らせ表示機能を作りたい場合、わざわざ全てのECサイト内でWordPressを構築して別々にコンテンツを表示するのは結構大変です。

Headless CMSならRESTful APIでデータを取得できるので、複数サイトで共通のコンテンツを表示できます。 Webサイトに限らず、アプリやIoTデバイス上などでも同じシステムからコンテンツを表示できます。

また、データの投稿側もAPIで行えるため、複数の管理画面でコンテンツを管理したい用途でも使えます。

用途に合わせてHeadless CMSも検討する

では、これからはWordPressは全部Headless CMSに置き換えた方がよいのでしょうか。 そういうわけではありません。

やはり、普通のブログやWebメディアを運営するのであれば、WordPressを使った方が良いでしょう。 WordPressならプラグインを使えば、追加の開発いらずでほぼ全ての機能を実現できますし、おしゃれで綺麗なテーマも揃っています。 OSSなので、必要になれば機能をカスタマイズすることができます。

Headless CMSにはビューが存在しないため、0からブログサービスを立ち上げるのにはあまり向いていません。 CMS機能もまだまだWordPressに劣るサービスが多いです。

クラウドサービス型の場合、WordPressのような便利なプラグインもありませんし、カスタマイズもできません。 マークアップで書けるサービスもありますが、書いた記事をプレビューする機能がなかったりと、WordPressの感覚でHeadless CMSに移行すると大変かもしれません。

WordPressもHeadless化できる

WordPressにも最近、WordPress API機能が追加されたので、Headless化できるようです。 すでにWordPressでブログ等を運営していて、運営フローは変えずに表示処理だけ移動させたいという場合には、WordPress APIが便利かもしれません。