Born Neet

っというわけで、TwitterからWassrに乗り換えてみました。

まぁTwitter自体全然使ってないですけどねー。
（そもそもSNSっていうかコミュニケーションが苦手っていう…）

で、せっかくAPIも公開されてることなので、今までTwitterの発言を表示してた部分にWassrの発言を表示するようにしました。

興味のある人はどうぞー。

[html, css]

今回は（面倒なので）html、cssに変更を加えないのがテーマ（？）だったため、

<div id="twitter_div"><dl><dt><a href="http://wassr.jp/user/tnantoka/" id="twitter-link"><img src="http://file.blog.bornneet.com/wassr_bubble_logo.png" alt="Wassr: Do you follow me?" /></a></dt><dd><ul id="twitter_update_list"></ul></dd></dl></div>

と、ほぼ前のままでOKです。
（画像とリンクをWassrにしただけ。cssは変更なし）

[js]

WassrはJSONPに対応してるので、

<script type="text/javascript" stc="http://api.wassr.jp/statuses/show.json?id=tnantoka&amp;callback=wassrCallback"></script>

とかやれば、

wassrCallback([{
	"link":"http://wassr.jp/user/tnantoka/statuses/e6wr6C1Ebz",
	"epoch":1215324666,
	"user_login_id":"tnantoka",
	"areacode":null,
	"rid":"e6wr6C1Ebz",
	"photo_url":null,
	"reply_message":null,
	"photo_thumbnail_url":null,
	"reply_user_nick":null,
	"html":"テスト",
	"reply_status_url":null,
	"text":"テスト",
	"user":{"screen_name":"t*"},
	"slurl":null,
	"areaname":null
}]);

ってな感じに、発言のオブジェクトをコールバック関数に渡して呼び出してくれます。

あとはTwitterのjs等を参考に、

function wassrCallback(wassrs) {
	document.getElementById('twitter_update_list').innerHTML = '<li><span>'+wassrs[0].text+'</span> <a style="font-size:85%" href="'+wassrs[0].link+'">'+parseEpoch(wassrs[0].epoch)+'</a></li>' + '<li style="text-align: right; margin-top: 5px; font-size: 85%;"><a href="http://twitter.com/tnantoka">Twitter\u306F\u3053\u3061\u3089</a></li>';
}

function parseEpoch(epoch) {
	var pass = new Date / 1000 - epoch;
	var s;
	if (pass < 60) {
		s = 'less than a minute ago';
	} else if (pass < (60 * 2)) {
		s = 'about a minute ago';
	} else if (pass < (60 * 60)) {
		s = 'about ' + parseInt(pass / 60) + ' minutes ago';
	} else if (pass < (120 * 60)) {
		s = 'about an hour ago';
	} else if (pass < (24 * 60 * 60)) {
		s = 'about ' + parseInt(pass / (60 * 60)) + ' hours ago';
	} else if (pass < (48 * 60 * 60)) {
		s = '1 day ago';
	} else {
		s = parseInt(pass / (24 * 60 * 60)) + ' days ago';
	}
	return s;
}

みたいな関数を用意しておけばいいだけです。
（画像、js、htmlをTwitterのバッジからそのまま流用しちゃってるので、一応Twitterへのリンクを入れておきました^^）

[まとめ]

以上でーす。
テストとか全然してないので不具合とかあったらごめんなさい(>_<)