見出し画像

『microCMS入門』でヘッドレスCMSを実際にさわってみたお話 - Part1

Romi

こんにちは。
YUIDEAのウェブディレクターRomiです。

前回の記念すべき第一回記事ではCMSについての基本的な話を書き綴ったのですが、今回はCMSのメインストリームとなりつつあるヘッドレスCMSについて解説してみようと思っていたところ、ちょうどよいタイミングでドットインストールさんの公式noteに以下 ▼ の記事を発見！

これを利用しない手はないということで、実際に国産ヘッドレスCMSの代表格であるmicroCMSをさわってみた感想や、従来型CMSとの違いなどをレビューしてみようと思います。



ヘッドレスCMS

ヘッドレスCMSとは、ユーザーが閲覧するフロントエンドのコンテンツ表示部分（顔）が存在しない、その名が示す通りヘッドレス（Headless = 頭のない）なCMSの総称です。

WordPressなどに代表される従来型と呼ばれるCMSは、

  • フロントエンド（コンテンツ表示部分）

  • バックエンド（コンテンツ管理部分）

がパッケージ化された一体型のものでしたが、ヘッドレスCMSはこのバックエンドの機能だけを持たせたCMSで、一般的にクラウドサービスとして提供されています。
ヘッドレスCMSには表示機能がありませんので、ブラウザ上の管理画面から登録・編集したコンテンツ類は、別途用意をしたフロントエンドとなるウェブサイトやアプリケーションに、API（※1）と呼ばれる技術を用いて表示をさせます。

▼そもそもCMSとは？の基本的な解説はこちらから

※1：APIとは
アプリケーション・プログラミング・インターフェース（Application Programming Interface）の略称です。アプリケーションやソフトウェアをプログラムで繋ぐためのインターフェース（技術仕様）のことで、デバイス同士を接続するために使用するケーブルのようなものと考えると分かりやすいかもしれません。


ドットインストールの『microCMS入門』

ドットインストールでプログラミングのレッスンを経験したことがある方はご存知だと思いますが、全てのレッスンは3分以内の動画レッスンなので、全11回のレッスンで構成されている『microCMS入門』も、ものの1時間ほどで一気に完了することが出来ました。

レッスンの手順をざっと紹介していきます。

手順 1）　HTMLでフロントエンドを作成

基本的なHTMLの構文に、コンテンツ表示させたいエリアを記述し、CSSで簡単にスタイルを整えて準備しておきます。

手順 2）　microCMSでコンテンツを作成

STEP 1
microCMSの公式サイトから「無料で始める」を選択し、メールドレスと任意のパスワードを入力したら登録完了です。
↓
 STEP 2
サービスを作成（サイト名やプロダクト名など）
↓
 STEP 3
APIを作成（コンテンツの種類。お知らせ、コラムなど）
↓
 STEP 4
APIスキーマを定義
と進み、コンテンツの項目（タイトル、本文など）設定を行うと、ものの5分ほどでコンテンツの編集が可能になり、APIプレビューからAPI-KEYや埋め込み用スクリプトタグ、データの取得ができるようになります。

管理画面はこのような感じでとてもシンプルです。
左：サービス作成画面 ／ 右：API作成画面

手順 3）　JavaScriptでAPI連携

STEP 1
microCMS公式Githubで提供されている microCMS JavaScript SDK （※2）のページからCDN support（※3）のスクリプタグをそのままコピーして、準備しておいたHTML内のbody閉じタグ</body>のすぐ上にペーストします。

<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>

※2：SDKとは
ソフトウェア開発キット（Software Development Kit）の略称で、特定のソフトウェア開発に必要なツールがパッケージ化されたセットのことです。
※3：CDNとは
コンテンツ配信ネットワーク（Contents Delivery Network）の略称で、インターネット経由でWebコンテンツを配信するために最適化されたネットワークのことです。

↓
STEP 2
ブラウザ連携をするためのスクリプトタグをそのままコピーし、先ほどのタグのすぐ下にペーストします。

<script>
const { createClient } = microcms;

