WEBOPIXEL

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

Posted: 2010.07.04 / Category: javascript / Tag: ,

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

Sponsored Link

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

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

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>
	

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」を表示したい数値に変更するとかですかね。

tomy 2012-04-12 11:54 

はじめまして。
jQuery初心者です。

こちらのソースを参考に、webサイトにTwitterを表示出来るようにしたのですが、
表示数の制御のところで、つまづきました・・・。
ご教授の程よろしくお願い申し上げます。

>[USERNAME].json?count=5&callback=?

上記で最新5件取得出来ていると思っていたのですが、
どうやら5件くぎりで取得しているみたいなのです。
たとえば、全部で7件つぶやいてたとしたら、
取得されているのは5件区切りではみ出た2件のみが表示されてしまいます。。。

コメントのバックナンバーにある、
>15行目のfor文の「json.length」を表示したい数値に変更する
というのが気になり、for文の書き方など調べてはみたのですが、
基礎を分かってないせいか上手くいかない状況です・・・。

お手数をおかけしますが、
ご教授よろしくお願い申し上げます。

tomy 2012-04-12 12:54 

度々すみません。

ソースは、表示のさせ方を少しだけ触って
下記のようにしました。

ご教授の程よろしくお願い申し上げます。。

$(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?count=5&callback=?’, function (json) {
for(var i in json){
var text = json[i].text;
//URLにリンクを付ける
text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)/gi,’$1‘);
//ハッシュタグにリンク
text = text.replace(/#(\w+)/gi,’#$1‘);
//リプライにリンク
text = text.replace(/@(\w+)/gi,’@$1‘);
//つぶやきを表示
$(“#tweet ul”).append(“” +
dateObj.format(‘Y年m月d日 ’, replaceTwTimeStr(json[i].created_at)) +
text + “”);
}
});
});

webOpixel 2012-04-13 10:59 

普通は最新のものから取得されると思うのですがなんでしょうね、、、
スクリプトを抜きにしてブラウザで直接下記アドレスにアクセスした場合も2件しか表示されませんか?
http://twitter.com/statuses/user_timeline/USERNAME.json?count=5

lucy 2012-08-20 01:26 

いつも拝見しております。役に立つ記事をありがとうございます。

上記のjQueryを使って、自分が公式リツイートしたものだけを表示することはできますでしょうか?

(初心者なので、まったく手つかずです、、、)

大変お手数ですが、ご教示頂けますでしょうか。
何卒宜しくお願い致します。

webOpixel 2012-08-20 14:16 

「retweeted_by_me」でできると思いますが、アプリケーション登録が必要なのでちょっと大変かもしれません。
http://watcher.moe-nifty.com/memo/docs/twitterAPI.txt

lucy 2012-08-20 15:48 

お返事ありがとうございます。

/user_timeline/をretweeted_by_meにすればよいのでしょうか?
https://dev.twitter.com/でアプリ登録(?)してみたのですが、どのように設置すればよいのかで止まっています。。

お手数ですが、ご教示頂けますと幸いです。。

webOpixel 2012-08-21 13:31 

上のコメントのURLに詳細は書いてあると思いますが、
「http://api.twitter.com/1/statuses/retweeted_by_me.format」
になると思います。

あと、OAuth認証というのが必要になると思います。

kae 2012-10-11 11:53 

こんにちは。
こちらのjQueryを参考にさせて頂いております。

いきなりツイートが表示されなくなってしまったのですが、
なにかtwitter側で変更があったのでしょうか。。

もしご存知でしたら教えていただけますでしょうか。

webOpixel 2012-10-11 14:06 

Twitter APIが変更されたようです。
こちらをご覧ください。

http://www.webopixel.net/javascript/650.html

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。