履歴もしくは日誌

Twitter の Badge に @ による自分宛の書き込みも表示

Twitter の Badge を使うと，自分の Web サイトに自分の最後の書き込みを表示できます．その Badge に手を加えて誰かが @onohiroki って書いたときにも表示できるようにしてみました．Badge は「Weblog / 履歴もしくは日誌」のページ右上に貼ってます．

Twitter では自分の Web サイトに Twitter の内容を表示する為の Badge を配布しています．

• Twitter / Get a Badge for Your Site
  http://twitter.com/badges

ここの HTML / JavaScript の Badge に手を加えました．

HTML はこんな感じ：

<div id="twitter-badge">
<ul id="twitter_update_list">
<li>What I am doing:</li>
<li>http://twitter.com/onohiroki/</li>
</ul>
</div>

<script type="text/javascript" src="twitter-badge.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/onohiroki.json?callback=twitterCallbackMe&count=1"></script>
<script type="text/javascript" src="http://twitter.com/statuses/friends_timeline/onohiroki.json?callback=twitterCallbackWithFriends&count=10"></script>

上の HTML 内で，script 要素が 3 つあるけど，最後の一行はページの最後の方に書いた方が良さそうです．

JavaScript は http://twitter.com/javascripts/blogger.js を改変して，こんな感じ：

// original http://twitter.com/javascripts/blogger.js
// 2008-01-17 onohiroki.cycling.jp
var numOfItem = 0;
var twitterCallbackMeHTML = "";

function twitterCallbackWithFriends(obj) {
   var twitters = obj;
   var username = "";
   var statusHTML = "";
   
   for (var i=0; i<twitters.length; i++){
      username = twitters[i].user.screen_name;
      var smalltext = "";
      if (twitters[i].text.indexOf("http") > -1) {
         smalltext = ' class="withUrlTwitter" ';
      }
      if (username == 'onohiroki') {
         numOfItem++;
         statusHTML += ('<li class="me"><span'+smalltext+'>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'<br /><span class="friend">by '+twitters[i].user.screen_name+'</span></a></li>')
      }
      else if (twitters[i].text.indexOf("@onohioki ") > -1){
         statusHTML += ('<li class="friend"><span'+smalltext+'>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'<br /><span class="friend">by '+twitters[i].user.screen_name+'</span></a></li>')
      }
   }
   if (numOfItem < 1) {
      statusHTML += twitterCallbackMeHTML;
   }
   document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

function twitterCallbackMe(obj){
   var twitters = obj;
   var statusHTML = "";
   var username = "";
   for (var i=0; i<twitters.length; i++){
      username = twitters[i].user.screen_name;
      var smalltext = "";
      if (twitters[i].text.indexOf("http") > -1) {
         smalltext = ' class="withUrlTwitter" ';
      }
      statusHTML += ('<li class="me"><span'+smalltext+'>'+twitters[i].text+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'<br /><span class="friend">by '+twitters[i].user.screen_name+'</span></a></li>')
   }
   document.getElementById('twitter_update_list').innerHTML = statusHTML;
   twitterCallbackMeHTML = statusHTML;
}


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';
  }
}

friends_timeline からデータを引っ張って来て，自分の screen_name が使われてる投稿だけ表示．もし friends_timeline に自分の発言が無かった場合は user_timeline から持って来た最新の投稿を表示します．

ぼくは JavaScript って良く知りません．これを書くのにも Web で調べながらでした．

Permalink Trackback URI http://onohiroki.cycling.jp/tb/tb.cgi/weblog_d20080118n1 TrackBack