// Initialize Client SDK.
const client = createClient({
  serviceDomain: "YOUR_DOMAIN", // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
  apiKey: "YOUR_API_KEY",
  // retry: true // Retry attempts up to a maximum of two times.
  // customFetcher: fetch.bind(globalThis), // Provide a custom `fetch` implementation as an option
});
</script>

↓
STEP 3
microCMSのAPIプレビューでサービスドメインとAPIキーを確認し、
スクリプトタグ内の以下の箇所「YOUR_DOMAIN」と「YOUR_API_KEY」にコピペで移植すればAPI連携は完了です。

serviceDomain："YOUR_DOMAIN",
apiKey: "YOUR_API_KEY",

↓
STEP 4
最後に同じスクリプトタグ内に、取得したコンテンツデータを表示させるためのスクリプトを記述して、上手く表示されていればレッスンは完了です。


以上、microCMSでコンテンツを作成し、静的なHTMLで作成したページへJavaScriptでAPI連携してコンテンツ表示をさせてみるというレッスンでしたが、一連の作業を終えた最初の感想は「うわっ、簡単！」というものでした。

そしてヘッドレスCMSをさわってみたことで、ヘッドレスCMSを導入する際に発生するであろう想定作業や、工数算出などがより具体的にイメージできるようになるなと感じましたので、ヘッドレスCMSについて何となくは知っているけど実際はどのようなものなんだろう？と思っている方や、ウェブ制作に携わっている方には是非お勧めしたいレッスンです。
 無料でレッスンを提供してくださるドットインストールさんに感謝！

 

CMSのレンダリング方法

続いてCMSを用いたウェブサイトのレンダリング方法についても少し触れておきたいと思います。

レンダリングとは簡単に言ってしまうと、ユーザーのリクエストを受けてからウェブサイトが表示されるまでのプロセスのことで、CMSを用いたウェブサイトでよく使われているSSGとSSRと呼ばれる２つの生成方法について紹介します。

SSGとは

SSG（Static Site Generation）とは、静的サイトジェネレートとも呼ばれる方式で、コードやコンテンツなどを新設・更新などしたタイミングでAPIにリクエストを送り、取得したデータから事前に静的なページを生成してサーバーに置いておく方法です。ユーザーのリクエストに応じて事前に生成されたページが表示されます。

リアルタイムでのデータ取得が行われないため、頻繁に更新のかかるようなECサイトなどのレンダリングには不向きですが、API情報がサーバー側にだけ必要なため、ブラウザ側から隠せるといったセキリティ上のメリットや、ユーザーのリクエストのたびに動的なデータを取得する必要がないため、ページ読み込み速度などのパフォーマンスが高くなる、などのメリットがあります。

SSRとは

SSR（Server Side Rendering）とは、サーバーサイドレンダリング、とも呼ばれる方法で、ユーザーのリクエストのたびに、最新のデータを取得しページを動的に生成する方法です。サーバー内でAPIと連携して処理されたデータがユーザー（クライアント）側に送信されブラウザで表示されます。

常に最新の情報を取得し動的なページが生成されるので、コンテンツの更新頻度の高いECサイトなどのレンダリングに適していますが、SSGと比較すると処理に時間をかかるためページの読み込み速度が遅い、データ量が大きいとサーバーに負荷がかかるなどのデメリットもあります。

因みに『microCMS入門』は、このSSRと呼ばれるレンダリング方式でコンテンツを表示させるレッスンになっています。


microCMSでは、レンダリング方式ごとの組み込み方法の紹介や、さまざまな言語・フレームワークでの連携チュートリアル▼も用意されていましたので、機会があれば Next.js などのフレームワークを用いた構築にもチャレンジしてみたいなぁ、などと思いました。


さて、ヘッドレスCMSへの理解が深まったところで、ここからは従来型CMSとの違いや、ヘッドレスCMSを導入するメリット・デメリットについて触れていこうと思うのですが、長くなってきましたので次回の『microCMS入門』でヘッドレスCMSを実際にさわってみたお話 - Part2 でまとめていこうと思います。


いいなと思ったら応援しよう！