Vitality for you　web site planning and design business development

Home > スタッフブログ

Local Navigation

  • サービス一覧
  • 商品一覧
  • 会社案内
  • お問い合わせ
  • アクセス

メインコンテンツ

スタッフブログ / Staff blog

Twitterのユーザ名と画像を表示してみる2010年3月27日 04:59

とある事情によりユーザの一覧を作りたかったんだけど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>

このページのTOPへ