RSSフィードからJSONファイルを出力する

Zenn の RSS フィードから記事一覧を表示したい

そんな人の手助けになればと思います。

Zenn には記事一覧を取得できる API がありませんが、RSS フィードは存在します。
RSS フィードはユーザーごとにあるので、これをなんとか JSON ファイルに変換すれば、自分のサイトに Zenn の記事一覧を表示させることができるかもしてないと、考え色々調べてみました。

RSS フィードを JSON に変換するには、rss-parser というライブラリを使うのが良さそうです。

https://zenn.dev/catnose99/articles/cb72a73368a547756862

実装前の注意点

この機能には弱点があります。
記事の最後に書いていますので、そちらを参照ください。

この機能の弱点

rss-parser とは?

公式にはこう説明されています。

RSS や XML を JavaScript オブジェクトに変換するライブラリ
A small library for turning RSS XML feeds into JavaScript objects.
https://github.com/rbren/rss-parser

機能はライブラリの名前の通りですね。

どんな機能を実装するか

1. rss-parser を使って RSS の情報を JSON に変換 👉 rss-parser.mjs
   ファイルの拡張子が.mjsであることに気をつけてください。.jsだと機能しないのでご注意を!
2. Node.js のwriteFileSyncメソッドを使って JSON ファイルに取得・変換した情報を書き込む 👉 data.json

rss-parser をインストールする

まずはライブラリのインストールから始めます。

npm install --save rss-parser

フォルダとファイルを用意する

rss-parser.mjs と feed.jsonを用意します。
私は、👇 のような構成にしました。

📁 project
┝ 📁 node_modules
└ 📁 src
  ┝ 📁 rss
  │ ┝ data.json
  │ └ rss-parser.mjs
  └ App.js

rss-parser.mjsを書いていく

ここは、ほぼ公式の説明の通りです。
プラスで以下記事を参考に、RSS の情報を取得して JSON に変換したデータを JSON ファイルに書き込む処理を実装しました。
めちゃくちゃ参考になりました。

https://zenn.dev/nikaera/articles/hugo-react-dev

rss-parser.mjs

import { writeFileSync } from "fs";
import Parser from "rss-parser";
const parser = new Parser();

(async () => {
  let jsonFeed = {};
  const feed = await parser.parseURL("https://zenn.dev/<your_zenn_id>/feed");
  const items = feed.items.map((data) => {
    return data;
  });
  jsonFeed = items;
  writeFileSync("src/rss/data.json", JSON.stringify(jsonFeed));
})();

コードを実行するコマンドをpackage.jsonに追加する

コードだけでは JSON ファイルに書き込むことができないのでpackage.jsonのscriptにコマンド追加します。

package.json

"update-rss": "node ./src/rss/rss-parser.mjs"

コマンドを実行する

準備は整ったので、あとはコマンドを実行するのみです。
早速 👇 のコマンドを実行してみましょう。

npm run update-rss

すると…
空だった、data.jsonに JSON 化されたフィードの情報が出力されています。
あとは、JSON データをimportしてデータを表示させるだけ!

JSON ファイルのデータを表示させる

おまけです。
data.jsonに出力されたデータを React で表示させます。

App.js

import React from "react";
import data from "./rss/data.json";
export default function App() {
  return (
    <div>
      {data.map((i) => (
        <a key={i.link} href={i.link}>
          <h3>{i.title}<h3>
          <div>{i.creator}</div>
        </a>
      ))}
    </div>
  );
}

この機能の弱点

この機能の一番の弱点は、記事を公開・更新するたびにupdate-rssコマンドを実行してビルドしなければならないという点です。記事の更新頻度が少ない人はいいですが、多い人は大変ですよね。

もっと良い方法はないものか。

Thanks and Source

https://zenn.dev/catnose99/articles/cb72a73368a547756862

https://zenn.dev/nikaera/articles/hugo-react-dev

https://github.com/rbren/rss-parser