トップ
チュートリアル
Gatsby

Getting Started

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

事前に確認が必要なこと

microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
Gatsbyで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。

はじめに: https://document.microcms.io/manual/getting-started

microCMSのセットアップ

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

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

設定例を以下に示していきます。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"

Gatsbyプロジェクトの準備

次にGatsbyのプロジェクトを作成します。Gatsbyが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。

npx gatsby new gatsby-microcms

プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。developコマンドを使います。

cd gatsby-microcms
npm run develop

そして、localhost:8000にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。

microCMSから情報を取得して表示

次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。
Gatsbyでデータを取得するために、gatsby-source-microcmsをインストールします。

npm install gatsby-source-microcms

GitHub - microcmsio/gatsby-source-microcms: Source plugin for Gatsby from microCMS.: https://github.com/microcmsio/gatsby-source-microcms

そして、gatsby-config.jsにmicroCMSのデータを取得するための設定を追加します。API_KEYはサービス設定 > API-KEYから確認可能です。serviceIdはご自身が設定したものを設定してください。今回はオブジェクト形式なので、formatにobjectを指定します。

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: 'API_KEY',
        serviceId: 'example',
        apis: [{
          endpoint: 'hello',
          format: 'object',
        }],
      },
    },
  ],
};

そして、src/pagesの中にhello.jsを作成しましょう。

// hello.js
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

const Hello = ({ data: { microcmsHello } }) => (
  <Layout>
    <SEO title="Hello, microCMS!!" />
    <h1>{microcmsHello.text}</h1>
  </Layout>
)

export default Hello

export const query = graphql`
  query {
    microcmsHello {
      text
    }
  }
`

ここではGraphQLのクエリを使ってデータを取得しています。microcmsHello.textで先程入稿したデータを取得できます。
この状態でlocalhost:8000/helloにアクセスしてみましょう。

microCMSの入稿内容を変更して、再度開発サーバーを立ち上げると画面表示される内容が変わることも合わせてご確認ください。

チュートリアル