業務でWordPressを使っている時に、「Vue.jsやReactなら簡単に終わるのになぁ‥」と感じることが多いので、ヘッドレスCMSというものに挑戦してみることにしました。
今回使用したのは「microCMS」です。
無料で気軽に始めることができます。
登録完了後は「まず何をしたらいいんだろう‥」となってしまったのですが、
公式がきちんとmicroCMSを初めて使う人向けに解説ページを用意してくれていました。
ありがとうございます。
以下のページを参考にすると、問題なく最初の一歩を踏みだせました。
ただし、コードをコピペするだけだと、自分の書いた記事の内容は表示されませんでした。
↑のように見本が表示されてしまいます。
自分の書いた内容を表示するためには、以下の3つを変更する必要があります。
- サービスID
- エンドポイント
- APY-KEY
サービスIDは管理画面の左上、エンドポイントとAPY-KEYはAPIプレビュー画面にあります。
以上の3点を、見本のコードに反映させる必要があります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブラウザでデータを表示する</title>
</head>
<body>
<main>
<h1 id="title"></h1>
<hr>
<div id="body"></div>
</main>
<script>
fetch("https://⭐️ここを自分のサービスIDに変更⭐️.microcms.io/api/v1/news/⭐️ここを自分が作ったお知らせのエンドポイントに変更⭐️", {
headers: {
"X-MICROCMS-API-KEY": "⭐️ここを自分のAPI-KEYに変更⭐️"
}
})
.then(res => res.json())
.then(json => {
document.getElementById("title").innerHTML = json.title;
document.getElementById("body").innerHTML = json.body;
})
</script>
</body>
</html>
無事に自分が書いた記事の内容が表示されました。
