そもそもヘッドレスCMSとは
CMS
CMS (Content Management System)とは、webサイトの構築・管理・運用を行えるシステムのことです。
採用するメリットとしては既存で用意されているテンプレートを使用することでプログラミング言語を触らずに作成が容易にできる点、記事の更新などのしやすさがあります。
このシステムを公開しているサービスはいくつかありますが、昔からよく耳にするものとしてはWordPress、最近だとSTUDIOも個人的によく聞く印象です。
ヘッドレスCMS
CMSからテンプレートにあたるビュー(表示する画面)が用意されていないものになります。
一般的なCMSは導入の際にすべてのページをテンプレートファイルとして用意する必要がありますが、ビューが用意されていないヘッドレスCMSでは、ページの一部分のみCMS化をすることができます。
また、ビューがないことでサーバー側とフロント側でソースファイルがそれぞれ独立しているため、長期的な運用面においてもおすすめです。
デメリットとしては、API連携に関してやSEO対策など求められる知識がCMSより広くなること、OGPなどの対応には弱いこと、ページ表示の際APIへのリクエストが都度かかることなどが挙げられます。
実際に使ってみた
今回はmicroCMSを使ってヘッドレスCMSを試してみました。
公式で手順が分かりやすく説明されているのでこちらを元に試してみました。
参考記事
手順はこちらを参考にします。
テンプレートもいくつか公式で用意されてるみたいですね👀
SvelteやNext、jQueryなど、テンプレがない分色んなフレームワークやライブラリが並んでて参考サイト集とかを思い出します笑
APIの形式
一通り会員登録などを終わらせると下記の画面に入ります。
よく使われるようなパターンは既にテンプレートがある状態で、自分でプロパティを好きにカスタマイズすることも可能です。
今回はタイトルと記事画像(任意)、記事本文を入力できるAPIをカスタマイズで作成して試してみることにしました。
↑入力した場合のAPIプレビューを試してみるとこのようになりました
{
"id": "***",
"createdAt": "2024-12-21T16:18:14.299Z",
"updatedAt": "2024-12-21T16:18:14.299Z",
"publishedAt": "2024-12-21T16:18:14.299Z",
"revisedAt": "2024-12-21T16:18:14.299Z",
"title": "テスト記事その１",
"picture": {
"url": "***",
"height": 280,
"width": 336
},
"contents": "<p>普通の文章です。</p><p><strong>太字にしました。</strong></p><p><code>コードを挿入してみます</code></p><hr><div data-filename=\"hoge\"><pre><code class=\"language-typescript\">interface Animal {\n name: string;\n}\ntype Creature = {\n dna: string;\n};\ninterface Dog extends Animal, Creature {\n dogType: string;\n}</code></pre></div><p>コードも入れられるっぽい？</p>"
}
※「***」は意図的に削除したコードになります。
idと日時系の情報は自動で決められて追加されていますね👀
表示に必要なコード(最低限)
<h1 id="title"></h1>
<hr>
<img id="picture" />
<hr>
<div id="contents"></div>
fetch("https://***.microcms.io/api/v1/sample/***", {
headers: {
"X-MICROCMS-API-KEY": "***"
}
})
.then(res => res.json())
.then(json => {
document.getElementById("title").innerHTML = json.title;
document.getElementById("picture").src = json.picture.url;
document.getElementById("contents").innerHTML = json.contents;
})
※「***」は意図的に削除したコードになります。
出力結果は？
APIのGET処理完了後のHTMLには下記のように出力されました。
<h1 id="title">テスト記事その１</h1>
<hr>
<img id="picture" src="***.png">
<hr>
<div id="contents"><p>普通の文章です。</p><p><strong>太字にしました。</strong></p><p><code>コードを挿入してみます</code></p><hr><div data-filename="hoge"><pre><code class="language-typescript">interface Animal {
name: string;
}
type Creature = {
dna: string;
};
interface Dog extends Animal, Creature {
dogType: string;
}</code></pre></div><p>コードも入れられるっぽい？</p></div>
※「***」は意図的に削除したコードになります。
一番最後のコードは、コードブロックという項目がエディタに入っていたので、どのように出力されるか気になって追加したものになります。
出力結果を見ると preタグ > codeタグ で囲まれた状態が表示されてcodeタグにlanguage-typescriptというクラスが入っていました。
<pre><code class="language-typescript">ここにコード</code></pre>
この構成は基本的にコードブロックを示す際に使われているようで、コードブロックの変数、関数を見やすいよう色付けするライブラリでは上記のコード構成の箇所に自動的にハイライトをつけるものがありました。(オプションで特定のクラスなどついてる箇所のみに絞ることも可能です)
https://highlightjs.org/
最後に
どうしてもサービスなのでしっかり運用するサイトとして使うには課金も必要になってくると思いますが、フロントエンドのAPI通信に対して勉強したいという人にとって利用するのにちょうどいいものな気がしました。
vercel、Next.jsと組み合わせてみたりするのも楽しいと思います。