「RSS」の記事 - Crieit

スーパー完全無料でRSSをSlackに投稿できるやつを作った

2021-06-27T09:05:46+09:00

皆さん、どうやって技術ネタ、キャッチアップしてますか？

皆さんはどうやって日々日進月歩な技術ネタをキャッチアップしてますか？

私はよく企業や個人が書いている技術ブログから情報を得ることが多いです。本当に技術ブログって手軽なのにすごい勉強になりますよね。

皆さん、どうやってブログ記事を通知してますか？

ブログ記事確認はもちろん定期的にブログに訪問するのが一番ですが、なかなか時間の取れない中でそれは酷なので何かしら皆さん工夫していると思います。

ブログの更新にあわせてTwitterを更新してくれる企業様であれば、Twitterのフォローをすればいいかもしれませんが、必ずしもそうでもないかもしれませんし、Twitterのフォローには技術以外の話題も飛び交うので、集中して記事を確認することも難しいかもしれません。

そういったときに役立つのがRSSです。RSSとはRich Site Summaryの略で、ニュースやブログなど各種のウェブサイトの更新情報を配信するための仕組みやXMLフォーマットのことです。

RSSの更新を定期的に取得し、記事更新を教えてくれるRSSリーダーは皆さんお世話になっている人も多いのではないでしょうか？

私もGoogle Chromeに拡張としてRSSリーダーを入れていた時期もありました。

問題点

RSSリーダーを使って技術ブログの更新を検知する方法はおそらくデファクトスタンダードだと思いますが、個人的にちょっと問題点がありました。

それは、通勤時間の時間をうまく使ってキャッチアップするのが面倒ということです。

携帯にPCと同じRSSを登録するのがめんどくさい
RSSリーダーを開かない
- 電車に乗っているとTwitterやSlackを開いている時間がほぼ全て
- Kindleで読書するのも細かく乗り換えがあって中断が多く発生するためストレス
(RSSリーダーによって違うのかもしれませんが)タイトルを見て中身を判断するのが難しい

このような悩みがあるため、私はSlackの/feed機能を使ってRSSを購読してました。

が、しかしこれもまたもや問題点。Slackの無料ワークスペースには、Appsが10個までしか登録できないのです。(/feedもAppsを消費します)

Slackには他にもAppsをいくつか作って入れているため、実際登録できるRSSは5個くらいになってしまいちょっと心もとない感じになってしまいました。

IFTTTはどうなの？

ちょっと詳しい人だと「じゃあIFTTT」はどうなんです？という意見が聞こえてきそうですが結果的にこちらも不採用。

理由は上記とほぼ同じで、無料版だと設定できる数に制限があるためこちらもあえなく不採用。

というより、お金出せよって声が聞こえてきますね。

じゃあ作ろっか

ということで、作ります。

要求は次の通りのことを満たす必要があります。

無制限にRSSを登録できること
更新がある場合のみSlackに投稿すること
SlackもAppsを消費しないこと(Custom Integration)
できれば内容を要約したものや、OGP画像も一緒に投稿して記事の選別に役立てられる付加機能を作ること

feedparser

今回は時間もない中だったのでサクッとPythonで作っていきます。

RSSの購読にはfeedparserを使うと便利です。

RSS2.0だけでなく、Atomや古いRSSの形式でも難なく読み込んでくれます。

import feedparser
entries = feedparser.parse('http://feedparser.org/docs/examples/rss20.xml')
for e in entries:
    print(e.title)
    print(e.link)
    print(e.summary)

Entry Itemへのアクセスはイテレーターになっているので取り出しもかんたんです。

RSSのEntry Itemの取り出しはこれで進めます。本当にかんたんでありがたい。

さらに便利なのはpublished_parsedという項目がEntry Itemから取れます。

こちら、RSSのpublished_dateをdatetimeオブジェクトにパースしてくれます。

おかげで、フォーマット差分をあまり意識することなく、更新差分チェック実装ができました。

ステート管理

RSSには記事の作成日付(Publish Date)があり、RSSの取得のたびに差分チェックとして活用することができます。

