おかしんどっとあいおー

ブログ育成日記 002「Contentfulプラグインの導入」

前回記事: ブログ育成日記 001「開発環境構築」 | おかしんどっとあいおー

今回はGatsbyからContentfulのコンテンツにアクセス出来るようにします

Contentfulの準備

アカウントの作成

https://be.contentful.com/login

こちらからGithubアカウントでログインします。

スペースの作成

スクリーンショット 2019-02-18 09.17.50

画面左上のメニューバーから新しいスペースを作成します

スクリーンショット 2019-02-18 09.20.33

最初から作成されているデフォルトスペースの他に無料でもう一つスペースを作ることが出来ます。デフォルトスペースは後から削除できるので無料で2つのスペースを使えることになります。

スクリーンショット 2019-02-18 09.21.49

好きなスペース名をつけ、「Empty」を選択してスペースを作成します。

スクリーンショット 2019-02-18 09.23.01

Content modelの作成

画面中央部の「Create a content type」から作成します。

スクリーンショット 2019-02-18 09.32.56

Nameを「Post」にして「Create」

スクリーンショット 2019-02-18 09.37.25

画面右側から「Add Field」します

スクリーンショット 2019-02-18 09.40.00

「Text」を選択

スクリーンショット 2019-02-18 09.41.24

Nmaeを「title」とし、「Short text」を選択して「Create」します

スクリーンショット 2019-02-18 09.43.45

続いて、下表のように合計6つのFieldを作成します。

Name FieldType type
title Text Short text
subtitle Text Short text
author Text Short text
slug Text Short text
image Media One file
content Text Long text

スクリーンショット 2019-02-18 09.49.49

Contentsの作成

「Content」から「Add Post」していくつか記事を追加しておきます。

スクリーンショット 2019-02-19 1.07.36

APIキーの取得

「Settings」から「API Key」を開きます

スクリーンショット 2019-02-18 23.14.22

デフォルトで「Example Key 1」が存在しますが、新しく「Add API Key」で追加します

スクリーンショット 2019-02-18 23.16.15

「SpaceID」と「Content Delivery API - access token」は後ほどGatsbybのプラグインで利用します。「Description」に何か書いてから保存します。

Contentfulプラグインを使えるようにする

本記事の変更はすべて下記のプルリクに入っています

002 contentful plugin by okash1n · Pull Request #2 · okash1n/blog

Readmeの編集

README.mdにはstarterの説明が記載されていますが、不要なので適当に編集します。あとで記事ごとに見返せるようにブランチも新しく切ります

$ git checkout -b 002-contentful-plugin

README.mdを以下のように編集します

blog/README.md at 002-contentful-plugin · okash1n/blog

Contentful用のプラグイン導入

スクリーンショット 2019-02-17 22.33.32

今現在の状態で表示されているいくつかの記事は/content/blog内に配置されており、gatsby-source-filesystem というプラグインで取得してきています。ですが「ブログ育成日記 000「ブログ育成日記はじめます」で書いたように本来JAMstackの思想に則るのであれば、コンテンツがソース内で管理されているべきではありません。

そこでコンテンツを外部のContentfulから引っ張ってこれるようにするためのプラグインが gatsby-source-contentful です。

次のコマンドでインストールします。

    $ yarn add gatsby-source-contentful

git status で確認すると package.jsonyarn.lock が変更されているのが分かります。

スクリーンショット 2019-02-18 00.37.37

dotenvの導入

冒頭で取得したContentfulの「SpaceID」および「Access Token」をGatsbyが使えるようにしてやる必要があります。具体的には gatsby-config.js の中に以下のように追記することで、 gatsby-source-contentful のプラグインがContentfulからAPI経由でコンテンツを取得出来るようになります。

    ...
    ...
          options: {
            pathToConfigModule: `src/utils/typography`,
          },
        },
        {
          resolve: `gatsby-source-contentful`,
          options: {
            spaceId: `取得したSpaceID`,
            accessToken: `取得したAccessToken`
          },
        },
      ],
    }

ですが、これではGithubにpushするとキーがダダ漏れです。よって環境変数にキーを保存して、gatsby-config.jsでは環境変数を記述するようにします。それを簡単に実現可能にするのが dotenv です。もちろん、exportしても良いのですが、ターミナルを再起動するたびに export したり、グローバルに設定するのも嫌です。 dotenv はこれらを回避するためにプロジェクト内でのみ有効な環境変数を作るためのものだと思ってもらって良いです。

以下のコマンドで追加していきます。

    $ yarn add dotenv

プロジェクトのルートに .env というファイルを追加し、以下のように記述します。 ※{}は不要です。

    CONTENTFUL_SPACE_ID={取得したSpaceID}
    CONTENTFUL_ACCESS_TOKEN={取得したAccessToken}

そして、 gatsby-config.js は以下のようにします。

    
    const dotenv = require('dotenv')
    
    if (process.env.NODE_ENV !== 'production') {
      dotenv.config()
    }
    
    ...
    ...
          options: {
            pathToConfigModule: `src/utils/typography`,
          },
        },
        {
          resolve: `gatsby-source-contentful`,
          options: {
            spaceId: process.env.CONTENTFUL_SPACE_ID,
            accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
          },
        },
      ],
    }

.gitignore にはすでに .env が含まれているので、キーはGithubにはpushされません。

GatsbyからContentfulのデータを取得してみる

yarn develop で開発環境を立ち上げて、 http://localhost:8000/___graphql にアクセスします

GraphiQLという、ブラウザから簡単にGraphQLを叩けるツールが開くので、以下のようなクエリを投げてみます。

{
 allContentfulPost {
   edges {
     node {
        title
        author
        subtitle
        slug
        image {
          fluid {
            src
          }
        }
        author
        content {
                    content
        }
     }
   }
 }
}

すると、以下のようにContentfulで作成した記事のデータを取得することができます。

スクリーンショット 2019-02-19 1.32.21

JAMstackの根幹である、「外部に置いたコンテンツをAPI経由で取得してくる」ことが出来ました。ただ、このままではMarkdownを取得しているだけなので、htmlに変換する仕組みなどが必要です。

次回はそこを実装していきます。


okash1n

Written by okash1n