FriendFeedに流れてきたTumblrの画像をだら見できるTumblr Photo Streamってのを作ったよ

FriendFeedでキーワード検索してだらだらエントリが流れてくるのみるのって楽しいですよね。でも、Tumblrの画像だったらでっかく見たい！というかTumblrの画像だけ見たい！ということで、FriendFeedのRealTime APIを試すついでに、 JSオンリーでそんなの作ってみたよ。名付けて「Tumblr Photo Stream」。Amazon S3にデプロイしました。 jQuery使ったJSのソース部分はこんな感じです。

 $(document).ready(function(){
  var url = "http://friendfeed-api.com/v2/search?q=service%3Atumblr&callback=?";
  loadFF(url);
});

function loadFF(url){
  $.getJSON(url,
  function(data) {
    var entries = new Array();
    $.each(data.entries,function(){
      if( this.thumbnails && this.thumbnails[0].url.match(/tumblr\.com/) ){
        entries.push(this);
      }
    });
    if( entries.length ){
      showEntry(entries);
    }
    var cursor = '';
    if( data.realtime ){
      cursor = data.realtime.cursor;
    }
    var url = "http://friendfeed-api.com/v2/updates/search?q=service%3Atumblr&cursor="
     + cursor + "&callback=?";
    loadFF(url);
  });
}

function showEntry(entries){
  var entry = entries.pop();
  var photoUrl = entry.thumbnails[0].url.replace("_75sq","_400");
  var a = $("<a/>");
  a.attr('href',entry.url).attr('target','_blank');
  var img = $("<img/>");
  a.append(img.attr('src',photoUrl));
  var p = $("<p/>");
  p.html(entry.body);
  var div = $("<div/>");
  div.append(a).append(p).addClass("entry").hide();
  $("#panel").prepend(div);
  div.animate({
    "height": "toggle", "opacity": "toggle"
  }, 1000,
  function(){
    if(entries.length){ showEntry(entries); }
  });
}

よかったらだら見してみてください。

Tumblr Photo Stream