Google AJAX Feed API は Atom や RSS を取得して表示するためのWeb API。
「あるブログのサイドバーに別のブログの最新エントリーを表示したい」なんていう希望を簡単にかなえてくれる。
手順は猿でもできる以下の3ステップ。
（１）
Sign up for the Google AJAX Feed APIページでAPI keyを取得する。
(チェックボックスにチェックを入れて、利用するページのドメイン(ディレクトリ)を入力する)
（２）
<head>〜</head>に以下のコードを追加する(グレー文字の解説コメントは消してもOK)。
<!-- おまじない -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA5aLgfLdIA2eVr0PCOosAZhS4mqpkf2QLzpvkTNrQCHzzW7z_MxQSu83eptCaGm1hNNRPGdgnUwRUGA"></script>
<script type="text/javascript">
<!--
// API本体の読み込み
google.load('feeds', '1');
// 初期化関数を定義
function feeds_init() {
// 読み込むfeed
var feed = new google.feeds.Feed('http://tech.bayashi.jp/index.xml');
// 読み込み件数
feed.setNumEntries(5);
// 読み込んだfeedを加工する処理
feed.load(function(result) {
// エラーじゃないよね？
if (!result.error) {
// 結果を表示するエレメント
var container = document.getElementById('put_feed');
// 汎用変数textを初期化
var text = '';
// feedを処理するループ
for (var i = 0; i < result.feed.entries.length; i++) {
// entryに１件取り出す
var entry = result.feed.entries[i];
// feedのlink及びtitle属性のデータをHTMLに整形しつつtext変数に加える
text += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';
}
// ULタグで囲んでエレメントに出力
container.innerHTML = '<ul>' + text + '</ul>';
}
});
}
// 関数をイベントハンドラとして登録
google.setOnLoadCallback(feeds_init);
//-->
</script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA5aLgfLdIA2eVr0PCOosAZhS4mqpkf2QLzpvkTNrQCHzzW7z_MxQSu83eptCaGm1hNNRPGdgnUwRUGA"></script>
<script type="text/javascript">
<!--
// API本体の読み込み
google.load('feeds', '1');
// 初期化関数を定義
function feeds_init() {
// 読み込むfeed
var feed = new google.feeds.Feed('http://tech.bayashi.jp/index.xml');
// 読み込み件数
feed.setNumEntries(5);
// 読み込んだfeedを加工する処理
feed.load(function(result) {
// エラーじゃないよね？
if (!result.error) {
// 結果を表示するエレメント
var container = document.getElementById('put_feed');
// 汎用変数textを初期化
var text = '';
// feedを処理するループ
for (var i = 0; i < result.feed.entries.length; i++) {
// entryに１件取り出す
var entry = result.feed.entries[i];
// feedのlink及びtitle属性のデータをHTMLに整形しつつtext変数に加える
text += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';
}
// ULタグで囲んでエレメントに出力
container.innerHTML = '<ul>' + text + '</ul>';
}
});
}
// 関数をイベントハンドラとして登録
google.setOnLoadCallback(feeds_init);
//-->
</script>
赤字のテキストは(１)で取得した、自分のAPI keyに置き換える。
青字のURLに取得したいブログのRSS(Atom)を指定する。
緑字の数字は表示したい件数。
斜体の put_feed は結果を表示するエレメントのid。
（３）
表示したい位置に以下のように箱を用意すれば希望が叶う。
<div id="put_feed" class="example"></div>
以下のFEEDに対応しているそうで、つまり世の中のほとんど全てのフィードで遊べます。
・Atom 1.0
・Atom 0.3
・RSS 2.0
・RSS 1.0
・RSS 0.94
・RSS 0.93
・RSS 0.92
・RSS 0.91
・RSS 0.9
「あるブログのサイドバーに別のブログの最新エントリーを表示する」以外にもいろいろ面白い使い方が出来そうな気がする。
マッシュアップで自分専用RSSリーダーとか出来ちゃいそうですね。
公式ドキュメントは以下を参照。
・Google AJAX Feed API Developer Guide
・Google AJAX Feed API Class Reference