なので、以前取得した記事のPublish Dateを記憶して、更新があった場合のみ記事を取得するようにしたいのですが、それには何かしらのDB、もしくはデータ保存する仕組みが必要となります。

今回は無料という縛りがあるため、当初はGitHubのレポジトリ上にステートファイルをコミットするようにしようとも思ったのですが、コミットが伸び過ぎてしまうのは色々問題なのでやはりDBを使いたいです。

HarperDB

HarperDBは、データ管理を容易にすることに重点を置いた分散型データベースで、ジョインを含むNoSQLとSQLをサポートしています。

NoSQLでSQLがかけるのは便利ですね！！

日本ではあまり聞きませんが、dev.toとかだとちょこちょこ話題に上がっております。

こちらのHarperDB、HarperDB Cloud Instanceというマネージドサービスも提供されており、インスタンスタイプを選ぶだけで、手軽にHarperDBを使うことができるようになっております。

え？でもお高いんじゃない？そんな声が聞こえてきますね。

なんと、今だけかもしれませんがHarperDB Cloud Instanceの一番最小のInstance構成だと無料で使うことができます！これは嬉しいですね。

Name	Value
RAM	0.5GB
DISK	1GB
VERSION	3.0.0
IOPS	3000

正直今回の使い方ではこのレベルで十分です。

Python上でのHarperDB操作も専用のライブラリが用意されているためかんたんに実装できます。

HARPERDB_URL = os.getenv("HARPERDB_URL")
HARPERDB_USERNAME = os.getenv("HARPERDB_USERNAME")
HARPERDB_PASSWORD = os.getenv("HARPERDB_PASSWORD")
HARPERDB_SCHEMA = os.getenv("HARPERDB_SCHEMA", "prd")
FILEPATH = "entry.csv"

db = harperdb.HarperDB(
    url=HARPERDB_URL,
    username=HARPERDB_USERNAME,
    password=HARPERDB_PASSWORD,)

test = db.search_by_hash(HARPERDB_SCHEMA, "last_published", [name], get_attributes=["time"])
for t in test:
    print(t["time"])

このようにNoSQLライクにHash Attributeを使って検索する感じで実装できます。もちろんValue引きも可能です。(遅くなるのかは不明だがNoSQLなら全走査になりそうなので多分遅い)

UpdateやInsertも同様な感じで実施できます。

ef insert_last_published(name: str):
    db.insert(HARPERDB_SCHEMA, "last_published", [{"name": name, "time": 123456789}])
    return 123456789


def update_last_published(name: str, time: int):
    result = db.update(HARPERDB_SCHEMA, "last_published", [{"name": name, "time": time}])
    return result

また、便利だなと思ったのはやはりSQLでの走査です。

def get_entry_urls():
    return [{"name": x["name"],
             "url": x["url"],
             "icon": x["icon"]} for x in db.sql(f"select * from {HARPERDB_SCHEMA}.entry_urls")]

といった具合にテーブルの＊Selectやジョインなんかも書くことができます。テーブル全体をなめたいとき、これは楽でいいですね。

また、CSV load機能もあり、CSVをHarperDBに食わせることもできちゃったりします。

今回はこちらの機能はRSSのEntryURL登録機能として便利に使用させていただきました。

import os
import harperdb

HARPERDB_URL = os.getenv("HARPERDB_URL")
HARPERDB_USERNAME = os.getenv("HARPERDB_USERNAME")
HARPERDB_PASSWORD = os.getenv("HARPERDB_PASSWORD")
HARPERDB_SCHEMA = os.getenv("HARPERDB_SCHEMA", "prd")
FILEPATH = "entry.csv"

db = harperdb.HarperDB(
    url=HARPERDB_URL,
    username=HARPERDB_USERNAME,
    password=HARPERDB_PASSWORD,)

db.csv_data_load(HARPERDB_SCHEMA, "entry_urls", FILEPATH, action="upsert")

