microCMS

Getting Started

こちらのドキュメントでは、microCMSをJavaScriptアプリケーションから利用するための最短手順を示します。
初めてJavaScriptアプリケーションからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。

事前に確認が必要なこと

  • microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
  • Nodeとnpmが必要になります。ご自身の開発環境にインストールしてください。
はじめに
https://document.microcms.io/manual/getting-started
GitHub - microcmsio/microcms-js-sdk: microCMS JavaScript SDK.
https://github.com/microcmsio/microcms-js-sdk

microCMSのセットアップ

まずはmicroCMSで非常に単純なAPIを作成します。

  • オブジェクト形式
  • テキストフィールド1つ


設定例を以下に示していきます。APIの作成の詳細手順についてはAPIの作成もご参照ください。

APIの作成
https://document.microcms.io/manual/create-api

APIの作成画面で適当なAPI名とエンドポイントを入力します。



次にオブジェクト形式を選択します。



最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。



上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。



以下のようなcurlコマンドでJSONを取得できることも確認しておきましょう。(ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です)

curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

Node.jsで使う場合

最初にNode.jsでデータを取得する場合の方法です。まずはpackage.jsonを作成して、microcms-js-sdkをインストールしましょう。

$ npm init -y
$ npm install microcms-js-sdk

そして、index.jsを作成してデータを取得します。service-domainapi-keyはご自身が設定したものを設定してください。

const { createClient } = require('microcms-js-sdk');

const client = createClient({ serviceDomain: 'service-domain', apiKey: 'api-key' });
// service-domain は XXXX.microcms.io の XXXX 部分
client
  .get({
    endpoint: 'hello',
  })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

ローカルのindex.jsを実行してみましょう。microCMSに入稿した内容を取得できます。

ブラウザで使う場合

次にブラウザでmicroCMSのデータを取得する場合の方法です。microcms-js-sdkはCDNサービスのunpkgでも提供されています。

<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>

バージョンを指定する場合は@latestの部分を変更してください。

<script src="https://unpkg.com/microcms-js-sdk@1.0.0/dist/umd/microcms-js-sdk.js"></script>

index.htmlを作成してデータを取得しましょう。service-domainapi-keyはご自身が設定したものを設定してください。

<!DOCTYPE html>
<html>
  <head>
    <title>microCMS SDK</title>
  </head>
  <body>
    <h1 id="text"></h1>
  </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: 'service-domain', // service-domain は XXXX.microcms.io の XXXX 部分
      apiKey: 'api-key',
    })
    client.get({ endpoint: 'hello'}).then((res) => {
      document.querySelector('#text').textContent = res.text
    })
  </script>
</html>

この状態でindex.htmlを開いてみましょう。microCMSに入稿した内容を取得し、画面表示が行われます。