skuare.net

昨今jsonで値を返すところが増えています。
Tempo :: The tiny JSON rendering engineを使用すると直感的に操作できます。
今回はこれを利用し、Twitterのタイムラインを表示してみます。

使用方法
Tempo :: The tiny JSON rendering engineからファイル一式をダウンロードします。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="tempo.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var twitter = Tempo.prepare('id名').notify(); //表示させたいid名を記入
twitter.starting();
$.getJSON("http://search.twitter.com/search.json?q='prayforjapan'&rpp=20&callback=?", function(data) { //twitterの検索結果json prayforjapanで20件
twitter.render(data.results);
});
});
</script>

次に下記のようにテンプレートを記述していきます。
<ul id="id名">
<li data-template style="display: none;"> //data-templateでテンプレの始まり
<div>
<amp-img src="{{profile_image_url}}" height="48" width="48"/> //twitterのjsonのprofile_image_urlを取得
<h3>{{from_user}}</h3> //twitterのjsonのfrom_userを取得
</div>
<p>{{text}}</p> //twitterのjsonのtextを取得
</li>
<li class="error" data-template-fallback> //エラーだった場合の処理
Sorry!
</li>
</ul>

ちなみにTwitterのjsonはこんな値です。
{"results":[
{"text":"@twitterapi http:\/\/tinyurl.com\/ctrefg",
"to_user_id":396524,
"to_user":"TwitterAPI",
"from_user":"jkoum",
"metadata":
{
"result_type":"popular",
"recent_retweets": 109
},
"id":1478555574,
"from_user_id":1833773,
"iso_language_code":"nl",
"source":"twitter",
"profile_image_url":"http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/118412707\/2522215727_a5f07da155_b_normal.jpg",
"created_at":"Wed, 08 Apr 2009 19:22:10 +0000"},
],
"since_id":0,
"max_id":1480307926,
"refresh_url":"?since_id=1480307926&q=%40twitterapi",
"results_per_page":15,
"next_page":"?page=2&max_id=1480307926&q=%40twitterapi",
"completed_in":0.031704,
"page":1,
"query":"%40twitterapi"}
}

jQueryとtempo.jsでTwitterのjsonをレンダリングしてタイムラインを表示サンプル