テクノロ散策: 初心者がGoogle AJAX Feed APIを使ってAjaxアプリを書いてみた

2007/04/29

初心者がGoogle AJAX Feed APIを使ってAjaxアプリを書いてみた

Google Ajax Feed APIを使って、Ajaxアプリケーションを作ってみました。

アプリケーションと呼べる代物ではないですが、右のサイドバーの「外部サイトの人気エントリー」で、はてなブックマークとdel.icio.usとDiggの人気エントリーを３つ表示してます。何のクエリーも操作もしていないので、純粋にPopular Feedを拾って来て３つのエントリーを表示させているだけです（まあ、基本はここからでしょうね）。今後はこれにインターフェイスなり付けて、徐々に肉付けしていく予定です。

Blogger Blogでテンプレートを使用している場合に限ると思いますが、「ページ要素を追加」→「HTML/Javascript」で要素を追加して以下のコード（未熟で恥ずかしいですが）を貼付けると、簡単にアプリケーションをサイドバーに追加できました。Javascript部分をheadタグ内に挿入しなくて動くみたいです。表示の為のdivタグも一緒で問題なしでした。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ucD_JupIz5wDxPqViYuaBS_2XhBWm8mhKXabeo9k1ZN2YX1vRRVzt5z46cHumPHbn-GMG1BNFyarQ">
</script>

<script type="text/javascript">

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

function initialize()
{
var feedurl = new Array(3) ;
feedurl[0] = "http://b.hatena.ne.jp/hotentry?mode=rss" ;
feedurl[1] = "http://del.icio.us/rss/popular" ;
feedurl[2] = "http://digg.com/rss/containertechnology.xml" ;

var feedout = new Array(3) ;
feedout[0] = "hatena" ;
feedout[1] = "del" ;
feedout[2] = "digg" ;

for (var index = 0; index < feedout.length; index++)
{

var feed = new google.feeds.Feed(feedurl[index]);

feed.setNumEntries(3);

feed.load(function(result)
{
if (result.error) { return; }

var container = document.getElementById(feedout[index]);

for (var i = 0; i < result.feed.entries.length; i++)
{
var entry = result.feed.entries[i];
var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href", entry.link);
var font = document.createElement("font");
font.setAttribute("Size", "1");

font.appendChild(document.createTextNode(entry.title));
a.appendChild(font);
li.appendChild(a);

container.appendChild(li);
}
});
}
}

google.setOnLoadCallback(initialize);

</script>

<b>はてなブックマーク人気エントリー</b><br>
<div id="hatena"></div>
<br><b>del.icio.us 人気エントリー</b><br>
<div id="del"></div>
<br><b>Digg 人気エントリー</b><br>
<div id="digg"></div>

＜関連記事＞
Ajax開発初心者が悩んでいること
Ajaxを使ったWEBアプリケーション開発に向けての５つの準備

＜参照＞
Google AJAX Feed API Developer Guide
Ajaxを勉強しよう

＜追伸＞
古賀志山を制覇してきた。標高は583mだけど、景色がよくて気持ちよかった。山登りにハマりそう。