jQueryでTwitterの自分のつぶやきを表示する

※2012.10.11現在Twitter API変更によりこの方法は使用できなくなりました。
新API（var1）に対応した方法は下記をご覧ください。

2012年10月 Twitter APIの変更によりjQueryでつぶやきが表示できなくなったので解決策

まずは読み込むべきデータの確認をしてみましょう。
下記のURIで自分のタイムラインの情報を見ることができます。[USERNAME]には自分のアカウント名に置き換えてください。

http://twitter.com/statuses/user_timeline/[USERNAME].json

データはjsonの他にもxml、rssなど取得できます、最後のjsonの拡張子を変えるだけでそれぞれのフォーマットで取得できます。
今回は処理が速いといわれるjson形式で取得してみます。
他にもフォロアーのタイムラインやリストなども取得できますが、ログインしなくては見られない情報はOAuth認証などの処理が必要になります。

自分のつぶやきを取得

HTMLにはあらかじめdiv要素に#twitterなどでマークアップしておきます。

			<div id="twitter"></div>
		

			<script src="js/jquery.js" type="text/javascript"></script> 
			<script type="text/javascript">
			$(function() {
				$.getJSON('http://twitter.com/statuses/user_timeline/[USERNAME].json?callback=?', function (json) {
					//配列に入れる
					for(var i in json){				
						$("#twitter").append("<p>" + json[i].text + "</p>");
					}
				});
			});
			</script>
		

自分のつぶやきは「text」で取得できます。
これで#twitterにp要素でひたすらTwitterのtextが追加されます。
json.lengthで取得した配列分だけ表示しますので、表示数を設定する場合はこの部分を変更すると良いかもしれません。

投稿時間を表示

とりあえず自分のつぶやきは表示されたはずですが、これではよくわからない気がするので投稿時間も表示してみましょう。
つぶやきは「text」でしたが、時間は「created_at」です。
単純に「json[i].text」の部分を「json[i].created_at」に変えて実行してみましょう。

Fri Jun 05 17:07:09 +0000 2009

こんな感じで表示されるはずです。
こ、これはわかりにくいですね。
なので、読みやすい形に変換してみましょう。

投稿時間を見やすいフォーマットに変換

			var dateObj = new Date;
			dateObj.format('Y-m-d H:i:s', json[i].created_at);
		

URL、リプライ、ハッシュタグを正規表現で置き換えてリンクを付ける

今の状態だとテキストを素のまま表示しているだけですね。
取得したテキストに正規表現を使用してリンクを付けてみましょう。
各正規表現は次のようになります。

URL

/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/

ハッシュタグ

/#(\w+)/　→ 【リンク先】 http://twitter.com/search?q=%23[ハッシュタグ名]

リプライ

/@(\w+)/　→ 【リンク先】 http://twitter.com/[リプライ名]

最終的なコード

dl要素でマークアップしてみました。

JavaScript

	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/php_date.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			//IE対策
			function replaceTwTimeStr(time){
				var tArray = time.split(" ");
				var timeStr = tArray[0] + " " + tArray[1] + " " + tArray[2] + " " + tArray[5] + " " + tArray[3] + " " + tArray[4];
				return timeStr;
			}
			var dateObj = new Date;
			$.getJSON('http://twitter.com/statuses/user_timeline/[USERNAME].json?callback=?', function (json) {
				for(var i in json){
					var text = json[i].text;
					//URLにリンクを付ける
					text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)/gi,'<a href="$1">$1</a>');
					//ハッシュタグにリンク
					text = text.replace(/#(\w+)/gi,'<a href="http://twitter.com/search?q=%23$1">#$1</a>');
					//リプライにリンク
					text = text.replace(/@(\w+)/gi,'<a href="http://twitter.com/$1">@$1</a>');
					//つぶやきを表示
					$("#twitter dl").append("<dt>" + 
						dateObj.format('Y-m-d H:i:s', replaceTwTimeStr(json[i].created_at)) + 
						"</dt><dd>" + text + "</dd>");
				}
			});
		});
	</script>
	

HTML

		<div id="twitter"><dl></dl></div>