先日、オライリーの 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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 を呼び出しているこの関数はどちらも非同期処理されるため、続けて呼ぶだけでクロスフェードできる。引数にはフェードスピードを指定する。
1
2
3
4
5
6
7
8
9
10
|
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 のソース#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<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>
|