最低限の構成でmicroCMSをGatsbyJSと連携して使う方法

16678 ワード
gatsby microCMS gatsby テキストリンク

microCMSをGatsbyJSと連携して使ってみたのでやり方をシェアしておきます。
microCMSは日本製のヘッドレスCMSであり、無料枠が充実していると評判も良さげです。NetlifyCMSの無料枠と比べてもお得だと思います。

一応、GatsbyでCMSと連携するのが初めての人を想定して解説しているので経験者は少し大目にみて読んでもらえればと思います。
できる限り必要最小限に抑えて連携に必要な部分のみ解説します。

成果物はmicroCMSで引っ張ってきた記事データでページ生成するところまでです。

準備

①microCMSに登録して記事を用意する
②GatsbyJSのプロジェクトをローカルにインストールする

microCMSは無料プランで使っています。無料枠の範囲などは変更されることもあるため以下の内容と異なる場合があるのでご了承ください。

①microCMSに登録して記事を用意する

microCMSでメール登録が澄んだところから図解説します。サービス名やサービスIDは好きな名前で問題ありません。
ちなみにサービスIDが管理画面IDにもなります。「サービスID」はgatsby側で設定する「servicedId」になるので覚えておきましょう。

画像もあってもなくても構いません。次へ進みます。

APIを作成して作成したAPIに記事を投入していきます。microCMSは無料枠で10個までAPIを作成できます。(for-qiita→qiitaへ訂正しました)

APIの追加はここの「+」ボタンで都度増やしていくことができます。

リスト形式かJSON形式かを選べます。記事を都度、増やしていく形になるためリスト形式にします。

必要最低限のフィールドのみ用意しました。コンポーネントのように記事に必要な要素を追加します。
今回は最低限の構成を目的にしているのでタイトル、本文内容、スラッグの３つだけにしました。

記事を追加しましょう。

タイトル、本文、スラッグを適当に入力して「公開」します。

もう一つ適当に記事を作っておきましょう。２つ記事ができました。

②gatsbyJSのプロジェクトをローカルにインストールする

スターターのテンプレをインストールしてディレクトリをmicroCMS-testへ移動します。
※gatsbyコマンドが使えない人はgatsby-cliをインストールしておきましょう。

gatsby new microCMS-test https://github.com/gatsbyjs/gatsby-starter-hello-world

次にGatsbyJSとmicroCMSを連携させるプラグインをインストールしておきましょう。

# npm
$ npm install gatsby-source-microcms

# or yarn
$ yarn add gatsby-source-microcms

連携するための処理をかいていく

gatsby-config.jsを編集してGraghQL上で取得

プラグインの記述をするだけで簡単に取得できます。

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: 'X-API-KEY',
        serviceId: 'gatsby',
        apis: [{
          endpoint: 'qiita',
        }],
      },
    },
  ],
};

APIキーはメニューの歯車マークをクリックすればみることができます

記述できたらdevelopします
追記ですが、microCMSから10件以上のリストを取得する場合はオプションで limit をここで設定しておきます。

gatsby develop

そしてビルディングに成功したら http://localhost:8000/___graphql へアクセスしましょう。

allMicrocms任意の名前が表示されています。設定したtitle、body、slugが表示されるのか確認してみてください。(ここで表示されていない場合は概ねgatsby-config.js上の設定のどこかが間違えているはずなので再確認してみて下さい。)

取得できたslugごとにページを生成する

Gatsbyではgatby-node.js上で createPages を使うことで簡単にページを生成します。microCMSで２記事のページをここでは生成します。
gatsby-node.jsファイルをgatsby-config.jsと同階層に作ります。

gatsby-node.js
// ※http://localhost:8000/___graphql上で確認できた「allMicrocms任意の名前」に書き換えてください
const path = require("path")
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(
    `
    {
      allMicrocmsQiita {
        edges {
          node {
            body
            slug
            title
          }
        }
      }
    }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  result.data.allMicrocmsQiita.edges.forEach((post, index) => {
    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        post: post.node,
      },
    });
  });
};

component: で指定しているように src に templates/blog-post.js とフォルダとファイル作成します。

gatsby-node.js
    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        post: post.node,
      },
    });

path: は文字通りのドメイン(ローカルホスト)以降のURLです。
component: はページの元となるコンポーネントの指定です。
context: はページへ渡すプロパティです。

簡易的にブログページを作る blog-post.jsの編集

gatsby-node.jsで生成するにあたりページの元となるコンポーネントを作成します。
一点だけ補足すると props として 「pageContext」を受け取っていますがこれはgatsby-node.jsの際に context: で指定した値が入ってきます。

blog-post.js
import React from "react"

export default function Post({ pageContext }) {
    const { title, body } = pageContext.post;
    console.log(pageContext)
    return (
        <>
          <h1>{title}</h1>
          <div>これはテストです</div>
          <div dangerouslySetInnerHTML={{ __html: body }} />
        </>
    )
}

ページが生成されているのか確認する

gatsby develop

生成されていることが確認できました。

ここまで絵最低限の構成でmicroCMSとGatsbyJSを連携することができました。

おまけ リンクを作成する

slugへのリンクをおまけで作ります。 pages/index.js に作りたいと思います。
とても簡易的なので参考までに。

index.js
// ※http://localhost:8000/___graphql上で確認できた「allMicrocms任意の名前」に書き換えてください
import React from "react"
import { graphql, Link } from "gatsby"

export default function Home({ data }) {
  return (
    <>
      <div>Hello world!</div>
      {data.allMicrocmsQiita.edges.map(edge => <div><Link key={edge.node.slug} to={edge.node.slug}>{edge.node.title}</Link></div>)}
    </>
  )
}

export const query = graphql`
query allMicrocmsQiita {
  allMicrocmsQiita {
    edges {
      node {
        title
        slug
      }
    }
  }
}

`

結果としてindexページにリンクが生成されました。