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箇所ですが、どちらも無理から感がありありですね。