microCMS

コンテンツをブラウザで表示する

コンテンツをAPIから取得することができたら、実際にそのデータをブラウザで表示してみましょう。

※microCMSで取得できるのはJSONデータのみのため、ユーザーに内容を見せるためには何らかの表示ロジックが必要です。

ここではサンプルとして HTML/JavaScript を使って表示してみます。
実際にはAPIさえ呼び出せればデータ表示をするプラットフォームは何でも構いません。

こちらが今回作成した index.html です。

<!DOCTYPE html>
<html lang="ja">
  <body>
    <main>
      <h1 id="title"></h1>
      <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>


Fetch APIを使ってmicroCMSからデータを取得し、そのデータを基にDOMを書き換えています。
(何らかのテンプレートエンジン/フレームワークを用いることで、より効率的な実装も可能です)

このHTMLをブラウザから開くと次のように表示されます。