Twitterの開始と、Badgesのカスタマイズ

遅ればせながら、Twitterを始めました。
流行し始めたときは、ちょっと余裕がなくて、今やっと手をつけました。

「Twitter / KOROPPY」

JavaScript Badgesは、「KOROPPYのぶつ森日記」のサイドバーにあります。
呟きだけでなく、ちょっとした開門情報を載せようかなと思って。

最下部でRSS Feedの配信も行われているので、Twitterのアカウントがなくても、他のRSSリーダーでチェックできるのがいいですね。

既に始められている方がいらっしゃいましたら、ぜひ遊んでください。

---

最初はFlash　Badgesを貼り付けてみたのですが、最新の投稿が反映されず、少し前のものが表示されました。
もしかして即時更新されないのかなと思い、Javascript Badgesに切り替えました。

更に1件ではなく、複数件表示したかったので、先達のカスタマイズを検索。
以下の2サイト様を、参考にさせていただきました。

【カスタマイズソース】
「Twitter BadgeのカスタマイズURLまとめ ([bizmemo])」。
【日付の日本語化】
「E | Twitterブログパーツを改造 | ENSIS Note3.5」。

時間部分に色をつけたかったので、spanを入れて、CSSで色を変えてみました。
liのなかにspanを入れるのが、記法的に正しいのか、心配なところではありますが(^^;

完成したソースは、こちら。

<script type="text/javascript">
function relative_time(time_value) {
time_values = time_value.split(" ");
time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset()*60);
if(delta < 60) {
return '<span id="twittertime">1分以内</span>';
} else if(delta < 120) {
return '<span id="twittertime">約1分前</span>';
} else if(delta < (45*60)) {
return '<span id="twittertime">' + (parseInt(delta / 60)).toString() + '分前</span>';
} else if(delta < (90*60)) {
return '<span id="twittertime">約1時間前</span>';
} else if(delta < (24*60*60)) {
return '<span id="twittertime">約' + (parseInt(delta / 3600)).toString() + '時間前</span>';
} else if(delta < (48*60*60)) {
return '<span id="twittertime">昨日</span>';
} else {
return '<span id="twittertime">' + (parseInt(delta / 86400)).toString() + '日前</span>';
}
}

function twitterCallback(obj) {
var t = document.getElementById('twitter');
t.innerHTML += '<ul>';
for ( i=0; i<obj.length; i++) {
t.innerHTML += '<li>'+obj[i].text+' : '+relative_time(obj[i].created_at)+'</li>';
}
t.innerHTML += '</ul>';
}
</script>
<div style="margin: 2px; padding:2px;border:none 1px #999;font-size: 12px;">

<b>【<a href="http://twitter.com/KOROPPY/">KOROPPYのTwitter</a>】</b><BR>
<div id="twitter" style="font-size: 10px; margin: 0px 10px;"></div>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/5927862.json?callback=twitterCallback＆count=5"></script>
</div>
<span id="my_twitter_status"></span> <span id="my_twitter_status_time"></span>

CSSは、こちら。

/* twittertime */
#twittertime {
color:#12317A;
}

【2007.5.22　追記】
日付変換部分がうまく動かなくなったので、function relative_timeを書き換えました。
「E | Twitterブログパーツを改造 | ENSIS Note3.5」さまを参考にさせていただきました。

function relative_time(time_value) {
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
if(delta < 60) {
return '<span id="twittertime">(1分以内)</span>';
} else if(delta < 120) {
return '<span id="twittertime">(1分前)</span>';
} else if(delta < (45*60)) {
return '<span id="twittertime">(' + (parseInt(delta / 60)).toString() + '分前)</span>';
} else if(delta < (90*60)) {
return '<span id="twittertime">(約1時間前)</span>';
} else if(delta < (24*60*60)) {
return '<span id="twittertime">(約' + (parseInt(delta / 3600)).toString() + '時間前)</span>';
} else if(delta < (48*60*60)) {
return '<span id="twittertime">(昨日)</span>';
} else {
return '<span id="twittertime">(' + (parseInt(delta / 86400)).toString() + '日前)</span>';
}
}