無料開発で一番ネックになるのがDBですが、正直これだけで大概のアプリは作れてしまうのではないでしょうか？

OGP画像を得るには？

OGPとはOpen Graph Protocolの略で、TwitterやFacebookにURLリンクを貼り付けると出てくるあれです。

実際OGP作成を実装された方ならわかりますが、OGPはHTMLのHeaderに決まりきったmetaタグを記載して表現しております。

Slackのattachmentsに入れる画像はOGPのImageから取るようにします。

opengraph-py3

PythonでOGPを解析するならopengraphライブラリが便利です。ただし、

pip install opengraph

でインストールするとPython2用のライブラリがインストールされてしまいまともに動かないので、

pip install opengraph_py3

でインストールするようにします。

使い方もかんたんで、opengraph_py3.OpenGraphでインスタンスを作ってあげれば、ogp["image"]にOGPイメージURLが保存されます。

一点注意としてopengraphは裏でBeautifulSoapが動いているようで、Headerのないページに対してOGPを取得しようとするとAttributeErrorが出てしまうので例外処理を入れております。

本家にPR出すか迷いましたが、2017年から更新がないので骨折り損になりそうなので、やめておきます。

import opengraph_py3

def get_ogp_image(link: str):
    try:
        ogp = opengraph_py3.OpenGraph(url=link)
        if ogp.is_valid():
            return ogp["image"]
        else:
            return ""
    except AttributeError as e:
        logger.debug(f"No Head contents: {e}")
        return ""

Favicon

できれば、Slack投稿するときに技術ブログのアイコンをブログごとに変えたいなと思ったので、Faviconを取る実装も入れます。

Pythonにはfavicon取るためのライブラリfaviconがあります。

使い方も超かんたんで、favicon.getで取得したオブジェクトの配列0番目が一番大きなfaviconなのでそれを取るだけです。

import favicon
def get_favicon(link):
    icons = favicon.get(link)
    if len(icons) == 0:
        return ""
    else:
        return icons[0].url

キーワード抽出

さて、今回の醍醐味のキーワード抽出ですがこちらもかんたんに実装できます。

pytermextractという専門用語抽出ツールと形態素解析ライブラリjanomeを組み合わせることでかんたんに実現できます。

janomeは本当に便利で、特にCIに乗っけてぐるぐるしたい人にはmecabをインストールする必要も辞書をコンパイルする必要もなく、pipで一発入れれば使えるので重宝しています。

pytermextractはPyPI登録されているライブラリではないのでインストールは公式サイトから落としたZIPを展開しsetup.pyから行います。

また、janomeもpipでインストールします。

unzip pytermextract-0_01.zip
cd pytermextract-0_01
python setup.py install

pip install janome

まずは、キーワード抽出したいテキストをjanomeのTokenizerにかけて、結果を頻出度から単名詞の左右の連接情報スコア(LR)を算出し、

重要度スコアとしてはじき出す、という仕組みらしいです。とは言っても私にはよくわからなったのでサンプルコード丸パクリです。

得られる結果は{"単語": スコア}となってますので、こちらをスコア順にリバースソートして上位6位を取得する形にしました。

しょうもない知識ですが、janomeのTokenizerインスタンス作るところは処理コストがちょっと高いので、リファクタでモジュールトップレベルでの宣言にしてます。

from janome.tokenizer import Tokenizer
import termextract.janome
import termextract.core

t = Tokenizer()

def extract_keyword(text):
    tokenize_text = t.tokenize(text)
    frequency = termextract.janome.cmp_noun_dict(tokenize_text)
    lr = termextract.core.score_lr(
        frequency,
        ignore_words=termextract.janome.IGNORE_WORDS,
        lr_mode=1, average_rate=1)
    term_imp = termextract.core.term_importance(frequency, lr)
    score_sorted_term_imp = sorted(term_imp.items(), key=lambda x: x[1], reverse=True)
    logger.debug(f"keywords: {score_sorted_term_imp}")
    return score_sorted_term_imp[:6]

RSSのSummaryTextでは精度がでない、そりゃそうじゃ。

