R note

GatsbyサイトにRSSフィードを追加しました

2018年12月23日2018年12月23日

GatsbyJS

ようやくこのサイトにRSSフィードを追加できました。プラグインが用意されているのですが、ドキュメントが少なくて使い方がわからなくて苦労しました。結局、gatsby-starter-gcnというスターターのコードを参考にしながら、どうにか設置しました。

ぜひ、フィードの登録よろしくお願いしますw フィードはこちらです。

以下、設置メモです。

1. パッケージをインストール

gatsby-plugin-feedパッケージをインストールします。

npm i -S gatsby-plugin-feed

2. gatsby-config.jsに追加

gatsby-config.jsのプラグインのリストにgatsby-plugin-feedを追加します。ここでフィードに追加する情報を設定するのですが、僕の場合はデータ管理にAirtableを使っているので、その辺の記述で手こずりました。

でも、設定はこれだけです。これで/rss.xmlが書き出されます。

当該部分のソースコード

最終的なコードを載せておきます。optionsのところで、サイトの設定を記述したsiteMetadataとAirtableからデータを引っ張ってきてフィードの内容を構築しています。

Airtableからデータを引っ張ってくるためのクエリは、gatsby developを走らせると使えるGraphiQLを使って確認しながら書くと効率的です。以下のコードでハイライトされている部分がクエリ部分です。

module.exports = {

  // 省略

  plugins: [
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: (post) => {
              const rssMetadata = post.query.site.siteMetadata
              return post.query.allAirtable.edges.map(edge => ({
                date: edge.node.data.date,
                title: edge.node.data.title,
                description: edge.node.data.body.childMarkdownRemark.excerpt,
                url: rssMetadata.siteUrl + '/' + edge.node.data.slug,
                guid: rssMetadata.siteUrl + '/' + edge.node.data.slug,
                custom_elements: [
                  {
                    'content:encoded': edge.node.data.body.childMarkdownRemark.html,
                  },
                ],
              }))
            },
            query: `
            {
              allAirtable(limit:1000, sort: {fields: [data___date], order: DESC}) {                edges {                  node {                    data {                      title                      date(formatString: "ddd, DD MMM YYYY, h:mm:ss +0900")                      slug                      body {                        childMarkdownRemark {                          excerpt                          html                        }                      }                    }                  }                }              }            }
            `,
            output: "/rss.xml",
            title: "R note RSS Feed",
          },
        ],
      },
    },

  // 省略

}

フィードに記述される日時について

フィードの内容を確認したら時間が、実際は日本時間なのにGMT（標準時間）として記述されていたので、時間を調整しました。Qracさんが教えてくれたんですが、Luxonあたりのライブラリを活用するのが良さそうです。

僕の場合は調整が必要なのがフィード部分だけなので、GraphQLで時間を引っ張ってくる時に+0900という記述を足して調整しちゃいました。Airtableではオプションによって日本時間で日時が保存されるので、僕はそのような対応にしました。

データが標準時間で保存されている場合は、ページに表示する日時も全て調整が必要なのでLuxonのようなライブラリを使ってタイムゾーンを指定して調整する方がいいかもしれません。

プラグインのオプションにないのかな...

gatsby-plugin-feedプラグインのほうで日時フォーマットやタイムゾーンを設定できないか探してみたんですが、ドキュメントが少なくてわかりませんでした。このプラグインはnpm rssパッケージを使っているので、そちらのドキュメントにもざっと目を通してみたんですが、それらしい設定は見つけられませんでした。

とりあえず完了！

ということで、とりあえずRSSフィードの設定完了です！「R noteで実装したいこと」の完了リストが増えてきていて楽しいw

一覧に戻る