Yahoo PipesのAPIを使って、RSSをJSONP変換する

PHPなどサーバーサイドのプログラムを使わず、JavaScriptだけでRSSの内容を表示したいときって結構あるんですよね。そこで、今回はYahoo PipsのRSSをJSONPに変換するAPIを使ってJavaScriptだけでRSSを加工・表示してみます。

API仕様

いたってシンプルなAPIです。最大件数は適当に指定しておかないとフィードによっては表示が重くなるので注意してください。

http://pipes.yahoo.com/cskai4g/getfeedbyurl?_render=json&_callback=コールバック名&max=最大件数&feedUrl=RSSのURL　　(GET)

レスポンス例

まさかの\uエンコード...。まぁ表示したらちゃんと出るので気にしなければOKです。

callback({
    "count":5,
    "value":{
        "title":"GetFeedByURL",
        "description":"Pipes Output",
        "link":"http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=_EeuIYSW3RGHZOIv1b3fcQ",
        "pubDate":"Fri, 01 Mar 2013 05:11:46 +0000",
        "generator":"http:\/\/pipes.yahoo.com\/pipes\/",
        "callback":"callback",
        "items":[{
                "title":"\u6c17\u7403 \u5730\u4e0a\u8981\u54e1\u30ed\u30fc\u30d7\u624b\u653e\u3057\u305f",
                "link":"http:\/\/rd.yahoo.co.jp\/rss\/l\/topics\/topics\/*http:\/\/dailynews.yahoo.co.jp\/fc\/world\/egypt\/",
                "pubDate":"Fri, 01 Mar 2013 11:19:36 +0900",
                "enclosure":{
                    "length":"133",
                    "type":"image\/gif",
                    "url":"http:\/\/i.yimg.jp\/images\/icon\/photo.gif"
                },
                "guid":{
                    "isPermaLink":"false",
                    "content":"yahoo\/news\/topics\/6083559"
                }
            },
            ...
        ]
    }
});

実際の例を見る

サンプル

JavaScriptだけでどこぞのRSSをとってきて表示するサンプルです。JSONPなので、デスクトップ上のhtmlファイルでも動かせます。自分だけのスタートアップページをHTMLファイルで作ってみると面白いかもしれません。

<html>
<head>
</head>
<body>
<ul id="feed-container">
ここにRSSが表示されます
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 var feedURI = 'http://rss.dailynews.yahoo.co.jp/fc/world/rss.xml';
 var maxItems = 5;
 $.getJSON('http://pipes.yahoo.com/cskai4g/getfeedbyurl?_render=json&_callback=?&max='+maxItems+'&feedUrl='+encodeURI(feedURI), {}, function(json) {
  for (var i = 0; i < json.value.items.length && i < 10; i++) {
  var html = '<li><span class="date">'
   +item['y:published']['month'] + '/' + item['y:published']['day'] 
   + '&nbsp;'
   +'</span><a href="'+item['link']+'" target="_new">'+item['title']
   +'</a></li>';
  $(html).appendTo('#feed-container');
 });
});
</script>
</body>
</html>

まとめ

Yahoo Pipesには、他にもいろいろなマッシュアップAPIが登録されています。時間があったら他にどんなAPIがあるか探検してみてもおもしろいですね。

2013/03/01