Yahoo! Pipes と jQuery で１年前のはてなブックマーク人気エントリを表示するガジェットを作ってみる --- その２
昨日のエントリの続き。
作ったPipeを使って、1年前のはてぶ人気エントリを表示するガジェットの作成に取りかかったのですが、Pipeを作る際に参考にさせてもらったてっく煮のにとよんさんから
「１年前のはてブを表示。１年に限らず、数年まとめて見れたら面白いかもしれん。」
と、はてぶコメントをいただきました。それもそうだなと思い、軌道修正。
N年前の人気エントリをタブで分けて表示するガジェットにしてみました。
↓とりあえず完成系。
表示件数は「設定」から10～50の間で選択可能です。
はてぶが始まったのが、2005年2月10日なので、2月10日を超えると、タブが3つになります。
ガジェットのソースは↓こんな感じ。
xml : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past_hagena.xml
js : http://hatebu-plus.googlecode.com/svn/trunk/gadget/past-hatebu/past-hatena.js
var retryNum = 0;
var retryMaxNum = 10;
function init(){
for(var i =0,len = days.length;i<len;i++){
tabs.addDynamicTab(getDispDate(days[i]), callbackGenerator(days[i]));
}
}
function callbackGenerator(day) {
return function(tabId) {
callbackTab(tabId, day);
}
}
function callbackTab(tabId,day){
retryNum ++;
var feed_url = getURL(day);
_gel(tabId).innerHTML = '<div class="feed">Loading...</div>';
_IG_FetchFeedAsJSON(feed_url,function(feed) {
var html ='';
try{
html = '<div class="feed"><span class="subtitle">'+getDispDate(day)+'の人気エントリ</span><ul>';
for (var i = 0; i < feed.Entry.length; i++) {
html += '<li><a target="_blank" href="'+feed.Entry[i].Link+'">'+feed.Entry[i].Title+'</a>'+createBookmarkNum(feed.Entry[i].Link,feed.Entry[i].Summary)+'</li>';
}
html = html + '</ul></div>';
$(_gel(tabId)).html(html);
_IG_AdjustIFrameHeight();
retryNum = 0;
}catch(e){
if(retryNum <= retryMaxNum){
callbackTab(tabId,day)
}else{
_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
retryNum = 0;
}
}
}, prefs.getInt("num_feed"),true);
_IG_AdjustIFrameHeight();
}
function getURL(d){
var m = d.getMonth() + 1;
((''+m).length == 2)? m = ''+m:m = '0' + m;
var da = d.getDate();
((''+da).length == 2)?da=''+da:da='0'+da;
var ds = (d.getFullYear())+ m + da;
return 'http://pipes.yahoo.com/chrisryu/pasthatebu?date='+ds+'&_render=rss';
}
function getDispDate(d){
return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + '';
}
function createBookmarkNum(link,desc){
var num = parseInt($(desc).text().split('/')[0]) ;
var img = '<img src="http://b.hatena.ne.jp/entry/image/' + link + '" onload="_IG_AdjustIFrameHeight();">';
return ' <a class="bookmarknum" target="_blank" href="http://b.hatena.ne.jp/entry/'+link+'">'+num+' users</a>';
}
_IG_RegisterOnloadHandler(init);特殊なことをしているのは、
}catch(e){
if(retryNum <= retryMaxNum){
callbackTab(tabId,day)
}else{
_gel(tabId).innerHTML = '<div class="feed">情報の取得に失敗しました。</div>';
retryNum = 0;
}
}の部分。
ガジェットからFeedを取得しに行くと、最初の取得でタイムアウトが発生してるっぽいんですね。一度アクセスすると、Google側のキャッシュが効いて大丈夫みたいなんですが。そういうわけで、最大10回までリトライするようにしています。
でもって、タイトルの「jQueryで」ってことだったんですが、ガジェットの関数とか使ってたらjQueryの使いどころがなくなっちゃいました。使っているのは以下の2箇所ですが、どちらも無理から感がありありですね。
$(_gel(tabId)).html(html);
これは、_gel(tabId).innerHTML = html でOKだし。
var num = parseInt($(desc).text().split('/')[0]) ;
この部分は、今回Pipeで取得しているDiscrition 部分が<a><strong> XXX / XXX users</strong></a>という文字列なので、$関数に渡してjQuery オブジェクトにして、text() と split()を使って、登録ユーザ数を取得しています。
なんかjQueryを使っている感がなくなっちゃったので、jQueryをふんだんに使ったガジェットは、また別途作ってみることにします。
できあがったガジェットを観られる、1年、2年前の人気エントリを眺めていると、流行ものあったり、今でもブクマされるような普遍的なものがあったりして楽しいです。是非、iGoogleのお供にどうぞ。
