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

すでに多くのTwitterライブラリがあるので必要があるかは微妙なところですが、jQueryを使用してTwitterの自分のタイムラインを表示してみます。
文字情報だけを取得することができれば、自由にスタイルが設定できるのでデザインとかも統一できるじゃないですか!?

demo

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

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

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

自分のつぶやきを取得

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

HTML

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

JavaScript

			<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

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

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

今回は、「php_date.js」というライブラリを使います。
「php_date.js」はdate関数をPHP風に使えるという大変便利なライブラリです。
下記URLからダウンロードしてください。

※最新のv0.3.0では下記の方法だと表示できないようです。この記事のサンプルはv0.2.0を使用しています。

php_date.js
http://rewish.org/javascript/php_date

ダウンロードしてファイルを読み込んだら早速使用してみましょう。
formatメソッドに書式と変換したい値(created_at)を渡すだけで、フォーマットされて返ってきます。

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

これで完成と思いきや、このままだと日付がIEでは「Nan」と表示されて正しく表示されません。
これは、文字列を置き換えることで解決できるようです。

twitterAPI JSON|created_at|ie 対応
http://blog.artvecta.net/archives/159

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>
	
 2010-07-04  javascript  ,

COMMENTS

ddk
2010-09-01 18:30

はじめまして
最近htmlを学びはじめた、初心者です。
自分の作ったページにtwiiterを読み込ませたいと思っています。
やってみたいと思っていたことが載っていたので、参考にさせていただいています。

htmlやjQueryなどあまりよく分かっていないので、初歩的な間違いをしているかもしれませんが、教えていただければありがたいです。

自分のつぶやきを取得
のところに載せていただいているのと同じようにしてみたのですが、プレビューしても、何も出てきません。twitter
のユーザー名も変えたのですが、どのようにしたら文字が表示されますか?
よろしくお願いします。

kei_op
2010-09-01 22:11

jQueryはダウンロードしていますでしょうか?
まだならこちらからダウンロードみてください。
http://jquery.com/
後は「js」というフォルダに入れて実行すればできるはずです。

また、最近htmlを学びはじめたということなので、簡単に設置できる公式のTwitterがありますのでお勧めします。
http://twitter.com/goodies/widgets

ddk
2010-09-01 22:32

返事ありがとうございます。
twitterの文字だけを表示させたいと思っています。
jQueryはダウンロードして、jsフォルダーに入れています。
自分のつぶやきを取得のところのjavaScriptヘッダーに、HTMLをボディーにコピー&ペーストした試しています。
普通はこれだけで表示されるんですよね。

kei_op
2010-09-02 09:56

基本的にはコピーするだけでいけるはずなんですが、なんでしょうね。
考えられることとしてはjQueryのバージョンが古いとか、
あとTwitterのアカウント名のところは[USERNAME]と記述してしまったのですが、実際は[]で囲む必要がない部分です。
このあたりは大丈夫でしょうか。
またサンプルを用意してみました。ご確認頂ければと思います。
http://www.webopixel.net/lab/sample/10/0701/

ddk
2010-09-02 18:59

何度も丁寧に教えてくださり、ありがとうございます。
原因はTwitterのアカウント名の[]でした。
これで、作成中のページにテキストだけ読み込ませることができます。
ほんと色々と原因を考えていただき、またサンプルまで作っていただいたことに感謝します。
まだまだ勉強中なので、ご迷惑をおかけしますが、他の記事も参考にさせてください。
本当に丁寧な対応ありがとうございます。

guri
2010-09-15 09:41

大変参考になりました!
ありがとうございました。

時間の表示はまだ成功していませんが。。。
テキストをWEBサイトに表示させることには成功しました。

ひとつ教えていただきたいのですが、
表示数を制限させるには、どのように書き込んだら良いのでしょうか?

kei_op
2010-09-15 22:35

twitterのURIにパラメータを付けることで取得する数を制御することができます。
例えば5つ取得したいときは最後の部分を「[USERNAME].json?count=5」にすればいけるはずです。
あとは単純に表示するループ回数を指定する方法とかもあります。
15行目のfor文の「json.length」を表示したい数値に変更するとかですかね。

Leave a Reply

Name
Email
Website

RECENT ENTRY

POPULAR ENTRY