目次ヘッドレスCMSとはヘッドレスCMSのビューメリットマルチデバイスに対応できるサイトを部分的にCMS化できるフロントエンドの自由度が高まるスキーマが完全に自由デメリットプレビューがしづらいエンジニアと非エンジニアが扱う難しさ技術的難易度が高い実際の導入例まとめここ最近、耳にすることが増えたヘッドレスCMS。今までのCMSとの違いについて解説していきます。ヘッドレスCMSとはヘッドレスの「ヘッド」は、ビュー(表示する画面)を指します。ヘッドレスなので、ビューの無いCMSということになります。Systemの略で、つまりはコンテンツ管理システムを指します。従来のCMSはコンテンツを入稿するシステムとコンテンツを表示するビューが合わさったものでした。代表的な例としてはWordPressが挙げられます。はてなブログやQiita、NoteなどもCMSです。CMSのビュー(見た目)には以下の三種類があります。WordPressはHTMLの骨組みから自由に作成可能このビューに当たる部分が無いのがヘッドレスCMSです。ヘッドレスCMSのビューではヘッドレスCMSの場合、ビューはどうするのか?CMS外で、自作する必要があります。ヘッドレスCMSは入稿したコンテンツをAPIから取得することができます。このAPIを用いて必要なコンテンツを取得し、表示させたい場所に表示させます。ここで、コンテンツの入稿システムとビューが切り離されていることのメリット・デメリットを考察してみましょう。メリットマルチデバイスに対応できるヘッドレスCMSの紹介でよく言われることですが、コンテンツをWeb、iOSアプリ、Androidアプリなど複数のデバイスに表示することができます。アプリ内にWebと同様のお知らせを配信したい場合、現状では専用のWebViewを作り、アプリ内に表示しているケースが多いです。WebViewはパフォーマンスが良くないため、画面を表示するのに時間がかかり、ユーザーの行動を阻害します。スマホゲームをやっていて、「お知らせ」を表示するときだけ時間がかかり、イラッとした経験を持つ人は多いはずです。ヘッドレスCMSを使う場合はAPI経由でコンテンツを取得できるので、アプリのネイティブ機能でそれらを表示することができます。ユーザーを無駄に待たせることはなくなります。サイトを部分的にCMS化できるCMS化という言い方は間違っている気がしますが、伝わりやすいと思うのでそう書きました。通常、サイトの一部分のみに入稿機能をつけたいと思っても、それを実装するのはなかなか骨が折れます。会社のホームページをHTML・CSSで静的ページとして作成していたとします。そこで後から「お知らせ」機能を追加し、マーケティング担当が自由に入稿できるようにして欲しいという要望があった場合、サイト全体をWordPressで作り直すなりする必要があります。ヘッドレスCMSを使えば、「お知らせ」部分のみをAPIから取得し、サイトに表示することができます。最小限の開発で部分的に入稿機能を付けることが可能というわけです。ブログやお知らせなどに限らず、編集頻度が高いサイトトップの文言だったり、設定ファイル的なものを返すAPIとして利用することもできます。フロントエンドと分離されていると言えます。そのためフロントエンドはシングルページアプリケーションやサーバサイドレンダリング、ネイティブアプリなど、多彩な選択肢を取ることができます。それにより、サイトのパフォーマンスも最大限に高められますし、デザインの自由度も高まります。基本的にCMSはメディア向けに作られているものがほとんどで、それ以外の形式のコンテンツの入出力に対しては最適化されていません。ヘッドレスCMSの場合は入稿フォーム自体をサービス上で作成します。入稿するものごとにリッチエディタや画像選択、URL入力フォームなど、最適なUIを用意することができます。デメリットプレビューがしづらい個人的に一番複雑だなと思うところがコンテンツのプレビュー部分です。WordPressや一般的なブログサービスでは当然のようにプレビュー機能がありますが、ヘッドレスCMSにはビューが無いため、入稿した内容をサイトの画面でどのように表示されるかを確認することができません。そこで、下書き状態のコンテンツを取得するAPIを用いて、それらを表示するためのステージング環境を開発者側が用意する必要があります。エンジニアと非エンジニアが扱う難しさ一定規模以上の会社の場合、コンテンツを入稿するのはエンジニアではありません。サイトを作る段階ではAPIのスキーマ設定などはエンジニアが行う必要があります。エンジニアが触る部分とコンテンツ入稿者が触る部分が混在していて、非エンジニアにとっては「操作方法がよく分からない」となりがちです。その点に関しては各ヘッドレスCMSサービスがそれぞれ工夫を凝らしているところでもあります。比較してみると良いでしょう。技術的難易度が高いフロントエンドの自由度が高まるというメリットとの裏返しになってしまいますが、ヘッドレスCMSの導入にはある程度の技術的難易度が存在します。ウェブでの利用であればAPI経由で取得できるデータを、サーバサイドならHTMLの構築・クライアントサイドならJavaScriptを使ったDOM構築などで利用する必要があります。(一方でReactやVueといったシングルページアプリケーション(SPA)を構築するためのフレームワークを習得していると、ヘッドレスCMSをより効果的に扱うことができるでしょう。)実際の導入例それでは日本製のヘッドレスCMSであるmicroCMSを使って試してみましょう。お知らせ欄をヘッドレスCMSに置き換える例を考えてみます。お知らせなので、次のような情報が欲しいですよね。次に、これらの項目を入力するにはどんなフォームが適切なのかを考えてみましょう。タイトルはテキストフィールド(1行テキスト入力)本文はテキストエリア(複数行のリッチエディタ)投稿時刻はカレンダー選択とすると、下記のような入力フォームができあがります。この入力フォームに入力したデータはすぐさまAPIから取得することができます。APIからは以下のようなレスポンスを得られます。"2019-08-30T04:30:00.000Z"}このAPIをサーバサイドで呼び出し、HTMLを構築してクライアントに返しても良いですし、クライアントから呼び出してDOM操作をして表示しても良いでしょう。まとめヘッドレスCMSのイメージは掴めましたでしょうか?ここまでヘッドレスCMSとはビューの無いCMSであると説明してきましたが、入稿画面つきのAPI作成ツールと言った方がしっくり来るかもしれません。考えると使える幅もグッと広がりますよね。気になった方は是非ヘッドレスCMSを試してみてください。