RSSをJSONに変換してくれるWebサービス「rss2json」の紹介 #JavaScript

RSSをJSONにしてほしい！

RSSとは？

今となってはあまり聞かなくなってしまった「RSS」。ニュースサイトやブログの新着記事更新情報を配信するための文書フォーマットです。
かつてはGoogleのRSSリーダー「Google Reader」、Webブラウザの「Firefox」等、RSSを扱うことのできるWebサービスやアプリケーションは沢山あったものの、SNSやキュレーションアプリの台頭によって廃れていきました。しかし、今でもRSSで配信するサービスは多く残っており、使用する機会も年に数回程度はあるかもしれません。

JSONにする理由

Webでデータを扱う際、複数のデータを保存したり、取得したデータを加工して表示させる必要があります。その主要なデータ形式に、CSV、XML、JSONがあります。
かつてはタグでデータを囲むXMLが主流で、RSSもXML形式で書かれています。しかし、データ以外のテキスト量が多くなり、サイズが肥大化してしまうという難点がありました。一方でJSON形式は、JavaScriptのオブジェクトの記述を基に作られており、{や,でシンプルに記述することが出来ます。React.jsやVue.jsのJavaScriptフレームワークの台頭も合わさり、JSON形式が主流のデータ形式となりました。

前述の通り、未だにRSSで配信されているものも多くあり、これをVue.jsで製作中のWebサイトで扱いたいと考えました。そこで、「RSSを一度JSONに変換し」、その後データを加工することを実現しようと思います。

RSSをJSONにする方法

かつてGoogle Feed APIやYahoo Query Language API(YQL API) などが存在していましたが、軒並みサービス終了してしまったため、他のWebサービスを利用します。

rss2json
https://rss2json.com/

「Enter the URL to your RSS feed」欄に取得したいRSSのURLを入れ、「Convert to JSON」をクリックするだけで、下にJSONファイルが書き出されます。

出力結果のボタンは、左から「ダウンロード」、「コピー用Raw表示」、「フルスクリーン表示」です。

rss2jsonのAPIを利用する

また、rss2jsonの用意しているAPIを使うことで、jsonを直接GETすることができます。

エンドポイント

https://api.rss2json.com/v1/api.json

メソッド

GET

URLパラメータ

Name	必須	型	説明
rss_url	必須	String(Escape URL)	JSONに変換したいRSSのURL。URLはエスケープする必要があります。
api_key	-	String	有料プラン用のAPIキー。アカウントを作成し、マイページからAPIキーを確認することが出来ます。
order_by	-	String	値から並び替えることが出来ます。`pubDate`,`author`,`title`の値を利用することが出来ます。このオプションには`api_key`が必要です。
order_dir	-	String	並び替えの順を選ぶことが出来ます。昇順には`asc`、降順は`desc`を指定します。デフォルトでは降順（`desc`）です。このオプションには`api_key`が必要です。
count	-	Integer	出力されるアイテム数を指定することが出来ます。デフォルトでは`10`です。このオプションには`api_key`が必要です。
callback	-	Alphanumeric	JSONPを使用する場合のコールバック名

例

例えば、自分のブログのRSSのURLは https://920oj.hatenablog.com/rss です。これをrss2jsonのAPIを用いてjsonにする場合、以下のURLになります。

https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2F920oj.hatenablog.com%2Frss

URLはURLエンコードする必要があります。

参考:
URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited https://tech-unlimited.com/urlencode.html

このレスポンスは以下のようになります。

ただしこの場合はユーザー登録をしておらず、最大取得数は10件になってしまうので、それ以上を取得したい場合は無料ユーザー登録をする必要があります。
それぞれFreeプラン、Basicプラン、Proプランの3つがあり、Freeプランでは1時間ごとのデータアップデート、24時間あたり10,000リクエスト、最大25個のRSSを扱うことが出来ます。

詳しくはプラン詳細を確認してください。
https://rss2json.com/plans

これを使ってaxiosで通信してみる

Vue.jsで、axiosを用いてはてなブログの投稿記事を一覧で表示させてみます。

<div id="main">
    <ul>
        <li v-for="items in hatenaArticles" :key="items.id"><a :href="items.link" target="_blank">{{items.title}}</a></li>
    </ul>
</div>

export default {
  data() {
    return {
      hatenaArticles: null,
    }
  },
  mounted() {
    const self = this;
    this.$axios.get('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2F920oj.hatenablog.com%2Frss')
      .then(function(response){
        self.hatenaArticles = response.data.items;
      })
      .catch(function(error){
        console.log(error);
      })
  }
}

実際にリストとして表示することが出来ました。

以上です。