Contents
microCMSとは、ヘッドレスCMSとも呼ばれ、表示画面の無いCMSになります。
では、表示画面のないCMSとは何でしょう？
従来のCMSはWordPressの様に、コンテンツを入稿するとシステムとコンテンツを表示する表示画面が備わっていました。
しかし、microCMSはヘッドレスなので、表示画面を自作する必要があります。
ヘッドレスCMSは入稿したコンテンツをAPIから取得することができ、このAPIを用いて必要なコンテンツを取得し、表示させたい場所に表示させます。
自作することによって、マルチデバイスへの対応や部分的なCMS化、スキーマの自由度が高いなどのメリットがあります。
しかし、自由度が高い分技術的難易度が高いというデメリットもあります。
今回は、そんな技術的難易度が高いmicroCMSの導入方法を、手順を追って分かりやすく解説していきます。
microCMSにアクセスし無料で会員登録を行いログインします。
ログインしたらまずはサービスを作成します。
サービスが作成できたらAPIの作成画面になるので、テンプレートか自分で決めるを選びます。
今回は自分で決めるを選択します。
次にAPI名とエンドポイント名を決めます。
ここでは自分の作成するコンテンツに応じた名前をつけましょう。
今回は両方とも「test」で行っていきます。
基本情報を入力したら、次にAPIの型を選択します。
今回は「リスト形式」を選択します。
APIスキーマ画面では、設定したいコンテンツの内容を決めることができます。
今回は「タイトル」「イメージ画像」「テキスト」の３つを設定します。
設定する際にフィールドIDには分かりやすい名前を英語で命名しましょう。
種類の欄には、設定したいコンテンツに合うものを選択します。
APIスキーマの設定が完了すると。
下の画像の様に「コンテンツがありません」と表示されます。
追加ボタンをクリックし、コンテンツを追加します。
追加ボタンをクリックすると、先程設定したAPIスキーマが出てきます。
ここに設定したいコンテンツ内容を入力していき、入力が完了したら右上にある公開をクリックして公開します。
コンテンツの公開が完了したら、右上にあるAPIプレビューをクリックします
APIプレビューをクリックすると下の画像のような画面がでてきます。
赤枠の中の黒い部分が、ご自身のAPIキーになります。
このAPIキーは後ほど使用するので、見れる状態にしておきましょう。
ホームの画面左上のサービス名の下に記載されてあるのが「サービスドメイン」です。
こちらも後ほど使用するので、見れる状態にしておきましょう。
ここからはご自身のエディターでの作業になります。
※この記事ではvscodeをしようしています。
エディターを起動させたら、HTMLファイルを作成します。
HTMLファイルを作成したら、下の２つのscriptタグを設定します。
<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script> const { createClient } = microcms;
const client = createClient({
serviceDomain: 'ご自身のサービスドメイン',
apiKey: 'ご自身のAPIキー',
});
client
.get({
endpoint: 'test',
})
.then((res) => {
ご自身が設定したいコード
});「ご自身が設定したいコード」部分を入力し、microCMSに登録したコンテンツの内容がHTMLファイルに吐き出されれば、導入完了です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>microCMS</title>
</head>
<style>
.contents{
width: 50%;
}
.title{
display: inline-block;
font-size: 1.2em;
background-color: #415053;
color: antiquewhite;
width: 100%;
text-align: center;
border-radius: 999px;
padding: .5em 0;
}
img{
width: 100%;
}
</style>
<body>
</body>
<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>
<script>
const { createClient } = microcms;
const client = createClient({
serviceDomain: 'ご自身のサービスドメイン',
apiKey: 'ご自身のAPIキー',
});
client
.get({
endpoint: 'test',
})
.then((res) => {
console.log(res);
let param = location.search;
let body = document.querySelector("body");
let h2 = document.createElement("h2");
let p = document.createElement("p");
let img = document.createElement("img");
let div = document.createElement("div");
h2.setAttribute("class", "title");
p.setAttribute("class", "text");
div.setAttribute("class", "contents");
res.contents.forEach(item => {
h2.innerText = item.title;
img.src = item.image.url;
p.innerText = item.text;
body.appendChild(div);
div.appendChild(h2);
div.appendChild(img);
div.appendChild(p);
})
})
</script>
</html>