Twitterのユーザ名と画像を表示してみる - ブログ｜ベトナムでのオフショア開発とスマートフォンアプリ開発のバイタリフィ

とある事情によりユーザの一覧を作りたかったんだけどTwitterのユーザの画像名はttp://twitter.com/user/profile_image.jpgみたいなかっこいいものでなくてアップロードされたそのまんまの画像名でアップされているので取得したいときはAPIをわざわざ叩かなくてはいけませんね。しかもいPOSTじゃなきゃいけないうえに取れるのはXML!
これは面倒くさい！ユーザリストくらいJavascriptだけでチョロチョロっとやってぽいっと置こうと思ってたのに。。。
と思っていたらTwitter Images – http://twitterimag.esというサービスを見つけました。これがすげー簡単です。

http://img.tweetimag.es/i/{username}_{size}

で画像が取得できます。画像のバイナリが帰ってくるのでそのままimgタグに書けばOKなのでJSだけで使用できていい感じですね。
{size}は

m -> 24x24
n -> 48x48
b -> 73x73
o -> original size, varies

で取れます。
中くらいの大きさの僕のアカウント画像であれば

http://img.tweetimag.es/i/slowbirds_n

って感じです。楽チン！
ということで取得するコードはこんな感じ。jQuery使っていて、ユーザリストはjsonで取得。
一応リストが多くて読み込み処理が重かったときのために埋め込みは一個ずつ非同期処理にしています。

サンプルページ

/***********************************************************
* showTwitterLine(Async loading) with jQuery
* editor : slowbirds@gmail.com
* since : 2010-03-15

* input : json
* >-------------
* {
* users:[
*   "slowbirds",
*   "acount_name2",
*   "acount_name3",
* 
*   "end"
* ]
* }
* -------------<
* output : html
* >-------------
* <title>
* <dl id="showTwitterLineLister">
* <dt><img src="acount/img" alt="acount" /></dt>
* <dd><a href="acount/url" title="acount">acount</a></dd>
* </dl>
* -------------<
***********************************************************/
$(function() {
jQuery.fn.showTwitterLine = function(config) {
  config = jQuery.extend({
    list: "./userlist.json",
    title: "<h2>TwitterLine</h2>",
    loadingMessage: "読み込み中..."
  },config);
  
  var wrapperHTML;
  var $target = $(this);

  var _const = function(){
    $target.html(config.loadingMessage);
    wrapperHTML = config.title+'<dl id="showTwitterLineLister"></dl>';
    getList();
  };
  var getList = function() {
    $.getJSON(config.list,function(json) {
      showList(json);
    });
  };
  var makeHTML = function(list,i){
    setTimeout(function(){
      var acount = list.users[i];
      if(acount === "end") return false;
      var html = "";

      html += '<dt>';
      html +='<a href="http://twitter.com/'+ acount +'" title="'+ acount +'"><img src="http://img.tweetimag.es/i/'+ acount +'_n" alt="'+ acount +'" /></a>';
      html +='</dt><dd>';
      html += '<a href="http://twitter.com/'+ acount +'" title="'+ acount +'">'+ acount +'</a>';
      html +='</dd>';

      $("#showTwitterLineLister").append(html);
    },0);
  }
  var showList = function(list) {
    $target.html(wrapperHTML);
    for(var i=0;i<list.users.length;i++) {
      makeHTML(list,i);
    }
  };
  _const();
};
});

jsonを更新するときにリストの最後にもカンマを入れちゃう人が後を立たないのでダミーで”end”っていうのを入れる仕様にしました。

{
users:[
  "slowbirds",
  "acount_name2",
  "acount_name3",

  "end"
]
}

使い方はこんな感じです

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <title>showTwitterLine.</title>
  <script src="./shared/js/jquery.js" type="text/javascript"></script>
  <script src="./shared/js/showTwitterLine.js" type="text/javascript"></script>
  <script>
  $(function(){
    var configure = {
      list: "./userlist.json", //json読み込み元
      title: "<h2>TwitterLine</h2>", //表示するタイトル行
      loadingMessage: '<p class="loading">読み込み中...</p>' //json読み込み中の表示。HTMLもOK
    }
    $("#TwitterLine").showTwitterLine(configure);
  });
  </script>
</head>

<body>
<div id="TwitterLine" style="padding: 15px;">
ここに表示されますがな。
</div>
</body>
</html>

Share on Tumblr