前年比1,382%って尋常じゃない勢いでユーザー人口が増えまくっているtwitterですが、私もやっとfollowが増えてきておもしろくなってきました。せっかくだからこのブログのサイドバーに最近のつぶやきを表示したい！って思っていろいろ探してみましたが、いまいちこれだ！ってツールが見つかりませんでした。

イメージはTwitter badgesのDisplay-only widgetが一番近いんだけど、ベースカラーの選択しかできないのが微妙でした。

次のような機能が理想

• 自分のつぶやきのみを最近の1件のみ表示
• ページ送りで次のつぶやきを順次表示
• アイコンは表示しない

んで、いろいろ探した結果、
Twitterをブログに表示！ページ送り付き★ – Not satisfied!!
を参考にマネすることにしました。簡単2STEPです。

STEP.1 javascript

javascriptは全然わからないのでほぼコピーw
twitter.jsとして外部ファイルにします。

twdata =new Array();
var page = 0;
var fin = 0;
var end = 0;
var kazu = 10;
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);
  var dt = new Date();
  dt.setTime(dt.getTime() - (delta*1000));
  yy = dt.getYear();
  mm = dt.getMonth() + 1;
  dd = dt.getDate();
  dy = dt.getDay();
  hh = dt.getHours();
  mi = dt.getMinutes();
  ss = dt.getSeconds();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  dy = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")[dy];
  if (hh < 10) { hh = "0" + hh; }
  if (mi < 10) { mi = "0" + mi; }
  if (ss < 10) { ss = "0" + ss; }
  return yy+"."+mm+"."+dd+" ( "+hh+":"+mi+" )";
}

function twitterCallback(obj) {

	var i = 0;
	var j = 0;
	while (i < obj.length && j < kazu ){
	if(obj[i].text.substr(0, 1) != '@'){
		twdata[j] = obj[i];
		j++;
	}
	i++;
	}
	fin = j;

	hyouji();
}

function hyouji(){
	var tw = document.getElementById('twitter');
	var dsp = 1; //１ページに表示する数
	var cnt = 0;
	end = 0;

	for ( i= page * dsp ; cnt<dsp ; i++) {
		tw.innerHTML += '<p class="tw_text">'+twdata[i].text+'</p><p class="tw_day"> '+relative_time(twdata[i].created_at)+'</p>';
		cnt++;
		if(fin-1 == i){
		end = 1;
		}

	}

}

function twbtn(flg){
var tw = document.getElementById('twitter');
	if(flg=='next' && end == 0){
	tw.innerHTML ='';
	page++;
	hyouji();
	}
	else if(flg=='back'&& page > 0){
	page--;
	tw.innerHTML ='';
	hyouji();
	}
}

document.write(
'<scr'+'ipt '
+'type="text/javascript" '
+'src="http://www.twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback&count=10">'
+'</scr'+'ipt>'
);

STEP.2 html

つぶやき表示用タグとページ送り用ボタンをhtml側に追記します。

<div id="twitter"></div>
-
-
<a href="javascript:twbtn('next');">next</a>
<a href="javascript:twbtn('back');">back</a>

あとはお好みにcssで微調整してできあがり！特定のつぶやき（＠付）が反映されないけどあとは気に入ってます。（サイドバー右上にいます）

twitter.jsの呼び出しをheader側でやったら1件目のつぶやきがうまく表示されなかったのでfooter側にしたらちゃんと動作しました。他にも未知の不具合があるかもしれません （;´Д｀）