jQueryでTwitterのタイムラインを表示

Categorized | Featured, Javascript

Tags | Ajax, jQuery, JSON, Twitter

jQueryでTwitterのタイムラインを表示

Posted on 2011/2/26(土) by CatProgram

Twitterでのつぶやきをブログに表示したい。それも一般のブログパーツを使わないで。そんな意味不明の思いから設定してみました。本音はブログパーツ大好きなんです。可愛いものや素晴らしい技術のもあるし、カスタマイズ出来るのも多い。でもね、自分の勉強のためですよ

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

まず、ぐぐってとても参考になったサイト
　PHP & JavaScript Room　Twitter関連のjQueryプラグイン
ここの「jQuery＋Twitter APIの簡単な例」
で、素晴らしいソースを発見しました。

順を追って説明してみます。
１．Twitter APIの扱い方
タイムラインを読み込むのは、たったこれだけです。

http://twitter.com/status/user_timeline/TwitterのID.json?count=表示件数&callback=?

callback=?は、他のサーバ（Twitterサーバ）を見に行く時のおまじないなので、ちゃんと設定しましょう。

直接CatProgramのTwitterデータ（JSON形式）を見てみましょう。→ここ
よく見ると、
　　”screen_name”:”Cat_Program”,
　　”verified”:false,
　　”location”:”Tokyo Japan”,・・・
こんな感じでデータが並んでいます。
もしTwitterのID（Cat_Program）を取り出したかったら、項目名は”screen_name”になるわけ。

今回のつぶやき表示に使う項目
・text　　つぶやきの内容
・created_at　投稿日時

viaはOAuth（認証）を通さないと取得できないので、無視しとこう。

２．jQueryの実際
PHP & JavaScript Roomさんのを手直ししてみました。

<script type="text/javascript">
$(function(){
 var tweeturl="http://twitter.com/status/user_timeline/TwitterーID.json?count=5&callback=?";
 $.getJSON(tweeturl, function(data){
  $.each(data, function(i, item){
   // URL,@,#がある場合はリンク設置
   var text = item.text
      .replace(/(https?:\/\/[-a-z0-9._~:\/?#@!$&\'()*+,;=%]+)/ig,'<a href="$1">$1</a>')
      .replace(/@+([_A-Za-z0-9-]+)/ig, '<a href="http://twitter.com/$1">@$1</a>')
      .replace(/#+([_A-Za-z0-9-]+)/ig, '<a href="http://search.twitter.com/search?q=$1">#$1</a>');

  // 日時編集
  var created_at =  item.created_at.split(" ");
  var post_date  = created_at[1] + " " + created_at[2] + ", "+ created_at[5] + " " + created_at[3];
  var date = new Date(post_date);
  date.setHours(date.getHours() + 9); // UTC→ JST (+9時間)
  var month  = date.getMonth() + 1; //月
  var day  = date.getDate();//日
  var hour = date.getHours(); //時
  var min = (date.getMinutes()<10)? "0"+date.getMinutes():date.getMinutes();//分　
  $("<li></li>")
      .addClass(i%2 ? "even" : "odd")
      .html(txt+'<p>'+month+"月"+ day + "日 "+hour+":"+min+'</p>')
      .appendTo("#tweet");
   });
  });
});
</script>

CSSは自分で好きなように。

<style type="text/css">
#tweet {
 margin:0; padding:0;
 list-style:none;
 border:1px solid #888;
 font-size:11px;
 width:15em;
}
#tweet li {
 margin:0; padding:.5em;
 list-style:none;
 background-color:#fff;
}
#tweet li.odd {
 background-color:#ddd;
}
#tweet li a {
 color:#0099cc;
}
</style>

あとは、HTML本体を。