jQueryとtempo.jsでTwitterのjsonをレンダリングしてタイムラインを表示
昨今jsonで値を返すところが増えています。
Tempo :: The tiny JSON rendering engineを使用すると直感的に操作できます。
今回はこれを利用し、Twitterのタイムラインを表示してみます。
sponsors
使用方法
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をレンダリングしてタイムラインを表示サンプル
sponsors
記事作成:2011年3月23日 09:56
記事URL:http://www.skuare.net/2011/03/jquerytempojstwitterjson.html
TOP > javascript > その他 > jQueryとtempo.jsでTwitterのjsonをレンダリングしてタイムラインを表示
前の記事:これから、私たちに出来ること ~東北地方太平洋沖地震~
次の記事:テキストサイズと位置をランダムに散らばらせ表示するプラグイン「jQuery Splatter Plugin」
あなたにはこちもお勧め!
jQuery プラグインまとめ!