本記事では、GatsbyJS + microCMSの構成でオウンドメディアを作成していくチュートリアルになっています。作成イメージはライターと記事のコンテンツを結び付けて、複数人で編集できるものを想定しています。

前提

検証した環境は以下の通りです。

• GatsbyJS v2.26.1
• gatsby-source-microcms v1.0.1

セットアップ

まずはGatsbyJSのプロジェクトを作成してみましょう。公式で用意されているCLIを使います。

$ npx gatsby new gatsby-microcms-media

そして開発サーバーを立ち上げてください。

$ yarn run develop

無事に開発サーバーが立ち上がってるのを確認してください。

microCMSの用意をする

次に、microCMSでAPIを作成していきます。手順は下記に用意しました。詳細については、microCMSのドキュメントを参照してください。

アカウント登録
ログイン
サービスの作成

サービスIDは一度設定すると変更ができないので、慎重に決めましょう。

APIの作成

それでは、ライター用のAPIを作成していきます。API名にライター、エンドポイントにwriterを入力してください。

ここではリスト形式を選択します。

APIスキーマを作成します。内容は以下の通りです。入力が終わったら完了をクリックします。


次にブログ用のAPIを作成します。API名にブログ、エンドポイントにblogを入力してください。


ここも同じでリスト形式を選択します。


ここで重要なのがコンテンツ参照にwriterを指定しているところです。これでブログコンテンツを取得した場合、紐付いたライターコンテンツも取得することができます。

コンテンツの作成

適当に内容を入力し、公開します。
コンテンツ一覧画面に戻り、画面右上のAPIプレビューをクリックします。
取得ボタンをクリックし、入力内容がAPI経由で取得できるか確認してください（レスポンスJSONが表示されます）。

データの取得

ここからはGatsbyJSで実際のコンテンツデータを取得します。microCMSの公式でリリースしているプラグイン gatsby-source-microcmsをインストールします。

$ yarn add gatsby-source-microcms

プラグインの設定はgatsby-config.jsに書いていきます。まずは、APIキーを環境変数に含めるためにdotenvの設定をします。

// gatsby-config.js
const path = require('path');

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`
});

次に.env.developmentというファイルを作ります。自分のAPIキーを入力してください。このファイルは開発サーバーを立ち上げるときに読み込まれます。

API_KEY=xxxxxx

そして、gatsby-source-microcmsの設定を追加しましょう。自分のserviceIdを入力してください(例: hoge.microcms.ioであればhogeを入力)。apisにendpointを指定します。今回はblogです。

// gatsby-config.js
{
  resolve: "gatsby-source-microcms",
  options: {
    apiKey: process.env.API_KEY,
    serviceId: 'your',
    apis: [
      {
        endpoint: "blog",
      },
    ],
  },
},

その他にもさまざなオプションがあります。ぜひドキュメントを参照してください。

GraphiQLを使ったデータの確認

GatsbyJSでデータを取得するためにGraphQLを使います。GraphQLに慣れていない場合は分かりづらいかもしれません。なので、ブラウザ上でクエリを実行できるGraphiQLを使ってデータが上手く取得できてるか確認します。GatsbyJSの開発サーバーを立ち上げて、http://localhost:8000/_graphqlにアクセスしてください。

左のExplorerにある対象のクエリをクリックすると自動でクエリを展開してくれます。今回はallMicrocmsBlog > edges > nodeをクリックして、その中にあるデータを選択してみましょう。下記は一例です。真ん中上にある再生ボタンを押して、コンテンツの一覧が取得できるか確認してください。

query MyQuery {
  allMicrocmsBlog {
    edges {
      node {
        blogId
        title
        body
        publishedAt
        writer {
          name
          id
        }
      }
    }
  }
}

対象のデータが取得できます。参照しているライターコンテンツも取得できています。ここで注目したいのがmicroCMSのcontentIdはidではなくblogIdです。あとで動的なパスを指定するときに使います。

コンテンツの詳細もデータが取得できるか確認しましょう。下記のクエリで確認することができます。

query MyQuery {
  microcmsBlog {
    blogId
    title
    body
    publishedAt
    writer {
      name
    }
  }
}

このように、取得するデータのクエリがわからない場合はGraphiQLを使って確認することをオススメします。

ブログコンテンツの一覧を取得

先ほど確認したクエリを使って実際にデータを表示してみましょう。src/pages/index.jsを編集します。

// src/pages/index.js
import React from "react"
import { graphql, Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <ul>
      {data.allMicrocmsBlog.edges.map(({ node }) => (
        <li key={node.blogId}>
          <Link to={`/blog/${node.blogId}`}>{node.title}</Link>
        </li>
      ))}
    </ul>
  </Layout>
)

export default IndexPage

export const query = graphql`
  query {
    allMicrocmsBlog {
      edges {
        node {
          blogId
          title
        }
      }
    }
  }
