トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

Google AJAX Feed API

JavaScriptRSSを取得して自サイトに組み込む〜 というのをしようとしたら、取得できるのはあくまで自サイトのRSSのみで、別サイト(別ドメイン)のRSSは取得できないのね(汗)。

で、Google AJAX Feed APIを使えばJavaScriptで外部のRSSを取れるということなのです。

Google AJAX Feed API
http://code.google.com/intl/ja/apis/ajaxfeeds/

利用するには

  1. Googleアカウントを取得(既にあればOK)
  2. Google AJAX Feed APIへ使用するサイトを登録

で、使用するサイト専用のAPIキーをもらえる。
そのキーをJavaScriptに組み込んで利用させてもらうような感じ。

キーの取得は

Google AJAX Feed API への登録
http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html

サンプルコード

PicasaRSSを取得して自サイトに組み込むサンプル。

<head>
 :
<script type="text/javascript" src="http://www.google.com/jsapi?key=Google Ajax Feed API Key"></script>
<script type="text/javascript">

google.load("feeds", "1");

function changeDate(strDate) {
    var dd = new Date(strDate);
    var date = dd.getFullYear() + "/" + (dd.getMonth()+1) + "/" + dd.getDate();
    return date;
}

function initialize() {
    var feed = new google.feeds.Feed("ピカサのユーザのホームRSSのURL"
        +"?"+(new Date()).getTime());
    feed.setNumEntries(100);
    feed.setResultFormat(google.feeds.Feed.XML_FORMAT);

    feed.load(function(result) {
        var container = document.getElementById("feed");
        if (!result.error) {
            var items = result.xmlDocument.getElementsByTagName("item");
            for (var i = 0; i < items.length; i++) {
                var eTitle = items[i].getElementsByTagName("title")[0];
                var ePubDate = items[i].getElementsByTagName("pubDate")[0];
                var eLink = items[i].getElementsByTagName("link")[0];
                var eDescription = google.feeds.getElementsByTagNameNS(items[i], "http://search.yahoo.com/mrss/", "description")[0];
                var eThumbnail = google.feeds.getElementsByTagNameNS(items[i], "http://search.yahoo.com/mrss/", "thumbnail")[0];
                
                var title = eTitle.firstChild.nodeValue;
                var pubDate = ePubDate.firstChild.nodeValue;
                var link = eLink.firstChild.nodeValue;
                if (eDescription.firstChild) {
                var description = eDescription.firstChild.nodeValue;
                } else {
                var description = "";
                }
                var thumbnail = eThumbnail.attributes[0].nodeValue; // url
                
                var div = document.createElement("div");
                var h2 = document.createElement("h2");
                var img = document.createElement("img");
                var a = document.createElement("a");
                var p = document.createElement("p");
                var br = document.createElement("br");
                
                h2.appendChild(document.createTextNode(title));
                img.setAttribute("src", thumbnail);
                img.setAttribute("alt", title);
                a.setAttribute("href", link);
                a.setAttribute("title", title);
                a.appendChild(img);
                p.appendChild(document.createTextNode(changeDate(pubDate)));
                p.appendChild(br);
                p.appendChild(document.createTextNode(description));
                
                div.appendChild(a);
                div.appendChild(h2);
                div.appendChild(p);
                
                container.appendChild(div);
            }
        }
    });
}

google.setOnLoadCallback(initialize);

</script>
</head>

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

 要点

キャッシュが効く

RSSを取得する際にGoogle側でキャッシュするみたいで、RSS発信元で情報が更新されても即座に最新情報を取得することができない。

var feed = new google.feeds.Feed("ピカサのユーザのホームRSSのURL"
    +"?"+(new Date()).getTime());

のようにURLに変数をくっつけて、変化があるかのようにみせかければGoogleのキャッシュは更新される模様。

上記のようにアクセス毎に更新するのはGoogleに優しくないので、実際に運用するときは数十分〜数時間単位で変化する変数にすればOK。

フィードの数

最初に試したときに4件しか取得できず「使えねぇ」と思ったら、そういう設定があった。

feed.setNumEntries(100);

みたいな感じ。