CMSといえば、Wordpressがメインでコーポレートサイトの構築でもよく利用されてきました。ここ数年前からHeadless CMSというものが登場し、サービス内へ取り込んでシステム化する動きが活発になってきたと思います。今回は、Headless CMSと従来のCMSの違いについて紹介したいと思います。

事前知識

CMSとは

CMSとは、Contents Management Systemの略です。Webサイトを構築するための知識(HTML,CSS,Javascriptなど)の知識を持っていないくてもWebサイトを構築し、保守、管理ができるシステムのことを言います。

CMSを導入していないサイト

CMSを導入していないサイトでは、HTML,CSSといったマークアップ言語、Javascript、PHP、ruby等の言語を使って、1ページに必要な情報を構築します。1ページを構築するために、これらの言語を使って開発する必要があります。

CMSを導入しているサイト

CMSを導入しているサイトでは、画像、テキストなどのテキスト、各ページのテンプレート情報などを組み合わせて、ページを構築することができます。ページ構築には、画面上から設定できるので、基本的には、提供されている機能を組み合わせて、1ページを構築することができます。

従来のCMSとHeadless CMSの違い

従来のCMSの基本構成

コンテンツデータを管理するバックエンドと、コンテンツデータを特定のHTMLフォーマットに加工して出力するフロントエンド（ヘッド）に分かれています。

Headless CMSの基本構成

従来のCMSは、コンテンツデータを管理するバックエンドと、コンテンツデータを特定のHTMLフォーマットに加工して出力するフロントエンド（ヘッド）に分かれています。Headless CMSとはWebサイト画面を表示するフロントエンド部分が無いCMSのことで、ヘッドがないのでHeadless CMSと呼ばれています。

Headless CMSのメリット・デメリット

メリット

大きなメリットは、フロントエンド(画面)が自由に作ることができる点にあります。 従来のCMSでは、画面を作る上での制約が発生してしまいますので、この点は大きかと思います。提供するデバイスによって画面を分ける等の開発も可能です。

デメリット

フロントエンドが自由に作ることができるという点は、メリットでありデメリットでもあります。フロントエンドが自由に組めるということは、フロントエンドの開発言語のスキル、HTML, CSS, Javascriptなどの言語知識が必須となります。従来のCMSでは、非エンジニアもCMSを使って、画面を作ることができましたが、非エンジニアは、エンジニアにつくってもらうように依頼するような形になります。

Headless CMSの提供(利用)方法

Headless CMSには、CaaS型とSelf-Hosted型があります。

Caas型

CaaSとは、CMS as a Serviceの略です。システム開発会社、CMS運用会社等が提供するCMSサービスを利用する方法です。利用する際のポイントとしては、下記の項目が挙げられます。

  • サーバ、データベースはクラウド上に存在する
  • 管理画面を利用してHeadless CMSを運用する
  • 困ったときの技術サポートあり
  • コストはかかる傾向にある

Self-Hosted型

Self-Hostedとは、自前で構築した環境上にHeadless CMSを構築する方法です。

  • サーバ、データベースは、自前で準備する。=> 好きな場所に構築可能
  • コストは下がる
  • やること多い(デプロイメント、セキュリティ対策、CMS運用 etc)

最近私が触っているHeadless CMS

私自身がよく触っているHeadless CMSは、strapiです。こちらのCMSの特徴は、下記の通りです。

  • Self-Hosted型である。
  • Node.js上で動作する
  • 必要最低限の機能のみ提供
  • 必要な機能は、プラグインを通して追加する。
  • APIもカスタマイズ可能。
  • Graphe QLも提供可能
  • 無料

といった形です。シンプルな構成になっているので、デバッグも簡単です。

まとめ

今回は、最近よく聞くHeadless CMSがどんなものかを中心に簡単に紹介しました。また、他の機会でもStrapiについて紹介したいと思います。お疲れ様でした。