オリジナルの Twitter バッチ（トップページのサイドバーに表示しているやつ）について引き合いがあったので、ここで紹介します。

基本的には公式で生成できる JavaScript バッチを元にしているんだけど、ちょっとだけ改造しています。まずは、以下のコードを貼り付けます。

function relative_time(time_value) { if(time_value.indexOf("UTC") < 0) time_value = time_value.replace("+","UTC+"); 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 '1分以内'; } else if(delta < 120) { return '2分以内'; } else if(delta < (45*60)) { return (parseInt(delta / 60)).toString() + '分前'; } else if(delta < (90*60)) { return '1時間以内'; } else if(delta < (24*60*60)) { return (parseInt(delta / 3600)).toString() + '時間前'; } else if(delta < (48*60*60)) { return '1日前'; } else { return (parseInt(delta / 86400)).toString() + '日前'; } } function twitterCallback(obj) { var screen_name = obj[0].user.screen_name; var twit_status = obj[0].text.replace(/(https?:¥/¥/[^¥s+¥"¥<¥>]+)/ig, function($0,$1){ return '<a href="'+$0+'">'+$0+'</a>'; } ); document.getElementById('my_twitter_image').innerHTML = ('<a href="http://twitter.com/'+screen_name+'" rel="contact" title="'+screen_name+'"><img style="margin:0px;" src="'+obj[0].user.profile_image_url+'" border="0" width="48" height="48" style="padding: 1px;" /></a>'); document.getElementById('my_twitter_name').innerHTML = ('<a href="http://twitter.com/'+screen_name+'" rel="contact" title="'+screen_name+'">'+screen_name+'</a>'); document.getElementById('my_twitter_status').innerHTML = twit_status; document.getElementById('my_twitter_status_time').innerHTML = ('<a href="http://twitter.com/'+screen_name+'/statuses/'+obj[0].id+'">'+relative_time(obj[0].created_at)+'</a>'); }

次に、上のスクリプトを貼り付けたページの一番最後あたりに、以下のコードを貼り付けます。以下のコードが実行されるタイミングで Twitter との通信が発生するので、ページを表示し終わる直前になるようにするわけ。

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/3712131.json?callback=twitterCallback&count=1"> </script>

3712131 の部分は、自分の ID に変えてください。ID は公式のバッチ作成画面などで確認できますね。

最後に、ステータスを表示したいあたりに、以下の html を貼り付けます。それぞれ div 要素で囲んだところに、ステータスが挿入されて表示されます（別に span とかでもいいです）。

<div id="my_twitter_image"></div> <div id="my_twitter_name"></div> <div id="my_twitter_status">ステータス取得中...</div> <div id="my_twitter_status_time"></div>

こんな感じで、表示される結果をお好みで装飾してください。うちはテーブルで整形して、ロゴをいれたりしてアレンジしています。