ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する
JSONPでTwitter APIを利用する小ネタの紹介です。前回まではグリッドのデータソースとしてJSONPで色々なAPIを利用していました。APIから取得したデータはストアに保存されています。そのためグリッド以外にも利用することができます。今回は前回と同じTwitter Search APIをデータソースにして表示をグリッドパネルからデータビューに変更してみます。
Twitter API をDataViewの表示
グリッドパネル関連の過去の記事はこちらからです。
- 第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する
- ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
- ExJS入門30 Twitter Search APIを使ったグリッドパネル
- ExJS入門31 GridViewでグリッドの各行の背景色を変更する
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.DataViewクラス
http://extdocs.xenophy.com/?class=Ext.DataView
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 Twitter API DataView</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="dataview-twitter.js"></script>
<style TYPE="text/css">
<!--
.search {background-image: url(../img/icon/magnifier.png) !important;}
.tweet
{
width:148px;
height:300px;
margin:2px;
padding:3px;
border:dotted 1px #CCC;
background-color:#F9F9F9;
}
.tweet_text
{
background-color:#FFF;
padding:3px;
}
span.tweet_date
{
font-size:x-small;
}
-->
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">
Twitter Search APIを利用したデータビュー （30秒毎に自動更新）
</p>
<div id="panel"></div>
<br/>
Java Script：<a href="dataview-twitter.js">dataview-twitter.js</a><br/>
Twitter API：<a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search" target="_blank">Twitter Search API Method: search</a>
</div>
</body>
</html>
Java Script:
Ext.onReady(function(){
//ストアの設定
var store = new Ext.data.JsonStore({
//Twitter Search APIをJSONPで利用
proxy:new Ext.data.ScriptTagProxy({
url:'http://search.twitter.com/search.json'
}),
baseParams:{
q:'extjs'
},
paramNames:{
start:'page',
limit:'results_per_page'
},
autoLoad:true,
root:'results',
idProperty:'id',
fields:[
'profile_image_url',
'created_at',
'from_user',
'metadata',
'to_user_id',
'text', //本文
'id',
'from_user_id',
'geo', //GEOタグ
'iso_language_code',
'source' //クライアントの種類
]
});
var tpl = new Ext.XTemplate(
'<div id="twitter-tpl">',
'<tpl for=".">',
'<div class="tweet" >',
'<img src={profile_image_url} alt="{from_user}"/>',
'<h1><a target="_blank" href="http://twitter.com/{from_user}"><b>{from_user}</b></a>:{1}</h1>',
'<span class="tweet_date">{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} </span>',
'<br/>',
'<div class="tweet_text">{text}</div>',
'</div>',
'</tpl>',
'</div>');
var panel = new Ext.Panel({
renderTo:'panel',
height:600,
width:500,
autoExpandColumn:'title',
autoScroll:true,
items:new Ext.DataView({
tpl:tpl,
store:store,
autoHeight:true,
itemSelector:'div.tweet',
emptyText:'No Tweet'
}),
tbar:[
'->',
{
xtype:'textfield',
name:'keyword',
itemId:'keyword'
},
{
text:'Search',
iconCls:'search',
scope:this,
handler:function(){
var tbar = panel.getTopToolbar();
var value = tbar.getComponent('keyword').getValue();
store.load({
params:{
q:value
}
});
}
}
]
});
//自動アップデート
var task = {
run:function(){
store.reload();
},
interval:1000 * 30 //msec * sec
};
Ext.TaskMgr.start(task);
});
実行結果:
Twitter API をDataViewの表示
APIからJsonStoreへデータを読み込む流れは前回のサンプルコードと同じです。データビューの基本的な紹介はこちらをご覧下さい。第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する
APIからストアにデータを読み込んでデータビュー(Ext.DataView)クラスに渡します。データビューはテンプレートを指定する必要があります。このテンプレートにデータの表示の仕方を記述します。今回は以下のようにして、tweetをグリッド状に並べています。
var tpl = new Ext.XTemplate(
'<div id="twitter-tpl">',
'<tpl for=".">',
'<div class="tweet" >',
'<img src={profile_image_url} alt="{from_user}"/>',
'<h1><a target="_blank" href="http://twitter.com/{from_user}"><b>{from_user}</b></a>:{1}</h1>',
'<span class="tweet_date">{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} </span>',
'<br/>',
'<div class="tweet_text">{text}</div>',
'</div>',
'</tpl>',
'</div>');
少し変わっているところとしては、日付を以下のように処理して、フォーマットしています。
'<span class="tweet_date">{[Date.parseDate(values.created_at,"D, d M Y G:i:s O").format("H時m分s秒 n月j日")]} </span>',
テンプレート文字列内で”{[ ・・・ ]}”を囲うことで処理を記述することができます。ここではループの中の現在のデータにアクセスするためにvaluesという変数を使う必要があります。
DataViewのコンフィグで
overClassやlisternersでイベントを取得することより高機能なパネルへ発展も可能です。
Twitterには沢山のAPIが用意されているます、UPDATEや自分のタイムラインを表示できるようにすれば自分専用のTwitterクライアントを作ることも可能です。
時間があるときに作ってみるのも良いかもしれません。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する その2 5 月 12th, 2010 @ 11:42 am › 佐竹 裕行 ↓ Leave a comment 前回のサンプルのおまけです。前回のサンプルコードExt.DataViewを使ってTwitter Search APIの情報を表示していました。今回はダブルクリックイベントとホバリング時のCSSクラスの設定を行ってもう少し使えるアプリっぽく修正しました。 DataViewのホバリング設定 ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する [...]
ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する その2 | ExtJSで楽しくRIA業務アプリ開発
12 5 月 10 at 11:42 AM