2009-04-15

昨日Google AJAX Feed APIに登録したので、早速使ってみました。
サンプルはこちら

APIドキュメントのサンプルを少し変更しただけで、javascriptだけでデータを取得し表示することができました。

ただ、上のサンプルだけでは味気ないのでTween.jsを利用したサンプルも作ってみました。

Tween.jsとはactionscriptのTweenクラスに似せた、インターフェースでDOM操作にアニメーションを着けられるjavascriptライブラリーです。Tweenの動作サンプル

　

はてなホットエントリーをTweenで表示
ソースはこちら

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

function initialize() {
   var feed = new google.feeds.Feed("http://b.hatena.ne.jp/hotentry.rss");
   feed.setNumEntries(30);

   function addhatenaEntry(ddiv, url) {
      return function(){
         ddiv.innerHTML += '&amp;amp;amp;amp;nbsp;<a href=http://b.hatena.ne.jp/entry/'+ url + ' target="_blank"><img src=http
://b.hatena.ne.jp/entry/image/small/' + url +' border="0"></a>';
      };
   }

   feed.load(function(result) {
      if (!result.error) {
         var objBody = document.getElementsByTagName("body").item(0);
         var yseq1 =  new Sequence();

         for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var ele = document.createElement('div');
            ele.id = 'h'+(i+1);
            ele.style.backgroundColor = (i+1)%2 ? "d8bfd8" : "ffffff";
            objBody.appendChild(ele);
            var t = new TextTween(ele,
                           'innerHTML',
                           '<a href='+ entry.link +'>'+ entry.title +'</a>&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;<font color="#353535"><small>' + entry.publishedDate +'</small></font>',
                           Tween.strongEaseOut,
                           2
                           );
            t.onMotionFinished = addhatenaEntry(ele, entry.link);
            yseq1.addChild(t);
         }
      }

      yseq1.start();

   });
}

google.setOnLoadCallback(initialize);

Tween.jsはSequence.jsが提供している、Sequence()を利用することによってアニメーションをキューに追加して実行することができます。
このソースでは、for文のエントリ毎にtextのtweenを設定していき、全要素をキューにため操作が終わった後に実行しています。

エントリ数を表示する部分はonMotionFinished(アニメーション終了後に実行される)
として関数をセットしました。(TextTweenにimgタグも書き出そうとすると、サイズの関係かアニメーションがちらつくためNGにした)

次回は別のAPIで何か作ろうと思います。