`

ポイントはgraphqlを使って、先ほど確認したクエリでデータを取得しているところです。取得したクエリはdataとして渡しています。コンテンツの一覧画面ではblogIdとtitleだけを取得しました。

開発サーバーを起動してコンテンツが表示できるか確認しましょう。

ブログコンテンツの詳細

次にブログコンテンツの詳細ページを作成していきます。src/pagesの中にblogフォルダを作成して、その中に{microcmsBlog.blogId}.jsを作成します。ファイル名の{} (波括弧)に注目してください。これは、File System Route APIを利用して動的なページを作成しています。ここではblogIdを動的なパスとしてページを作成します。

注意:microCMS側で生成されたcontentIdに_(アンダースコア)が含まれる場合、File System Rroute APIの仕様上404ページになる場合があります。これを回避するためには、microCMSのダッシュボードでcontentIdを編集してください。

// src/pages/blog/{microcmsBlog.blogId}.js
import React from "react"
import { graphql } from "gatsby"

import Layout from "../../components/layout"
import SEO from "../../components/seo"

const BlogPage = ({ data }) => (
  <Layout>
    <SEO title={data.microcmsBlog.title} />
    <span>{data.microcmsBlog.writer.name}</span>
    <h1>{data.microcmsBlog.title}</h1>
    <div
      dangerouslySetInnerHTML={{
        __html: `${data.microcmsBlog.body}`,
      }}
    />
  </Layout>
)

export default BlogPage

export const query = graphql`
  query($id: String!) {
    microcmsBlog(id: { eq: $id }) {
      blogId
      title
      body
      writer {
        name
      }
    }
  }
`

コードが書き終わったらもう一度開発サーバーを立ち上げてみます。スタイルを追加していないので見栄えは悪いですが、ブログコンテンツとそれに紐付いたライターコンテンツが上手く取得できていることが確認できます。

今回はスタイルを追加しません。なので、ぜひ自分のスタイルを追加してオウンドメディアを完成させてください。

Netlifyにデプロイ

最後にホスティングサービス「Netlify」にデプロイしてみましょう。今回作成したプロジェクトをGitHubに上げてください。そしてNetlifyにアクセスしてみましょう。

Netilfyにログイン後、New site from Gitをクリックしましょう。Create a new siteからGItHubを連携します。

連携が完了した後に先ほどGitHubに上げたプロジェクトを検索して選択しましょう。

ビルド設定ができます。GatsbyJSの場合、Build Commandをyarn build、Public Directoryをpublic/にします。

Advanced build settingsから環境変数を設定します。これで、Deploy siteをクリックしてください。ビルドが始まります。

ビルドが完了するとURLが発行されます。アクセスすると無事にデプロイが完了していることが確認できます。

更新時にWebhookでビルド

GatsbyJSのような、SSGのフレームワークではこんてんつを更新しても本番環境に反映されません。なので、Webhookを使ってコンテンツの更新時にビルドする設定を追加します。Netlifyにアクセスして今回のプロジェクトからSite Settings > Build & Deploy > Build hooksで作成してください。

するとWebHookのURLが発行されるので、API設定 > Webhhokで先程のURLを設定すると、記事の更新時にNetlify側で再ビルドすることができます。

おわりに

今回はGatsbyJS + microCMSを組み合わせてJamstack構成のオウンドメディアを作成しました。GatsbyJSはGraphQLを用いてデータを扱うので若干とっつきにくい部分はありますがパフォーマンス面での優位性があるので、ぜひ機会がある場合は使ってみてください！

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、メールからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！