nuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にする
2020-06-11
(LastUpdated: 2020-06-11)
RSSフィードを、比較的新しい仕様のATOM1.0にしてみました。
このブログでは、@nuxtjs/feedというプラグインを利用しています。 設定値を調べてみると、RSS2.0になっていました。
Feedを示すxmlは、いくつかのバージョンがあります。 メジャーなものでいえば、RSS1.0、RSS2.0、ATOMという具合です。
RSS2.0でも問題はなかったのですが、せっかくなので新しいのにしたいですよね。
[[ toc ]]
まずは、どんな感じで設定すれば良いかをリサーチ。 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すると・・・エラーが出ました。
なんでや・・・
bash
Cannot read property 'getUTCFullYear' of undefined
解決法はバッチリこちらの方が書いてくれていました。
Javascriptで.getFullyear() is not a function.が出た時の確認事項 | ハックノート
こんな感じでテスト的に書いてみたら、見事エラーが消えました!
js
date: new Date('2018/06/12')
なるほど、Date型ですか・・・
metaタグの変更も忘れずに・・・
最終的に、メタタグに以下のような記述が残るように書き直しましょう。
こうなってたのを・・・
`html
このようにしました。
`html
@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を利用しています。
この時に、設定値にkeywordsなどを入れておけば、ハッシュタグにキーワードを関連づけて、ツイートさせられるのではないかと考えたからです。
結局、ATOMの仕様にキーワード的なスペースが無いようなので、今回は諦めます・・・。
まとめ:SlackのRSSが動き出した!
ATOMフィードにアップデートして、デプロイしたところ、SlackのRSSから更新通知が一気に9通くらい来ました。 SlackのチャネルにRSS登録してたこともすっかり忘れてたので、ちょっと驚きました。
ATOMにしたことにより、正常に動き出したようなので、ちょっと安心です。
そして、ちょっと気になったところ。 その後、内容の回収をしてアップロードしたのですが、また大量のSlack通知が。
通知された記事は、最近、記事の手直しをしたものでした。
うーん、過去記事をいじる度に反応してしまうのか・・・?
Slackなら登録している人もいないでしょうから良いですが、Feedlyなんかはどうなんだろうか・・・
しばらく様子を見たいと思います。