Nuxt.js + Netlify で RSS を取得して静的 JSON にする

やりたいこと

IFTTT を使って note の更新を検知

Nuxt.js で note RSS を取得して、静的 JSON としてダウンロード

コンポーネント内で読み込みたい

けっこう改造した動作サンプルはこちら

使うもの

- Nuxt.js
- Netlify (デプロイ方法は割愛)
- IFTTT (Netlify に note の更新通知を送信する)

Nuxt.js をインストールする

今回は rss-nuxt-app という名前でインストール。色々聞かれるので、 Axios を追加する。そのほかは任意。

$ yarn create nuxt-app rss-nuxt-app

パッケージをインストールする

Axios 以外のパッケージをインストール。
必要なのは fs-extra, xml2js, @nuxtjs/moment
そのほかは任意。

$ yarn add -D fs-extra xml2js @nuxtjs/moment

@nuxtjs/moment
タイムスタンプを整形するやつ。あると楽なので必須。

fs-extra
JSON をローカルに書き出して静的ファイルにするためのやつ。必須。

xml2js
RSS は XML 形式なので、 XML を JSON に変換するためのやつ。必須。

pug, SCSS の loader とか
プリプロセッサ。 pug, SCSS を使いたい場合は必須。

$ yarn add -D pug@2.0.3 pug-plain-loader node-sass sass-loader

RSS を静的 JSON にするためのファイルを作る

node_modules がある階層に「modules」ディレクトリを作成。
api-build-json.js」という空のファイルを作成して保存する。

nuxt.config.js に設定を記述

@nuxtjs/moment と、さっき作った api-build-json.js を modules に追加

module.exports = {
    ...
    modules: [
        ...
        ['@nuxtjs/moment', ['ja']],
        '~/modules/api-build-json'
        ...
    ],
    ...
}

api-build-json.js を編集する

RSS を 取得して 静的 JSON にするソースコード
以下が全文

~/modules/api-build-json.js

7行目
JSON ファイルを吐き出す先を指定

const distJosonFile = './static/_nuxt/api/index.json'

33 - 35 行目
ここで XML を JSON に変換している

// XML オブジェクト を JSON に変換して JSON オブジェクトに格納する
ps.parseString(xml, (message, xmlres) => {
    json.items = xmlres.rss.channel[0].item
})

37 - 41 行目
RSS だと本文とサムネイルが同じ要素内にあるので
正規表現を使って画像だけを取得して配列にする

// サムネイルを取得した配列を作成して結合
json.items.forEach((data) => {
    let thumb = getThumbnails(data.description[0])
    Object.assign(data, { thumb: thumb })
})

画像を取得して配列にする関数は 11 - 16 行目にあるやつ

 // サムネイルを取得する関数
 const getThumbnails = (data) => {
   let thumbnails = data.match(/https(.|\s)*?(jpg|png|gif|jpeg)/gi)
   return (thumbnails !== null && thumbnails !== undefined)
     ? Object.values(thumbnails)
     : false
 }

ビルドしてみる

~/dist/_nuxt/api/index.json てファイルが生成されるはず

$ yarn build

生成された JSON を読み込む

ウェブサイト全体で読み込みたいので、 ~/store/index.jsimport する

~/pages/index.vue で表示してみる

上記のコードでこんなかんじになる

IFTTT を使って Netlify に note の更新通知を送る

Netlify 側での作業

Netlify で webhook の URL を発行する
Settings > Build & deploy > Build hooks > Add build hook で URL が発行できる。
ここで発行した URL をメモしておく。

IFTTT を利用した作業

更新通知は IFTTT を利用して Netlify  に送る。

IFTTT
https://ifttt.com/

登録をして、右上のアカウント名をクリック → New Applet

+this をクリック

RSS を選択

New feed item を選択

RSS の URL を入力し、 Create trigger をクリック

+that をクリック

Webhooks を選択

Make a web request をクリック

URL
Netlify で発行した webhook の URL

Method
POST を選択

Content Type
application/json を選択

Create action をクリックして終了

これでタイムラグはあるものの note の更新を Netlify が検知できるようになりました。

あとは普通に note を更新するだけ。

おわり。

参考リンク

のくらさんの note - https://note.nokura.me/
のくらさんの Twitter - https://twitter.com/riman114

けっこう改造した動作サンプル

けっこう改造した動作サンプルのソースコード


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

9

たか橋

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。