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

ishigaki

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

今回は、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-filesystemgatsby-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を実践で使ってみた」としてまとめていますので、あわせてお読みいただけるとうれしいです。

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。