Google AJAX Feed API と jQuery でフィードをスライドショー表示するガジェットを作る

先日、オライリーの Amazon ベストセラートップ 10 のフィードを生成をした。それを今度はスライドショーっぽく表示するガジェットを作ってみる。

フィードの取得には、Google Feed API — Google Developers を使う。これで RSS/ATOM の規格に左右されないし、サーバーサイドの中継 CGI を作る必要もなくなる。
スライドショー表示はクロスフェードさせたい。Prototype + Rico より jQuery (http://jquery.com/) の方が簡単だと思うのでこちらを選択した。

Google AJAX Feed API

まずは Sign-up for an API Key - Google Loader — Google Developers でアクセスキーを取得する。
google.load はおまじない。1 はバージョンらしい。

<script type="text/javascript" src="http://www.google.com/jsapi?key=キー"></script>
<script type="text/javascript">
  google.load("feeds", "1");

google.feeds.Feed(フィードのURL) で取得の準備。
setNumEntries はエントリをいくつ取るかを設定する（デフォルトは 4）。
load でコールバック関数を指定する。
google.setOnLoadCallback(initialize); で初期化関数をロード時に実行するようにする。
取得したフィード情報は、result.feed で取れる。通常だと JSON で返る。
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html#JSON

  function initialize() {
    var feed = new google.feeds.Feed("http://feed.tilfin.net/amazon/oreilly-bestseller.xml");
    feed.setNumEntries(10);
    feed.load(function(result) {
      if (!result.error) {
        var container = document.getElementById("container");
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var div = document.createElement("div");
          div.innerHTML = '<a target="_blank" href="' + entry.link + '"><p>' + entry.title + '</p><div class="ctn">'
             + entry.content + '</div></a>';
          div.className = 'page';
          div.id = "page" + i;
          container.appendChild(div);
          if (i > 0) $("#page" + i).hide();
        }
        pages = result.feed.entries.length;
      }
    });
  }
  google.setOnLoadCallback(initialize);
</script>

まあ、サンプル見てわかるとおり、とても簡単。

jQuery.js でクロスフェード

これも簡単だ。上記のとおり各エントリ毎に div を生成している。これをパラパラ漫画のようにループして表示を切り替えていくだけだ。
上記の $("#page" + i).hide(); で一枚目以降の初期状態を非表示にしている。
あとは下記のように fadeOut と fadeIn を呼び出しているこの関数はどちらも非同期処理されるため、続けて呼ぶだけでクロスフェードできる。引数にはフェードスピードを指定する。

function timer_event() {
  var nextPage = currentPage + 1;
  if (nextPage == pages) {
    nextPage = 0;
  }
  $("#page" + currentPage).fadeOut('slow');
  $("#page" + nextPage).fadeIn('slow');
  currentPage = nextPage;
}
timer = setInterval("timer_event()", 5000);

Content のソース

<style type="text/css">
.page {
  position:absolute;
  padding:2px;
  font-size:12px;
  background-color:#fff;
}
.page p { margin:0; padding-bottom:4px; }
a { text-decoration:none; }
a p { text-decoration:underline; }
a .ctn { color:#333; }
.page img { border:none; float:left; margin:4px 12px 0 0; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAbAZwUhVvyMhUwzF6dH0gkRRgstZcZagmUx46ZdUHF7xoJsRD0RQ-lmm6kFLJtCODpO4fDKtYIRleZw"></script>
<script type="text/javascript" src="http://gadget.tilfin.net/jquery.js"></script>
<script type="text/javascript">
  var currentPage = 0;
  var pages = 10;
 
　　google.load("feeds", "1");
　　function initialize() {
    var feed = new google.feeds.Feed("http://feed.tilfin.net/amazon/oreilly-bestseller.xml");
    feed.setNumEntries(10);
    feed.load(function(result) {
      if (!result.error) {
        var container = document.getElementById("container");
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var div = document.createElement("div");
          div.innerHTML = '<a target="_blank" href="' + entry.link + '"><p>' + entry.title + '</p><div class="ctn">'
             + entry.content + '</div></a>';
          div.className = 'page';
          div.id = "page" + i;
          container.appendChild(div);
          if (i > 0) $("#page" + i).hide();
        }
        pages = result.feed.entries.length;
      }
    });
  }
  google.setOnLoadCallback(initialize);
</script>
<div id="container" style="height:185px;position:relative"></div>
<script type="text/javascript">
function timer_event() {
  var nextPage = currentPage + 1;
  if (nextPage == pages) {
    nextPage = 0;
  }
  $("#page" + currentPage).fadeOut('slow');
  $("#page" + nextPage).fadeIn('slow');
  currentPage = nextPage;
}
timer = setInterval("timer_event()", 5000);
</script>