Twitter HTMLウィジェットで検索結果を表示する方法
TwitterのHTMLウィジェットは、通常プロフィールの表示にしか対応していないが、
少しソースを修正して、検索結果を取得できるようにしてみた。
通常の検索ウィジェットはJSONから指定できる以外のCSSの影響範囲が分かりづらいので、
HTMLウィジェットの方がカスタマイズの幅が広いように思う。
プログラムが制限されている環境では特に役に立ちそうだ。
HTMLウィジェット作成ツール(要ログイン)で出力されるHTMLは以下のとおり
<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/gw_staffs" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/gw_staffs.json?callback=twitterCallback2&count=5"></script>
このソースを切り貼りして、以下のように修正した。
<head>
<!-- 以下はblogger.jsの内容を一部修正したもの-->
<script type="text/javascript">
function twitterCallback(result) {
var statusHTML = [];
<!-- 以下、APIから取得したJsonの形式が異なるため調整 -->
var twitters = result.results;
for (var i=0; i<twitters.length; i++){
<!-- ユーザ名の取得先の項目名を変更 -->
var username = twitters[i].from_user;
var status = twitters[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>';
});
<!-- Tweet投稿者の名前も表示してみた -->
statusHTML.push('<li><span><a href="http://twitter.com/'+username+'">'+username+"</a>: "+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].from_user_id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
</script>
<style type="text/css">
<!-- 適当にデザインを調整 -->
#twitter_update_list ul {
margin:0px;
padding:0px;
}
#twitter_update_list li{
margin-left:-30px;
list-style: none none outside;
font-size:13px;
}
#twitter_div {
overflow:hidden;
display:block;
height:500px;
width:300px;
background-color:#CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<div id="twitter_div">
<h2 class="sidebar-title">prayforjapan</h2>
<ul id="twitter_update_list"></ul>
</div>
<!-- APIの繋ぎ先を変更し「tweet」という単語での検索結果をjson形式で取得-->
<script type="text/javascript" src="http://search.twitter.com/search.json?q=tweet&callback=twitterCallback&rpp=5"></script>
</body>
javascriptでHTMLタグを作り出している部分を修正してゆけば、
リストタグにも縛られずHPに自然な形で検索結果のTweetを埋め込むことができそうだ。
以下にサンプルを用意した。
Twitter HTMLウィジェットで検索結果を表示する
少しソースを修正して、検索結果を取得できるようにしてみた。
通常の検索ウィジェットはJSONから指定できる以外のCSSの影響範囲が分かりづらいので、
HTMLウィジェットの方がカスタマイズの幅が広いように思う。
プログラムが制限されている環境では特に役に立ちそうだ。
HTMLウィジェット作成ツール(要ログイン)で出力されるHTMLは以下のとおり
<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/gw_staffs" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/gw_staffs.json?callback=twitterCallback2&count=5"></script>
このソースを切り貼りして、以下のように修正した。
<head>
<!-- 以下はblogger.jsの内容を一部修正したもの-->
<script type="text/javascript">
function twitterCallback(result) {
var statusHTML = [];
<!-- 以下、APIから取得したJsonの形式が異なるため調整 -->
var twitters = result.results;
for (var i=0; i<twitters.length; i++){
<!-- ユーザ名の取得先の項目名を変更 -->
var username = twitters[i].from_user;
var status = twitters[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>';
});
<!-- Tweet投稿者の名前も表示してみた -->
statusHTML.push('<li><span><a href="http://twitter.com/'+username+'">'+username+"</a>: "+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].from_user_id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
</script>
<style type="text/css">
<!-- 適当にデザインを調整 -->
#twitter_update_list ul {
margin:0px;
padding:0px;
}
#twitter_update_list li{
margin-left:-30px;
list-style: none none outside;
font-size:13px;
}
#twitter_div {
overflow:hidden;
display:block;
height:500px;
width:300px;
background-color:#CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<div id="twitter_div">
<h2 class="sidebar-title">prayforjapan</h2>
<ul id="twitter_update_list"></ul>
</div>
<!-- APIの繋ぎ先を変更し「tweet」という単語での検索結果をjson形式で取得-->
<script type="text/javascript" src="http://search.twitter.com/search.json?q=tweet&callback=twitterCallback&rpp=5"></script>
</body>
javascriptでHTMLタグを作り出している部分を修正してゆけば、
リストタグにも縛られずHPに自然な形で検索結果のTweetを埋め込むことができそうだ。
以下にサンプルを用意した。
Twitter HTMLウィジェットで検索結果を表示する
- 関連記事
- トラックバックテーマ 第1196回「スケジュール管理はアナログ？デジタル？」
- Twitter HTMLウィジェットで検索結果を表示する方法
- Yahoo!のジオコーダAPIを使用してみた
