Help us understand the problem. What is going on with this article?

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

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

image.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

ただしこの場合はユーザー登録をしておらず、最大取得数は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);
      })
  }
}

image.png

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

以上です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away