見出し通りですが、当初はfeedparserから取得できるEntry ItemのSummaryをpytermextractに食わせてましたが、SummaryTextが短すぎて全く期待する動作になりませんでしたので、BeautifulSoupを使って、実際の記事の本文を取得しpytermextractに食わせる実装に変更しました。

from bs4 import BeautifulSoup
import urllib.request as req

def extract_html_text(url):
    res = req.urlopen(url)
    soup = BeautifulSoup(res, "html.parser")
    p_tag_list = soup.find_all("p")
    return " ".join([p.get_text() for p in p_tag_list])

本文はpタグと判断しfind_allするちんけな実装です。ごめんなさい。

Slack投稿

いよいよSlack投稿部分の作成です。

Slack投稿はCustomIntegrationのIncoming Webhookで作ります。

なので、Slack attachmentが使えます。

特質したことはないのですが、OGP画像はimage_urlに、faviconはauthor_imageにキーワードはfieldsに入れてます。

GitHub Actions化

最後にGitHub Actionsに載せて、定期実行させます。

その前にの#harperdbでも書いたとおり、RSS追加時のHarperDBへのEntry追加の定義を書いていきます。

特定のファイルに更新があった場合のみ動くGitHub Actionsを作る場合は、 on_pushなどの条件にpathsを入れることで実現できます。これだけです。

on:
  push:
    branches:
      - main
    paths:
      - "entry.csv"
  pull_request:
    branches:
      - main
    paths:
      - "entry.csv"

また、定期実行にはschedule cronが便利です。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  schedule:
    - cron: "*/30 * * * *"

完成

ということでできました。

entry.csvに書いたRSS feedを30分ごとに確認しにいき、前回よりpublish_dateの更新があったばあいはOGP, favicon, キーワード付きでSlack投稿します。

レポジトリはこちらです。

https://github.com/tubone24/tech_blog_spider

ForkするとGitHubA　ctionsがうまく発火しないっぽいので、もし利用する際はgit cloneして自身のレポジトリに再Pushして使っていただければと思います。

結論

HarperDBを使って何でもつくれそうな予感がするこの頃です。

Hugo で React + TypeScript を利用してサクッとウェブサイトに RSS リーダーを追加する

2020-12-22T16:15:41+09:00

この記事は Static Site Generator Advent Calendar 2020 22日目の記事です。

はじめに

Hugo のウェブサイトに組み込む RSS リーダーを TypeScript で開発してみたいと思い調査したところ、Hugo の最新版には ESBuild が組み込まれていて、非常に手厚く JavaScript の開発環境がサポートされていることが分かりました。 本記事では紹介していませんが Babel も利用できるようです。

また、NPM パッケージも利用できるため、普段のウェブ開発と同様の流れで開発ができ、各種ライブラリを用いた開発も非常に楽でした。
今回は Hugo で JavaScript 開発する方法を RSS リーダーの開発を例に上げ、そこで得た知見についても交える形で記事として残しておくことにしました。

ちなみに本記事内容は Hugo で JavaScript 開発する方法に焦点を絞ったものなのですが、ウェブサイトに RSS リーダーを組み込むことに焦点を絞って見たい方は RSS リーダーを Hugo の Data Templates で実装する から見ていただくことをオススメします。

Hugo で JavaScript (React + TypeScript) の開発環境を整える

まず、TypeScript のビルドは ESBuild に任せることができるため何も行う必要はありません。 そのため React 開発用パッケージのインストールのみ行えば大丈夫です。

Hugo プロジェクトのルートディレクトリで下記コマンドを実行し、package.json を作成してから、React の開発に必要なパッケージをインストールします。

npm init -y
npm install --save react react-dom

無事パッケージのインストールが完了したら、早速 TSX ファイルを assets/js/App.tsx に作成してしまいます。

// assets/js/App.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <>
        Hello React!
        
    );
}

ReactDOM.render(
    ,
    document.getElementById("react")
);

