最終更新日： 2009年2月7日 23:53
※API key生成時に、最も基本的な機能を備えたHTMLも一緒に生成してくれますので、そちらをカスタマイズするのもいいかと思います。
<script type="text/javascript" src="http://www.google.com/jsapi?key=自分のAPIキー"></script>
このスクリプト内で、「読み込むRSSフィードのURL（下記の黄色い部分）」や「フィードの内容をどのように表示させるか」を定義します。詳しい解説は、マイコミジャーナルの【ハウツー】Googleからの新たな贈り物、「Google AJAX Feed API」を試そう がなかなか参考になります。
<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>
<div id="feed"></div>
上記の設定で、Web技術Input&Outputのフィード情報（http://herrkf.com/webtech/feed）を読み込むと以下のようになります。
デフォルト設定では、フィードを読み込む数は４になっていますが、この数を増やす為には、フィード読み込みURLの行の下に、feed.setNumEntries(読み込みたい数);と記入すればいいようです。下記例では最新の７件を読み込んでいます。
var feed = new google.feeds.Feed("http://herrkf.com/webtech/feed");
feed.setNumEntries(7);
Feed API内の
div.appendChild(document.createTextNode(entry.title));
を
div.innerHTML = '■ <a href="' + entry.link + '">' + entry.title + '</a>';
と書き換える事で、フィード内にもハイパーリンクが貼られるようになりました。
（読みやすくするために、アタマに■を追加しています）
２のソースコードを、以下のようにすることで、リンク先が別ウインドウで開きます（黄色部分を追加）。
div.innerHTML = '■ <a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
こんな具合にフィードが読み込まれました。おそらく最も基本的な使い方でしょうが、静的なHTMLでもRSSフィードがこんな簡単に読み込めるのはウレシイですね。