Google AJAX Feed API を使ってJavaScriptでサイトにRSSフィードを表示する方法

2008/06/17

カテゴリ：: jQuery

タグ：: javascript; RSS; jquery

JavaScriptで別ドメインのRSSを読み込んでくるのは、
セキュリティの関連上できないって聞いていた・・・

あきらめていたのですが、
GoogleのAPIに別ドメインでも読み込めのがあったのですね！

使うのも比較的簡単そうなので、
とりあえず試しに使ってみる事にしました。

Google AJAX Feed API

RSSフィードが読み込めませんでした

↑これは既にこのサイトのRSSをAPIを使って読み込んだ結果です。
Google AJAX Feed APIを使えば比較的簡単に
RSSをサイトに表示することができるようです。

このサービスを利用するときに、APIキーを取得するのですが、
その時に、既にサンプルのソースを表示してくれます

その表示されたサンプルは以下の通りです。

■サンプルソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type"
     content="text/html; charset=utf-8"/>
    <title>Google AJAX Feed API - Simple Example</title>
    <script type="text/javascript" src="■APIキー"></script>
    <script type="text/javascript">
 
    google.load("feeds", "1");
 
    function initialize() {
      var feed = new google.feeds.Feed
        ("http://www.digg.com/rss/index.xml");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

■ HTMLソース

<div id="feed"></div>

上記のままだと、拾ってきたRSSは４つしか表示されなかったり、
単にタイトルとかしか表示されないようになっています。

せめてタイトルにリンクをつけたり、
表示させる数を増やしたいので、少しScript部分を変更してみようと思います。

編集してみる

編集後のソースは以下のようにしてみました。

google.load("feeds", "1");
 
function initialize() {
    //RSSフィードの取得
    var feed = new google.feeds.Feed("Feed URL");
    
    //取得するフィード数
    feed.setNumEntries(10);
    
    //実際に読む込む
    feed.load(function(result) {
    
    //読み込めたか判別
        if (!result.error) {
        
            //表示部分を選択
            var container = document.getElementById("feed");
            
            //変数の初期化
            var useFeed = "";
            
            //Feedの処理
            for (var i = 0; i < result.feed.entries.length; i++) {
                
                //Feedを一つ抽出
                var entry = result.feed.entries[i];
                
                //リストに突っ込む
                useFeed +=
                 '<li><a href="' + entry.link + '">' + entry.title + '</a>';
            }
        
        //リストを表示させる
        container.innerHTML = '<ul>' + useFeed + '</ul>';
    }
    });
}
google.setOnLoadCallback(initialize);

Feed URL部分に表示させたいRSSのURLを記入。

7,8行目に書いてあるようにfeed.setNumEntries(数字);を書き入れることで、
表示させる件数を調節することができます。
上記のサンプルは１０にしてみました。

jQueryを使って簡単にしてみる。

上のようなままよりも、せっかくjQueryを導入しているので、
使える部分はjQueryの形にしてしまおうと思います。

■ 設定ソース

google.load("feeds", "1");
 
$(function() {
    //RSSフィードの取得
    var feed = new google.feeds.Feed("Feed URL");
    
    //取得するフィード数
    feed.setNumEntries(10);
    
    //実際に読む込む
    feed.load(function(result) {
    
    //読み込めたか判別
        if (!result.error) {
            
            //変数の初期化
            var useFeed = "";
            
            //Feedの処理
            for (var i = 0; i < result.feed.entries.length; i++) {
                
                //Feedを一つ抽出
                var entry = result.feed.entries[i];
                
                //リストに突っ込む
                useFeed += 
                '<li><a href="' + entry.link + '">' + entry.title + '</a>';
            }
        
        //リストを表示させる
        $("div#feed").html('<ul>' + useFeed + '</ul>');
    }
    });
});

ちょっとだけソースが簡単になった！

もう少し応用的なのを作ってみた

プレビュー（本文付き）

RSSフィードが読み込めませんでした

一番最初に表示したサンプルはタイトルとリンクのみでしたが、
これで本文が表示されるようになりました。

entry.contentSnippetを加えるだけで表示されます。
ただ、これはHTMLを除いた冒頭の文章のみになっています。
読み込んできたエントリー本文をHTML形式のまま全体を表示させる方法もあって、
entry.contentで全文表示になります。

ただし、著作権の問題などもあるので、この方法はおすすめしません。

いずれにせよ、読み込みたいRSSは許可を得ておくか、
自分のブログにするかにしておいた方が無難だと思います。

ちょっと注意

今回のサンプルはソース部分だけを編集したので他は省略しています。
APIキー部分は読み込み忘れの無いようにしてくださいね。

おまけ

■ コメント部分抜きソース

google.load("feeds", "1");
$(function() {
    var feed = new google.feeds.Feed("Feed URL");
    feed.setNumEntries(10);
    feed.load(function(result) {
        if (!result.error) {
            var useFeed = "";
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                useFeed += 
                '<li><a href="' + entry.link + '">' + entry.title + '</a>';
            }
        $("div#feed").html('' + useFeed + '');
    }
    });
});

参考サイト：