ハッシュタグなどでtwitter検索した結果を表示して自動更新するjavascript

ハッシュタグなどでtwitter検索した結果を表示して自動更新するページを作りたいと思い、いろいろと調べてました。
で、twitter API使うとjavascriptで検索結果を得ることができるということがわかったので、javascriptだけでtwitter検索した結果を表示し、それを自動更新し続けるスクリプトを作成しました。
最終的にはPukiWikiのプラグイン化する予定ですが、出来上がって嬉しかったのでとりあえずスクリプト部分のソースを公開します。

(追記)

このスクリプトをベースにしてPukiWiki用のTwitterプラグインを作りました。
こちらもご参照ください。
PukiWiki用Twitterプラグイン - モーグルとカバとパウダーの日記

(/追記)

(追記)

Twitterウィジェットを使えばよかったんですよね… 調べてた頃はこのウィジェット知らなくて
http://twitter.com/widgets

(/追記)

スクリプト部分の最後に出てくる

updateLoop("#ipadjp", 30);

が実際に検索させているところで、ここでは「#ipadjp」というハッシュタグのついた最新30tweetを拾ってきています。
ここを呼び出すように変更すれば、PukiWikiに限らずいろんなCMS向けのプラグインを簡単に作れると思います。

<div style="overflow:auto;height:30ex">
    <ul id="twitter_update_list"></ul>
</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript">
function updateLoop(search_word, count) {
  var update_time = 2*60; // sec
  var callback_func = "twitterSearchCallback";
  var api_url = "http://search.twitter.com/search.json?q="
	+encodeURIComponent(search_word)+"&rpp="+count+"&callback="+callback_func;
  callJSONP(api_url);
  timerID = setInterval(function(){callJSONP(api_url)},update_time*1000);
}

function twitterSearchCallback(searchs) {
  var s = convertSearchedTweets(searchs);
  document.getElementById("twitter_update_list").innerHTML = "<ul>"+s+"</ul>";
}

function convertSearchedTweets(searchs) {
  var s="";
  for(var i in searchs["results"]){
    var username = searchs["results"][i].from_user;
    var id = searchs["results"][i].id;
    var profile_image_url = searchs["results"][i].profile_image_url;
    var reltime = relative_time(searchs["results"][i].created_at);
    var status = searchs["results"][i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    s+='<li><img src="'+profile_image_url+'" width=48 height=48> <a href="http://twitter.com/'+username+'">'+username+'</a>: <span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+id+'">'+reltime+'</a></li>';
  }
  return s;
}

function callJSONP(url) {  
  var target = document.createElement('script');  
  target.charset = 'utf-8';  
  target.src = url;  
  document.body.appendChild(target);  
}

updateLoop("#ipadjp", 30);
</script>

これを作るに当たって下記エントリーが大変参考になりました。この場を借りてお礼いたします。ありがとうございます。

twitterをPukiWiki上で表示させるときに使うプラグイン : Curo.jp
http://curo.jp/83

JSONPを使ってJavaScriptだけでマッシュアップ (Yahoo! JAPAN Tech Blog)
http://techblog.yahoo.co.jp/cat207/web_1/jsonpjavascript/