ExJS入門30 Twitter Search APIを使ったグリッドパネル
前回はJSONPを使ってYouTubeの情報をグリッドに表示するサンプルを紹介しました。今回も外部APIの利用第2弾ということにして、Twitter APIを使ってTwitterのアップデートをグリッドに読み込んでみます。
Twitter Search APIを利用したグリッド
今回はJSONPを使ったAPIの利用に加えて、グリッドを自動更新するためのExt.TaskMgrクラスを使ったサンプルコードの紹介になります。
前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
グリッドパネル関連の過去の記事はこちらからです。
- ExtJSで楽しくRIA業務アプリ開発 ExJS入門17 グリッド・パネル 基本編
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18 グリッド レンダラーを使ってデザインを変える
- ExtJS入門19 グリッドにページング機能を追加する
- ExtJS入門20 グリッドにフィルタリング機能を追加する
- ExJS入門21 グリッド・セレクション・モデル
- ExJS入門22 グリッドのイベント処理（ダブルクリック、右クリック）
- ExtJS入門23 グリッドへの項目の追加と削除
- ExtJS入門24 エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
- ExJS入門25 エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
- ExJS入門26 エディタブル・グリッド（色々なエディターを設定する)
- ExJS入門27 もう一つのエディタブル・グリッド ux.RowEditorプラグイン
- ExJS入門28 チェックボックス付きグリッドパネル
- ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.TaskMgrクラス
http://extdocs.xenophy.com/?class=Ext.TaskMgr
ExtJS -3.0 日本語APIドキュメント – Ext.data.DataProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.DataProxy
ExtJS -3.0 日本語APIドキュメント – Ext.data.ScriptTagProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.ScriptTagProxy
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</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="grid-twitter.js"></script>
<style TYPE="text/css">
<!--
.search {background-image: url(../img/icon/magnifier.png) !important;}
-->
</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="grid"></div>
<br/>
Java Script：<a href="grid-twitter.js">grid-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 imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
return String.format('<div"><img src={0} alt="{1}"/></div>',
value,
store.getAt(rIndex).data.from_user
);
};
var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
var data = store.getAt(rIndex).data;
return String.format('<div style="white-space:normal;"><p><a target="_blank" href="http://twitter.com/{0}"><b>{0}</b></a>:{1}</p><br/><span style="color:#CCC">{2}</span></div>',
data.from_user,
value,
data.created_at
);
};
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
height:600,
loadMask:true,
store:store,
autoExpandColumn:'title',
cm:new Ext.grid.ColumnModel({
columns:[
{
id:'id', header:'ID', dataIndex:'id', hidden:true
},
{
id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
},
{
id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
}
]
}),
tbar:[
'->',
{
xtype:'textfield',
name:'keyword',
itemId:'keyword'
},
{
text:'Search',
iconCls:'search',
scope:this,
handler:function(){
var tbar = grid.getTopToolbar();
var value = tbar.getComponent('keyword').getValue();
grid.getStore().load({
params:{
q:value
}
});
}
}
]
});
//自動アップデート
var task = {
run:function(){
store.reload();
},
interval:1000 * 30 //msec * sec
}
Ext.TaskMgr.start(task);
});
実行結果:
Twitter Search APIを利用したグリッド
JSONPをストアのソースとして読み込む方法は前回紹介したので簡単に済ませますが、JSONの構造としてはYouTube DATA APIよりも簡単でresultという配列の中に対象の検索項目に対する最新のUPDATEが入っています。デフォルトでは"extjs"で検索をかけています。
またTwitter Search APIでは全件数が帰ってこないため、PagingToolbarは上手く動かないようです。’（ひょっとしたら何か解決方法があるかも知れせん…）
//ストアの設定
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' //クライアントの種類
]
});
Twitter Search APIの利用時の設定は以上のようになります。後はこのストアにあわせてグリッドを作成します。レンダラーも前回と似ていますがデータの構造にあわせて少し変更を加えています。
//各レンダラーの設定
var imgRenderer = function(value,meta,rec,rIndex,cIndex,store){
return String.format('<div"><img src={0} alt="{1}"/></div>',
value,
store.getAt(rIndex).data.from_user
);
};
var titleRenderer = function(value,meta,rec,rIndex,cIndex,store){
var data = store.getAt(rIndex).data;
return String.format('<div style="white-space:normal;"><p><a target="_blank" href="http://twitter.com/{0}"><b>{0}</b></a>:{1}</p><br/><span style="color:#CCC">{2}</span></div>',
data.from_user,
value,
data.created_at
);
};
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
height:600,
loadMask:true,
store:store,
autoExpandColumn:'title',
cm:new Ext.grid.ColumnModel({
columns:[
{
id:'id', header:'ID', dataIndex:'id', hidden:true
},
{
id:'img', header:'img', dataIndex:'profile_image_url', renderer:imgRenderer, width:60
},
{
id:'title', header:'title', dataIndex:'text', renderer:titleRenderer, width:120
}
]
}),
tbar:[
'->',
{
xtype:'textfield',
name:'keyword',
itemId:'keyword'
},
{
text:'Search',
iconCls:'search',
scope:this,
handler:function(){
var tbar = grid.getTopToolbar();
var value = tbar.getComponent('keyword').getValue();
grid.getStore().load({
params:{
q:value
}
});
}
}
]
});
つぎに自動アップデートの処理を作成します。ExtJSにはExt.TaskMgrクラスというシングルトンクラスが用意されています。このクラスを利用することで、一定時間ごとに実行する処理を設定できます。実行したい処理をオブジェクトの形で記述してタスクマネージャー(Ext.TaskMgrクラス)に設定します。
var task = {
run:function(){
store.reload();
},
interval:1000 * 30 //msec * sec
}
Ext.TaskMgr.start(task);
- run:実行する処理
- interval:実行する間隔(ミリ秒で設定)
今回のサンプルでは30秒間隔でストアをリロードしています。これでTwitter検索を実行後に30秒ごとにグリッドを更新します。
前回のYouTube Data APIよりもTwitter Search APIの方が簡単でしたね。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
javascript コードの 14 行目の文末の “,” は不要ですね。
katoy
8 5 月 10 at 6:22 PM
サンプルコードを修正しました。14行目の最後にカンマは余分ですね。IEだとエラーが起きてしまっていました。
JSLintを通すのを忘れていたみたいです。すいません。
佐竹 裕行
10 5 月 10 at 10:09 AM
[...] ExJS入門31 GridViewでグリッドの各行の背景色を変更する 5 月 10th, 2010 @ 12:04 pm › 佐竹 裕行 ↓ Leave a comment もうグリッドはもうほんとにネタ切れですね、前回のTwitter APIを少し修正して最新一時間以内のtweetが分かるように背景色を変えてみたいと思います。グリッドの見た目はGridViewで変更します。GridViewはGridPanelクラスのviewConfigで設定できるということも以前のサンプルで紹介したので、今回はささっとサンプルを紹介します。 一時間以内のtweetだけ背景色を緑に ほぼ前回のサンプルコードをそのまま使用するので、前回のチュートリアルがお済でない方はこちらからどうぞ ExJS入門30 Twitter Search APIを使ったグリッドパネル [...]
ExJS入門31 GridViewでグリッドの各行の背景色を変更する | ExtJSで楽しくRIA業務アプリ開発
10 5 月 10 at 12:04 PM