上記のコードを見てもらえば分かる通り、レンダリング先に id が react の DOM ノードを指定しています。そのため Hugo 側で該当する DOM ノードを用意する必要があります。その際の HTML テンプレートは下記になります。




{{ with resources.Get "js/App.tsx" }}





{{ $options := dict "targetPath" "js/app.js" "minify" true "defines" (dict "process.env.NODE_ENV" "\"development\"") }}


{{ $js := resources.Get . | js.Build $options }}


{{ $secureJS := $js | resources.Fingerprint "sha512" }}


{{ end }}

ちなみに $options で指定している ESBuild でビルド時に指定可能なオプションは Hugo の公式ページに記載されています。

上記 HTML の記述を RSS リーダーを埋め込みたいページに追加します。
この状態で該当ページにアクセスすると下記のような表示が確認できるはずです。

App.tsx で定義した内容が画面に表示される

これで React + TypeScript の開発環境が整いました。

RSS リーダーを実装する

あとは一般的な Web フロントエンド開発の流れで RSS リーダーの開発を進めていくだけです。

ウェブサイトで読み込みたい RSS フィードを準備する

RSS フィードを利用する際は必ず提供しているサービスの利用規約をご確認ください。
Qiita 及び Zenn については個人利用かつ自分の情報のみを扱う範囲内であれば利用が許可されているように見受けられました。

下準備としてウェブサイトで読み込みたい RSS フィードを事前にダウンロードするためのバッチを作成します。バッチは NPM を利用して作成していきます。NPM を導入したので Hugo で利用する簡易なバッチは JavaScript でサクッと作成していきます。

まずはスクリプト作成の際に必要となるパッケージを事前にいくつかインストールします。

# html をテキスト変換にするパッケージと RSS フィードのパーサーをインストールする
npm i -D --save html-to-text rss-parser

実際のコードは下記になります。ファイル名末尾が .mjs なのは Top-Level Await を使用したいからです。

// scripts/update-rss.mjs
import { writeFileSync } from 'fs';

import pkg from 'html-to-text';
const { htmlToText } = pkg;

import Parser from 'rss-parser';
const parser = new Parser();

// 自ブログで読み込みたい RSS フィードの情報を設定する
const rssFeed = {
    Zenn: {
        rss_url: 'https://zenn.dev/nikaera/feed',
        profile_url: 'https://zenn.dev/nikaera',
    },
    Qiita: {
        rss_url: 'https://qiita.com/nikaera/feed.atom',
        profile_url: 'https://qiita.com/nikaera',
    }
}

try {
    const jsonFeed = {}

    // RSS フィード内の description を 73字で切り取り末尾に ... を付与する関数
    const spliceContent = (content) => `${htmlToText(content).slice(0, 73)}...`

    // rssFeed 変数で定義されてる情報を繰り返し処理する
    for (const [site, info] of Object.entries(rssFeed)) {

        // RSS フィードの URL から必要な情報を取得する
        const feed = await parser.parseURL(info.rss_url);

        // RSS フィードに登録されている項目で必要な情報のみを取得する
        const items = feed.items.map((i) => {
            return {
                title: i.title,
                content: spliceContent(i.content),
                url: i.link,
                date: i.pubDate
            }
        })

        // 取得内容は jsonFeed に格納する
        const { rss_url, profile_url } = info
        jsonFeed[site] = { rss_url, profile_url, items };
    }

    // 最後に jsonFeed に格納された内容を JSON 文字列として static/rss.json に出力する
    writeFileSync('./static/rss.json', JSON.stringify(jsonFeed));
} catch(err) {
    console.error(err);
}

次に package.json の scripts に登録してコマンドとして実行可能にします。

{
    "scripts": {
        "update-rss": "node ./scripts/update-rss.mjs"
    }
}

これで npm run update-rss を実行すれば自ブログで表示する際に用いる JSON ファイルとして RSS フィードの内容を static/rss.json に出力できます。また、JSON ファイルは static フォルダに出力しているため http://localhost:1313/rss.json でアクセスできます。

npm run update-rss を実行して出力した rss.json

