ヘッドレスCMSについて調べてみた

2 min read読了の目安(約2500字

はじめに

今回はヘッドレスCMSについてです。

Zennに本格的に移住する前は個人ブログを作って技術的な情報(+αも)を発信していました。

https://nekoniki.com

せっかくReactを身につけたのだからそれを活かしたブログにしたい、ということでGatsbyを覚えながら、あれこれコードを書いたのもいい思い出です。

https://www.gatsbyjs.com

ただ、ゼロから構築したわけではなくGatsbyのテンプレートを使用して開発しました。
そのテンプレートがNetlifyライクな作りになっていたので、そのままNetlifyでホスティングしています。

リファレンスや参考資料を読み込む中で 「ヘッドレスCMS」 という単語が何回か登場しました。
当時は「ふーん・・・」ぐらいな気持ちで読み飛ばしていましたが、今更になって気になってきたので記事にしてみます。

そもそもCMSとは?

ヘッドレスCMSの説明の前に、そもそもCMSとは何かについて説明します。
CMSContents Management Systemの略称です。
直訳すると 「コンテンツ管理システム」 で、要するにテキストや画像データなどの様々なコンテンツを管理するシステムの総称です。

有名どころだとWordpressが挙げられます。
Wordpressの用途から「ブログを構築するためのシステム」のような文脈で使われることが多いですが、ブログ記事はあくまでCMSが扱う「コンテンツ」の一例でしかありません。
他の例としては、企業サイトにおける「商品紹介ページ」などが挙げられます。

身近なものだと「はてなブログ」や「Qiita」の記事もCMSですし、Zennもその括りに入ると思います。

ヘッドレスCMSとは?

では「ヘッドレス」CMSとは何でしょうか。
ここでいう「ヘッド」とは、コンテンツを表示する画面(=ビュー)を指しています。

つまり 「ヘッドレスCMS=コンテンツを表示する画面がないCMS」 ということです。
CMSの機能を大別すると 「コンテンツを追加・編集したりする管理機能」と「コンテンツを目に見える形に整形して表示する機能」 の2つがありますが、その後者が用意されていないというイメージです。

代表的なものだとContentfulNetlify CMSmicroCMSなどが挙げられます。

https://www.contentful.com

https://www.netlifycms.org

https://microcms.io

ヘッドレスCMSにおいては、コンテンツを表示するビューを利用者自身が作成する必要があります。
コンテンツの取得についてはREST APIGraphqlを用いることが多いです。

なにが良いのか

最大のメリットとして挙げられるのは 「ビューのレイアウトが自由」 ということです。
例えば私がZennに投稿しているこの記事に対して「自分をブランディングしていくにあたってイメージカラーとなる赤を基調とした画面にしたい」や「見出しのフォント等、自分オリジナルのテンプレートにしたい」など色々と要望がある場合に、ヘッドレスCMSなら自由にビューのカスタマイズができます。

ただし、これはそのままデメリットにもなり 「ビューを構築するために一定以上の技術力が必要」 ということになります。

また、上記メリットに関連して「複数プラットフォームへの対応が容易(というか自分で作らなくてはならない)」な点もメリットといえます。
例えばスマホアプリ版のように、異なる端末に対しても自作すればビューを最適化できるためです。

既存のCMSもヘッドレス対応しはじめている

ヘッドレスCMSが流行してきていますが、それに合わせて既存のCMSも対応してきています。
例えばWordpressWP REST APIというAPIが用意されるようになりました。

https://ja.wp-api.org

これを使うことでWordpressの画面を介することなく、自作のコードからコンテンツの追加・取得を行うことができるため、ヘッドレスCMSのような使い方ができます。

今後も流行るのか、という考察

最近では 「個人で情報発信をする」 というのがそれほど特別なことではなくなっているように思えます。
それに後押しされてかnoteなどのCMSもメジャーになりましたし、Wordpressあたりは、非エンジニアの方でも簡単に構築できるようにまとめられた書籍や解説ブログ・動画も見受けられます。

その勢いのままヘッドレスCMSも流行るかというと、それは少し難しいのかなと思いました。
理由としては先に挙げたように、ビュー構築にあたって要求されるスキルレベルが高いためです。

ただ、それを差し置いても 「自由にビューを作れる」 というメリットは魅力的なので、今後ニーズとして「ヘッドレスCMSにおけるビューの構築」というのは増えていくのだと思います。

従って、ヘッドレスCMSへのコンテンツ入稿・取得あたりを経験しておくと、対応できる案件が増えたりするのかなと思います。

まとめ

今回はヘッドレスCMSについて、自身が学習した内容を記事にしました。
この件に限らず、新しい技術をキャッチアップするのは(だいたい英語文献なので)大変ですが、ワクワクも一入です。

今のところ仕事で扱ったことはないですが、今回学んだGatsbyNetlifyの知識は活かしていけるのではないかと思います。

ここらへんの知的好奇心を満たすためにあれこれ調べる時間が、趣味と実益を兼ねているのがエンジニアという職種のいいところなのかなとも思います。