💡 【microCMS】公式チュートリアルの補足【自己理解用】
作成日： 2022/02/13
0
  • microCMSのはじめ方の補足
  • microCMSドキュメント：下書き・予約投稿、draftKey、画面プレビューの補足

microCMSのはじめ方の補足

上記の記事のAPI経由でデータを取得まで終えたあと、公式のコード例を書き換える場所のメモ

書き換え前

<!DOCTYPE html>
<html lang="ja">
  <body>
    <main>
      <h1 id="title"></h1>
      <hr>
       <div id="body"></div>
    </main>
    <script>
      fetch("https://micro.microcms.io/api/v1/news/0ik_dv015", {
        headers: {
          "X-MICROCMS-API-KEY": "1598164e-2d58-488c-a4af-c51bd7d131a5"
        }
      })
        .then(res => res.json())
        .then(json => {
          document.getElementById("title").innerHTML = json.title;
          document.getElementById("body").innerHTML = json.body;
        })
   </script>
  </body>
</html>

本文とタイトル

<main>
      <h1 id="title"></h1>
      <hr>
       <div id="body"></div>
    </main>

管理画面⇒API設定⇒APIスキーマ
スクリーンショット 2022-02-16 16.34.55.png

APIキー、エンドポイント

<script>
    fetch("https://mkk-test.microcms.io/api/v1/news/61u0ji0a1", {
      headers: {
        "X-MICROCMS-API-KEY": "655bdb9e6d834c42bf186353582e9fc164ee"
      }
    })
...
 </script>

エンドポイント

管理画面⇒API設定⇒基本情報

スクリーンショット 2022-02-16 16.35.34.png

APIキー

管理画面⇒コンテンツ⇒APIプレビュー

スクリーンショット 2022-02-16 17.28.59.png

microCMSドキュメント：下書き・予約投稿、draftKey、画面プレビューの補足

下書きと公開の違い

  • DraftKeyは下書きのみに存在し、公開するとなくなる(再度下書きに戻すと復活)
  • 下書きを公開に変更するとブラウザ上で表示される
    動画🔗

下書き
スクリーンショット 2022-02-16 16.58.10.png
公開
スクリーンショット 2022-02-16 16.57.26.png

下書きの記事をブラウザで表示させる方法

コンテンツIDの後ろに?DraftKeyを追記すれば表示することができます。

<script>
    fetch("https://mkk-test.microcms.io/api/v1/news/g7xr21i_x?draftKey=BZ5qcaaY1E", {
      headers: {
        "X-MICROCMS-API-KEY": "655bdb9e6d834c42bf186353582e9fc164ee"
      }
    })
...
 </script>

結果

スクリーンショット 2022-02-16 17.57.06.png
みきこ
2021年からプログラミング学習を開始し、未経験から受託開発企業に転職。2022年前半を目標に転職活動中です。 JavaScriptとjQueryはPFで使用経験あり。最近始めたReactを使用してアプリを作成したいと考えております。 #ENJIN