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>