Google AJAX Feed API でほってんとりーだ作ってみたよ (でぃべろっぱーず・さいど)

Google AJAX Feed API を利用してはてなブックマークと livedoor clip のほってんとりを表示する超簡易ほってんとりーだを作ってみました。

超簡易ほってんとりーだ（はてなブックマーク + livedoor clip）

↓ソースはこんな感じ。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAat9qFQZa7HeqZ7vfzuZ_lRS_JephM1q8o_Xk0mMCpFGq9IoW5xTEBj6jwM9jRmq16iASlY6jsLhajA"></script>
<script language="javascript">
google.load("feeds", "1");
function initialize() {
  makearea('http://b.hatena.ne.jp/hotentry?mode=rss','news');
  makearea('http://clip.livedoor.com/rss/hot','news2');
}
function makearea(feed,idn){
  var feed = new google.feeds.Feed(feed);
  feed.setNumEntries(30);
  feed.load(function(result) {
    if (result.error) {
      return;
    }
    var container = document.getElementById(idn);
    var ul = document.createElement("ul");
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      var div = document.createElement("div");
      var a = document.createElement("a");
      a.setAttribute('href', entry.link);
      a.setAttribute('target', '_blank');
      a.setAttribute('title',entry.content);
      div.appendChild(document.createTextNode(entry.title));
      a.appendChild(div);
      container.appendChild(a);
    }
  });
}
google.setOnLoadCallback(initialize);
</script>
</HEAD>
<BODY style="font-size:14px;line-height:200%">
<div style="width:100%;font-size:18px;font-weight:bold;border-bottom:1px solid #999999;">超簡易ほってんとりーだ<span style="padding-left:10px;font-size:14px;">（はてなブックマーク + livedoor clip）</span></div>
<div id="news"  class="entrya"></div>
<div id="news2" class="entrya"></div>
<div style="font-size:12px;border-top:1px solid #999999;width:100%;text-align:center;">powered by はてなブックマーク,livedoor Clip,Google Ajax Feeds.</div>

RSSをだらだらと出しているだけなんで、あんまりおもしろみはないです。

ちょっとだけ工夫したところは、既読／未読管理。

aタグのvisitedを利用して、すでに閲覧したページは表示しないようにするという手抜き。

RSSをAjaxで利用するとき、クロスドメインの制約でわざわざサーバを経由したりするのが面倒だったので、このGoogle AJAX Feed API はかなり楽チンです。

他にも色々とちょっとしたアプリが作れそうなので、週末にチャレンジしてみようかな。