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 はバージョンらしい。

1
2
3

<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>