microCMS コンテンツの追加とデータの取得

はじめに

前回に引き続き、今回はmicroCMSでのコンテンツ追加とデータの取得について書いていきます.

1. コンテンツの追加

それでは早速コンテンツの追加を行なっていきます.

microCMSトップページからコンテンツ管理のページを開きます.
そこで画面右上+追加ボタンをクリックしてください.

↑の画面に飛ぶので、ここに好きな内容(今回はブログ記事)を書いていきます.
完了したら、再度画面右上の公開ボタンを押します.

追加されているかどうか確認するには、画面左上の<ボタンを押します.

無事に記事が追加されていることが確認できます.

2. API経由のデータ取得

次にAPIを試してみましょう.
microCMSに標準で搭載されている”APIリクエスト機能”を利用します.

画面右上の画面プレビューを押下して下さい.

以下の画面が表示されます.

既にデータ取得リクエストの準備は整っているので、画面内の取得ボタンを押してみます.
そうすると、JSONレスポンスが返ってくるので正常に動作していることを確認できました.

3. ブラウザでのデータ表示

最後に、APIで取得したデータをブラウザで表示させてみましょう.
表示のさせ方はシンプルにindex.htmlの作成で行います.

ソースコードはmicroCMS公式ページの以下を参考にさせていただきました.

microCMSのはじめ方
https://microcms.io/blog/getting-started/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="ja">
<body>
<main>
<div id="title"></div>
<hr></hr>
<div id="content"></div>
</main>
<script>
fetch("https://YOUR_SERVICE.microcms.io/api/v1/articles/VpMiRKFUF", {
headers: {
"X-API-KEY": "YOUR_API_KEY"
}
})
.then(res => res.json())
.then(json => {
document.getElementById("title").innerHTML = "<h1>" + json.title + "</h1>";
document.getElementById("content").innerHTML = json.content;
})
</script>
</body>
</html>

10, 12行目を各自のAPI情報に差し替えることを忘れないでください.
17, 18行目のjson.***についてはAPIスキーマのフィールドIDを入力して下さい.

これでタイトルと本文の取得をすることができました.

おわりに

以上、これまでに3回にわたってmicroCMSの解説を行なってきました.
microCMSの印象としては、とても直感的で使いやすいものだと思います.

この記事が少しでもみなさんのブログ構築の一助になれば幸いです.

参考

web