GatsbyJS + Netlify CMSで予約投稿を行う方法

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、「Gaji-LaboのコーポレートサイトはGatsbyJSで作られています」の記事でもご紹介した、「GatsbyJS + Netlify CMSで予約投稿を行う方法」をまとめたいと思います。

やりたかったこと

弊社のコーポレートサイトで、 Netlify CMSから記事を投稿する上で日付時間を指定して予約投稿を行いたいという要望がありました。

しかし、Netlify CMSには下書き機能はあるものの予約投稿機能が備わっていないため、CMS単体では手動で指定時間に公開することでしか対応ができませんでした。

GatsbyJSのプラグインに、予約投稿の機能が実装できるプラグインがあったため、それを使用して予約投稿を行えるようにしました。

対応方法

gatsby-plugin-draft というプラグインを導入して対応しました。

gatsby-plugin-draft は、GraphQLで取得したマークダウンのデータに draft というフィールドを追加することで、予約投稿を実現しています。

ビルドの日時がマークダウンのデータの持つ date フィールドより後の場合、フィールドの値は true となり、前になっている場合には値が false になります。

draft の値でビルドに含めるかどうかを判断し、 draft が true のデータはビルドさせないことで予約投稿を実現することができます。

導入

前もって gatsby-source-filesystem、gatsby-transformer-remark もあわせて導入しておき、gatsby-config.js にて読み込みます。

module.exports = {
  plugins: [
    'gatsby-source-filesystem',
    'gatsby-transformer-remark',
    'gatsby-plugin-draft'
  ],
};

gatsby-node.js に書いた、ページのビルドを行うための GraphQL のクエリに filter を設定してビルドするかどうかの判定を行います。

allMarkdownRemark(
  filter: { fields: { draft: { eq: false } } } # draft の値が false になっているデータのみを取得する
) {

以上の設定をすることで、date フィールドがビルド日時より後になってはじめてその記事のビルドが行われるため、予約投稿を実現することができるようになりました。

今回は Netlify CMS を使っていますが、 git-based な Headless CMS であれば Netlify CMS に限らず使用することができますし、直接マークダウンで日時を指定してももちろん予約投稿をすることが可能です。

注意点

ビルド日時を見ているので、定期的にビルドすることがどうしても必要になります。

今回の場合では、IFTTT と Netlify を連携させ、定期的にビルドを行うようにしました。

まとめ

今回はGatsbyJS + Netlify CMSで、予約投稿を行う方法をまとめました。GatsbyJS を使っている方の参考にしていただければと思います。

Gaji-Laboブログ内には、他にもGatsbyJSについて取り上げた記事があります。
GatsbyJSの開発に興味がある方、GatsbyJSをどう使ったらいいかの情報が知りたい方、実践でのポイントを勉強したいと思っている方などにおすすめの記事シリーズを「GatsbyJSを実践で使ってみた」としてまとめていますので、あわせてお読みいただけるとうれしいです。