Google AJAX Feed APIを利用して、自分のページ内に他のサイトのRSSを表示させてみましょう。ここでは高橋登史朗さんのページ「JavaScript++かも日記」のRSSを読み込ませ表示させてみます。
まず最初にGoogle AJAX Feed APIを利用するためのライブラリを読み込ませます。これが最初のscriptタグ（<script type="text/javascript" src="http://www.google.com/jsapi?key=●●●"></script>）になります。これでGoogle AJAX Feed APIが利用できるようになったので、google.load()を使ってfeed処理を行うプログラムを読み込ませます。
次にgoogle.setOnLoadCallback()で実際に読み込みと表示処理を行うJavaScriptの関数を呼び出します。任意のURLにあるRSSデータの取得はnew google.feeds.Feed(取得したいURL)のようにします。これで読み込みが完了した場合にfeed.load()が呼び出されます。実際の処理は、ここから指定していきます。
RSSデータが正しく読み込めた場合にはfeedタグ内にあるデータを読み込ませます。RSSのエントリー数は●●●.feed.entries.lengthとして取得することができます（●●●はRSSデータが格納されているオブジェクト）。必要なエントリーを表示するには、この数だけ繰り返します。エントリーのタイトルは●●●.feed.entries[参照番号].titleに格納されています。これを読み出してページ上に表示していきます。（サンプルを
実行する）
<html>
<head>
<title>Google Feed API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA"></script>
<script type="text/javascript"><!--
function initialize() {
var feed = new google.feeds.Feed("http://jsgt.org/mt/01/atom.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.load("feeds", "1");
google.setOnLoadCallback(initialize);
// --></script>
</head>
<body>
<h1>Google Feed API Sample</h1>
<h2>JavaScript++かも日記</h2>
<div id="feed"></div>
</body>
</html>
標準の状態では取得できるエントリーの数は4つになっています。さすがに、これでは少ないという場合にはfeed.setNumEntries()を使って取得するエントリーの数を設定します。feed.setNumEntries(10);とすると10個のエントリーが読み込まれます。以下のサンプルでは最大10エントリーまで読み込ませ表示させるものです。（サンプルを
実行する）
<html>
<head>
<title>Google Feed API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA"></script>
<script type="text/javascript"><!--
function initialize() {
var feed = new google.feeds.Feed("http://jsgt.org/mt/01/atom.xml");
feed.setNumEntries(10);
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.load("feeds", "1");
google.setOnLoadCallback(initialize);
// --></script>
</head>
<body>
<h1>Google Feed API Sample (2)</h1>
<h2>JavaScript++かも日記</h2>
<div id="feed"></div>
</body>
</html>
[
目次へ]
(2007.4.21)