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

ishigaki

こんにちは、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-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 は Jamstack 開発の知見があります

高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応が可能です。「Jamstack にしたいが、社内調整ができるか不安」「Jamstack 開発がわかるエンジニアがいない」などのお困りごとに対して、メリット/デメリットの判断からお手伝いできます。まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!


ishigaki

投稿者 石垣 祥太郎

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