こんにちは，
アプリケーションの設計
第9回で取り上げたTwitter検索を行うJavaScriptをベースに，
機能は以下のとおりです。
- 任意のキーワードで検索
- 60秒おきに自動で新しい検索結果を取得
- @ユーザー名はTwitterにリンク
- URLと思われるところはリンクに
- ハッシュタグをクリックしたときはそのハッシュタグで検索
- 短縮されたURLを展開
なお，
検索の骨組み
まずは任意のキーワードで検索する部分を見ていきましょう。まずはHTMLです。
検索フォームのHTML
<form id="searchform">
<input type="search" id="searchvalue" value="JavaScript">
<select id="searchlang">
<option value="all">all</option>
<option value="ja">ja</option>
</select>
<input type="submit" value="検索">
</form>続いて，
検索フォームのJavaScript
var searchform = document.getElementById('searchform');
var searchvalue= document.getElementById('searchvalue');
var searchlang = document.getElementById('searchlang');
var timer = document.getElementById('timer');
var lang = '';
var TwitterAPI = 'http://search.twitter.com/search.json';
function getJSONP(query){
var script = document.createElement('script');
script.src = TwitterAPI + query;
document.body.appendChild(script);
}
searchform.onsubmit = function(){
lang = searchlang.value;
getJSONP('?callback=TwitterCallback&lang='+lang+'&q=' +
encodeURIComponent(searchvalue.value));
return false; // submitをキャンセル(ページ遷移させない)
};フォームのsubmitを使用している点がポイントで，
なお，
submitイベントの処理
var addEvent = (document.addEventListener) ?
function(node,type,handler){
node.addEventListener(type,handler,false);
}
: function(node,type,handler){
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
};
addEvent(searchform,'submit',function(evt){
lang = searchlang.value;
getJSONP('?callback=TwitterCallback&lang='+lang+'&q=' +
encodeURIComponent(searchvalue.value));
// submitをキャンセル(ページ遷移させない)
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
});今回のようなシンプルなアプリケーションではaddEventListener，
タイムラインの実装
続いて，
タイムラインの骨組み
<div id="search-result" class="twsrrlt"></div>
<div id="timer"></div>
<ul id="search-tmpl" style="display:none;">
<li>
<a class="usr" target="_blank">
<img width="48" height="48"><br>
<span></span>
</a>
<p class="entry"></p>
<div class="time">
<a class="source" target="_blank"></a>
<a class="username" target="_blank"></a>
<a class="timelink" target="_blank"></a>
</div>
</li>
</ul>id="search-result" が検索結果を表示する入れ物で，
さてコールバックの処理ですが，
コールバックの処理
var tmpl = document.getElementById('search-tmpl').
getElementsByTagName('li')[0];
var timeline = document.getElementById('search-result');
var tree;
var prev_result;
function TwitterCallback(data){
if (prev_result){
// 前回の結果に継ぎ足す場合
write_timeline(data);
} else {
clear();
write_timeline(data);
start_timer();
}
prev_result = data;
}
function clear(){
if(tree){
timeline.removeChild(tree);
tree = null;
}
}prev_
自動更新の実装
先にstart_
start_
var TIME = 60, timerID;
function start_timer(){
var time = TIME;
timerID = setInterval(function(){
time--;
timer.innerHTML = time;
if(time === 0){
time = TIME;
if (prev_result){
getJSONP(prev_result.refresh_url +
'&callback=TwitterCallback&lang='+lang);
}
}
}, 1000);
}setIntervalで1秒おきにカウントダウンを行い，
なお，
submitイベントの処理#2
searchform.onsubmit=function(){
prev_result = null;
clearInterval(timerID);
lang = searchlang.value;
getJSONP('?callback=TwitterCallback&lang='+lang+'&q=' +
encodeURIComponent(searchvalue.value));
// submitをキャンセル(ページ遷移させない)
return false;
};