Zenn
Rabee Tech blogPublicationへの投稿
📑

『rss to json』 というサービスを使って RSS フィードを JSON として取得して表示してみよう

phi@rabee
2021/01/07に公開
JavaScript
Rabee
tech

外部サイトの RSS フィードを取得して表示したいってことたまにありませんか？
取得するだけなら簡単ですが, xml を json に変換するのが結構手間だったりしますよね.

今回は, そんなときに便利な『rss to json』というサービスについて紹介したいと思います.
Zenn の RSS フィードを取得して表示するサンプルも作ったので良かったら参考にしてください.

『rss to json』とは

『rss to json』とは, その名の通り rss を json に変換してくれるサービスです.

https://rss2json.com/

rss のフォーマットである xml ってわかりやすいですが, JavaScript で使おうと思うと結構不便だったりしますよね.
それを簡単に変換してくれる便利なサービスです!

基本は Web 上で使うサービスなんですが, なんと API も提供してくれています!
今回はその API ベースでの使い方について紹介していきます.

『rss to json』の使い方

api の endpoint は以下になります.

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

クエリの rss_url に RSS フィード の url を指定することで, xml の内容を json に変換して返してくれます.

https://api.rss2json.com/v1/api.json?rss_url=https://zenn.dev/topics/rabee/feed

実際に JavaScript で取得する方法は以下のようなコードになります.

var endpoint = "https://api.rss2json.com/v1/api.json";
var feed_url = "https://zenn.dev/topics/rabee/feed";

// rss feed を取得
var res = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${feed_url}`);
// text を json 化
var data = await res.json();

// rss feed の内容が json として表示される
console.log(data);

『rss to json』の API で使えるパラメータ

rss_url 以外にも指定できる便利なパラメータがあります.

名前 必須 型 説明
rss_url 必須 String, Escaped URL JSON として返してほしい RSS フィードの URL を指定します. url は escape する必要があります.
例) https%3A%2F%2Fnews.ycombinator.com%2Frss
api_key オプション String api_key を指定します. これを設定しておくと以下のオプションが使えるようになります.
order_by オプション String 指定した値によって並び替えることができます. pubData, author, title が使えます.
※api_key 必須
order_dir オプション String 昇順か降順かを指定できます. asc or desc が使えます.
※api_key 必須
count オプション Integer フィードアイテムの個数を指定できます. デフォルトは 10 個です.
※api_key 必須
callback オプション Alphanumeric メソッド名を指定することで JSONP として取得できるようになります

サンプルプログラム

Zenn の RSS フィードから取得した内容を表示するサンプルプログラムです.

https://runstant.com/phi/projects/952adecf

index.html
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    <title>${title}</title>
    <meta name="description" content="${description}" />
    
    <style>${style}</style>
  </head>
  <body>
    <h1>JavaScript で RSS フィードを JSON として取得して表示してみよう</h1>
    
    <h2 id='$feed_title'></h2>
    <div id='$posts'></div>
    
    <script>${script}</script>
  </body>
</html>
main.js
window.onload = async function() {
  var endpoint = "https://api.rss2json.com/v1/api.json";
  var feed_url = "https://zenn.dev/topics/rabee/feed";
  
  // rss feed を取得
  var res = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${feed_url}`);
  // text を json 化
  var data = await res.json();
  
  // フィードのタイトルをセット
  $feed_title.innerHTML = data.feed.title;
  
  // アイテムを１個ずつ表示
  data.items.forEach(item => {
    var $post = document.createElement('div');
    $post.innerHTML = `
      <h3><a href='${item.title}'>${item.title}</a></h3>
      <p>${item.description}</p>
    `;
    $post.classList.add('post');
    $posts.appendChild($post);
  });
};
main.css
*, *:before, *:after {
  box-sizing: border-box; 
}
html {
  font-size: 13px;
}
body {
  margin: 0;
  font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #444;
  background-color: #ebf5ff;
}
h1 {
  padding: 8px;
  font-size: 16px;
  background-color: white;
}
h2 {
  font-size: 13px;
  padding-left: 12px;
  margin: 0;
}
h3 {
  margin: 0;
}
a {
  color: #0f83fd;
}

.post {
  margin: 12px;
  padding: 12px;
  background-color: white;
  border-radius: 4px;
}

.post:hover {
  box-shadow: 0px 0px 4px #aaa;
}

さいごに

アップデート情報を 『note』 で発信してたりするサービスなども増えてきて, 外部サービスと RSS で連携したりといったニーズも高まっているように感じます.

そういう依頼が来たときに, 自分で xml を json に変換するようなプログラムを書くのではなく,
『rss to json』のように手軽に使えるサービスを活用して手間を省くこともサービス開発においてはひとつの手かなと思います.

Rabee Tech blog
Rabee Tech blogPublication

Discussion