2011.9.1

javascriptだけで簡単にRSSを取ってくる方法

村式ブログ

Google Feed APIを使いましょう。

まずAPI-Keyを取ってきて、以下のサンプルを参考に組み立ててください。
下のサンプルでは、idが”feed”のHTML要素の中にRSS5件のolリストを作ります。

下のコードのループの中の”entry”のプロパティには以下のようなものがあります。
entry.title : 記事のタイトル
entry.link : 記事本体のURL
entry.content : HTMLを含む記事
entry.contentSnippet : 120文字未満の抜粋。HTMLを含まない。
entry.publishedDate : 記事の公開日時。new Date(entry.publishedDate)でパースできる。
その他のプロパティについてはリファレンスをご覧ください。

サンプルコード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=%API-KEY%"></script>
<script type="text/javascript">
var feed_url = 'http://blog.ville.jp/feed';
var feed_num = 5;
var container = $('#feed');

google.load('feeds', '1');
google.setOnLoadCallback(function(){
    var feed = new google.feeds.Feed(feed_url);
    feed.setNumEntries(feed_num);

    feed.load(function(result){
        if(result.error) return;
        var ul = $('<ol></ol>').appendTo(container);
        for(var i=0; i<result.feed.entries.length; i++){
            var entry = result.feed.entries[i];
            var a = $('<a></a>').attr('href', entry.link).text(entry.title);
            ul.append($('<li></li>').append(a));
        }
    });
});
</script>

結果サンプル

<div id="feed">
<ul>
<li><a href="http://blog.ville.jp/2011/08/23/782">groongaをさわってみました</a></li>
<li><a href="http://blog.ville.jp/2011/08/04/753">null判定や空文字判定からPHP関数の動きに気を付けることを学ぶ</a></li>
<li><a href="http://blog.ville.jp/2011/07/19/741">jQueryで任意要素のフォントサイズを取得する方法</a></li>
<li><a href="http://blog.ville.jp/2011/07/08/728">Youtube API を利用して限定公開にする</a></li>
<li><a href="http://blog.ville.jp/2011/07/01/695">symfonyでエラーページをカスタムする際の注意点</a></li>
</ul>
</div>

この記事を書いた人

中川尚(メガネ)