http://localhost:1313/rss.json にアクセスして出力した rss.json が参照可能なことを確認する

RSS リーダーを React + TypeScript で実装する

準備が整ったので、早速 RSS リーダーを作成していきます。

下記は Hugo のテーマの 1つである hugo-PaperMod の archives テンプレートを利用してページに埋め込むことを想定した RSS リーダーのコードです。

// assets/js/Rss.tsx
import React, { useMemo, useState } from 'react'

import * as superagent from 'superagent';

const Rss = (props) => {
    const [feed, setFeed] = useState({});
    const { name } = props;

    useMemo(() => {
        (async () => {
            try {
                const res = await superagent.get('/rss.json');
                setFeed(res.body[name]);
            } catch (err) {
                console.error(err);
            }
        })()
    }, [name]);

    if (!("items" in feed)) return null

    return (
        
            
                {name} - RSS
            
            
                {feed.items.map((item) => {
                    return 
                        {item.title}
                        {item.date} - {item.content}
                         
                    
                })}
            
        
    )
}

export default Rss

次に assets/js/App.tsx で assets/js/Rss.tsx を読み込み画面に表示できるよう改修します。

// assets/js/App.tsx
import Rss from './Rss';

import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <>
            
                
                    Tech 🦾
                
                
                
            
        
    );
}

ReactDOM.render(
    ,
    document.getElementById("react")
);

これで RSS リーダーを埋め込んだページを閲覧すると下記のような画面が表示されるはずです。

hugo-PaperMod で archives テンプレートを用いて RSS リーダーを表示したときの画面

もし他の RSS フィードを追加したい場合は scripts/update-rss.mjs の rssFeed 変数に情報を追加して、App.tsx にを定義することで対応できます。

RSS フィードの内容を自動で更新する

npm run update-rss を手元で実行して static/rss.json を更新して公開すれば、最新の RSS フィードの内容をページに反映できる状態ですが、都度手動で更新するのは面倒な作業です。

そこで今回は GitHub Actions の schedule を用いて static/rss.json の更新を自動化します。

GitHub Actions のワークフローファイルを作成する

実際のワークフローファイルは下記になります。schedule の項目で設定している内容がワークフローの実行スケジュールになります。今回は半日毎に更新が走るようにしました。

# .github/workflows/update-rss.yml
name: update rss json file

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  schedule:
    - cron: '0 */12 * * *' # 今回は半日に 1回のタイミングで更新するようにした

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          ref: main
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Use Node.js 14.10.1
        uses: actions/setup-node@v1
        with:
          node-version: 14.10.1

      - name: Install dependencies
        run: npm install

      - name: Update RSS Feeds
        run: npm run update-rss

      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git add static/rss.json
          STATUS=$(git status -s)
          if [ -n "$STATUS" ]; then
            git commit -m "Update rss.json `date +'%Y-%m-%d %H:%M:%S'`" -a
            git push origin main
          fi

上記ワークフローファイルをプロジェクトに追加して、リモートリポジトリにプッシュした後は、ワークフローが実行されるタイミングを待ちます。

無事にワークフローの実行が完了すると下記のようなコミットが追加されているはずです。

GitHub Actions が JSON ファイルを更新してコミットしている

コミットの詳細を見ると正常に JSON ファイルが更新されていることが確認できる

コミット後 Hugo をビルド & デプロイするとページが更新されていることを確認できる

これで Zenn や Qiita 等に記事を書いた際に、都度手動で static/rss.json を更新してページに最新の内容を反映させる作業は必要なくなりました。

(余談) RSS リーダーを Hugo の Data Templates で実装する

ちなみに Hugo には Data Templates という仕組みがあり、これを用いることで実は JavaScript を利用しなくても HTML テンプレートで RSS リーダーを実現できるということを後から知りました。

そこで最後に Data Template での RSS リーダーの実装方法について記載します。

まずは、scripts/update-rss.mjs の内容を書き換えます。

// scripts/update-rss.mjs
import { writeFileSync } from 'fs';

