nuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にする

RSSフィードを、比較的新しい仕様のATOM1.0にしてみました。

このブログでは、@nuxtjs/feedというプラグインを利用しています。
設定値を調べてみると、RSS2.0になっていました。

Feedを示すxmlは、いくつかのバージョンがあります。
メジャーなものでいえば、RSS1.0、RSS2.0、ATOMという具合です。

RSS2.0でも問題はなかったのですが、せっかくなので新しいのにしたいですよね。

まずは、どんな感じで設定すれば良いかをリサーチ。
ATOMで実装しておられる方のブログを発見。
Nuxt.jsの本ブログにてRSS Feedを導入する

このブログでは、すでにRSS2.0を設定しているので、type: 'rss2'type: 'atom1'に変更するだけで良いみたいですね。

getUTCFullYearのエラーが出る

まずはシンプルに、nuxt.config.jsに書かれた設定値を触ります。

feed: [
    {
      path: '/feed.xml', // The route to your feed.
      async create (feed) {
      // 省略
    },

      cacheTime: 1000 * 60 * 15, // How long should the feed be cached
      type: 'atom1' // Can be: rss2, atom1, json1
      // ↑ここをRSS2からatom1に変えた
    }
  ],

これでgenerateすると・・・エラーが出ました。
なんでや・・・

Cannot read property 'getUTCFullYear' of undefined

解決法はバッチリこちらの方が書いてくれていました。
Javascriptで.getFullyear() is not a function.が出た時の確認事項 | ハックノート
こんな感じでテスト的に書いてみたら、見事エラーが消えました!

date: new Date('2018/06/12')

なるほど、Date型ですか・・・

metaタグの変更も忘れずに・・・

最終的に、メタタグに以下のような記述が残るように書き直しましょう。
こうなってたのを・・・

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed.xml">

このようにしました。

<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/feed.xml">

@nuxtjs/feedの設定値をまとめてみる

とにかくドキュメントや情報が古いものが多いです。

ATOM1.0そのものの設定値については、以下のサイトを参考にしました。
Atom1.0仕様メモ (2007-06-03)

一方こちらは、@nuxt/feedで使われてるらしいモジュール。
パラメータの実装はこちらを参考にしました。
https://github.com/jpmonette/feed

結局、@nuxtjs/feedの設定値はこんな感じになりました。
稚拙ではありますが、何かのお役に立てればと思います。

feed: [
  {
    path: '/feed.xml', // The route to your feed.
    async create (feed) {
      feed.options = {
        author: {
          name: 'Chaos Boy',
        },
        title: title,
        id: domain,
        link: domain + 'feed.xml',
        language: 'ja',// これ、反映されない
        favicon: domain + 'img/favicon.ico',
        copyright: "All rights reserved 2018, Chaos Boy",
        subtitle: description,
        image: domain + 'img/author.png'
      }

      const fs = require('fs')
      posts.sourceFileArray.reverse().forEach(post => {
        const key = post.replace('stories/','stories/json/').replace('.md','.json')
        const article = require('./stories/json/' + posts.fileMap[key]['base'])
        const articleUrl = domain + 'posts/' + article.sourceBase.replace('_','/').replace('.md','/')
        const published = fs.statSync('./stories/' + article.sourceBase)
        const updated = article.base.substr(0,10).replace('.json','')
        const heroImg = domain + 'img/blog/' + article.img

        feed.addItem({
          title:article.title,
          id: articleUrl,
          link: articleUrl,
          description: article.digest,
          content: article.bodyHtml,
          published: new Date(published.mtime),
          date: new Date(updated),
          image: heroImg, // これも、反映されない
        })
      })
      feed.addCategory('blog')
      feed.addContributor({
        name: 'Chaos Boy',
        link: domain
      })
    },
    cacheTime: 1000 * 60 * 15, // How long should the feed be cached
    type: 'atom1' // Can be: rss2, atom1, json1
  }
],

バリデーターを利用して正しい記述かチェックする

由緒あるW3Cのサイトに、フィードが正しい記述かを調べてくれる、バリデーターが用意されています。
フィードに問題があれば、エラーを表示してくれます。
また、エラーではないが、より良い記述になるというtips的なものを教えてもくれます。
Feed Validator for Atom and RSS

上述の設定で、エラーは回避できます。
ただ、全ての要因をクリアすることはできていません。
より拘るなら、カスタムが必要ですね。

本当にやりたかったこと

記事を更新されるとツイートするように、IFTTTを利用しています。

IFTTTを使って超カンタンにブログ更新をツイートさせよう
ブログの新しい記事を投稿したらTwitterのフィードに自動で投稿してくれる機能を実装しました。IFTTTを使うとめちゃくちゃ簡単にできるので、ぜひ。...

この時に、設定値にkeywordsなどを入れておけば、ハッシュタグにキーワードを関連づけて、ツイートさせられるのではないかと考えたからです。

結局、ATOMの仕様にキーワード的なスペースが無いようなので、今回は諦めます・・・。

まとめ:SlackのRSSが動き出した!

ATOMフィードにアップデートして、デプロイしたところ、SlackのRSSから更新通知が一気に9通くらい来ました。
SlackのチャネルにRSS登録してたこともすっかり忘れてたので、ちょっと驚きました。

ATOMにしたことにより、正常に動き出したようなので、ちょっと安心です。

そして、ちょっと気になったところ。
その後、内容の回収をしてアップロードしたのですが、また大量のSlack通知が。

通知された記事は、最近、記事の手直しをしたものでした。

うーん、過去記事をいじる度に反応してしまうのか・・・?

Slackなら登録している人もいないでしょうから良いですが、Feedlyなんかはどうなんだろうか・・・

しばらく様子を見たいと思います。

#nuxt
#blog
ChaosBoy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。