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

## 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/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462753/15583690-44ce-d865-0283-0b28c787741f.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462753/88438afe-038c-cc65-2666-444dec7f199c.png)

出力結果のボタンは、左から「ダウンロード」、「コピー用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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462753/830114b6-1666-2249-ecb9-07412a2241f5.png)

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

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

## これを使ってaxiosで通信してみる
Vue.jsで、axiosを用いてはてなブログの投稿記事を一覧で表示させてみます。

```html
<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>
```

```js
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);
      })
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462753/b4c1a5b0-d422-752e-ad91-63abc436b7f0.png)

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

以上です。