import pkg from 'html-to-text';
const { htmlToText } = pkg;

import Parser from 'rss-parser';
const parser = new Parser();

const rssFeed = {
    Zenn: {
        rss_url: 'https://zenn.dev/nikaera/feed',
        profile_url: 'https://zenn.dev/nikaera'
    },
    Qiita: {
        rss_url: 'https://qiita.com/nikaera/feed.atom',
        profile_url: 'https://qiita.com/nikaera'
    }
}

try {
    const jsonFeed = {}

    const spliceContent = (content) => `${htmlToText(content).slice(0, 73)}...`
    for (const [site, info] of Object.entries(rssFeed)) {
        const feed = await parser.parseURL(info.rss_url);
        const items = feed.items.map((i) => {
            console.log(i);
            return {
                title: i.title,
                content: spliceContent(i.content),
                url: i.link,
                date: i.pubDate
            }
        })
        const { rss_url, profile_url } = info
        jsonFeed[site] = { rss_url, profile_url, items };

        /*
        最終的な JSON ファイルの出力先は data フォルダとなり、RSS フィード毎に出力する
        例: ./data/Qiita.json, ./data/Zenn.json, etc.
        */
        writeFileSync(`./data/${site}.json`, JSON.stringify(jsonFeed[site]));
    }
} catch(err) {
    console.error(err);
}

上記を実行することで data/Qiita.json や data/Zenn.json にファイルが出力されます。

Hugo の Data Template を用いると data フォルダ内に配置した json, yaml, toml 形式のファイルは Go の HTML テンプレートで読み込めるようになります。

例えば、data/Qiita.json に配置された JSON ファイルを読み込みたい場合は Go のテンプレートで $Qiita := $.Site.Data.Qiita のような記述でできます。

次に RSS リーダーを埋め込んでいたページを下記のように書き換えます。







    
        Tech 🦾
    
    
        
        {{ $Zenn := $.Site.Data.Zenn }}
        
            Zenn - RSS
        
        
        
            {{- range $Zenn.items }}
            
                {{ .title }}
                {{ .date }} - {{ .content }}
                
            
            {{- end }}
        
    
    
        
        {{ $Qiita := $.Site.Data.Qiita }}
        
            Qiita - RSS
        
        
        
            {{- range $Qiita.items }}
            
                {{ .title }}
                {{ .date }} - {{ .content }}
                
            
            {{- end }}

また GitHub Actions のワークフローを用いて RSS フィードの情報を更新していた場合は、.github/workflows/update-rss.yml ファイルの更新も必要になります。

# .github/workflows/update-rss.yml
name: update rss json file

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  schedule:
    - cron: '0 */12 * * *'

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          ref: main
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Use Node.js 14.10.1
        uses: actions/setup-node@v1
        with:
          node-version: 14.10.1

      - name: Install dependencies
        run: npm install

      - name: Update RSS Feeds
        run: npm run update-rss

        # Git で追加する内容を data フォルダに変更する
        # git add static/rss.json -> git add data/
      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git add data/
          STATUS=$(git status -s)
          if [ -n "$STATUS" ]; then
            git commit -m "Update data folder `date +'%Y-%m-%d %H:%M:%S'`" -a
            git push origin main
          fi

これで JavaScript で作成した RSS リーダーから、Hugo の Data Templates を用いて作成した RSS リーダーへ移行できました。

おわりに

Hugo で React + TypeScript 開発を楽にできそうなことが分かり、テンションが上がってしまい、そのままのノリで実際に RSS リーダーを自ブログ向けに作成してみました。

しかし、本記事内容で RSS リーダーを実装するのであれば、Hugo の Data Templates を利用することがベストなことに後から気づきました。ただ Hugo での JavaScript を用いた開発手法が理解でき勉強になったので結果ヨシとしました。

Hugo での JavaScript 開発環境は相当充実していることが分かったので、また何かアイデアを思いついたら気軽に作って自ブログに取り込んでいきます。今はザックリ WebGL/WebVR とかで何か面白いもの作れそうだなと考えています。