Koichi Labs Blog

Twitterのリストに登録されている人のプロフィール一覧をJQueryで組んでみました。
以下のリンク先のように表示されます。

サンプル:
http://labs.s-koichi.info/mashup/twitter/listmembers.html?jefunited/jefunited

?以降のリスト名を変えれば他のリストも表示出来ます。最初に表示するときに、Twitterのログイン名とパスワードを入力する必要があります。サービス化するんであれば、OAuth対応する必要があると思います。

以下が、JavaScript部分のソースになります。

// APIベースURL
var api = 'https://api.twitter.com/1/';
// URL引数
var opt = location.href.split("?")[1];

// ユーザー名
var username;
// リスト名
var listname;
// カーソル位置
var cursor;

$(function()
{
	// スラッシュ区切り
	var params = opt.split("/");
	
	// ユーザー名
	username = params[0];
	// リスト名
	listname = params[1];
	// カーソル位置
	cursor = -1;
	
	
	$("#list").append('
');
	var listurl = api + username + "/lists.json?callback={callback}";
	
	$.getJSONP(listurl, function(res) {
		$( res.lists ).each(function() {
			if(this.name == listname) {
				$("#list").empty();
				
				getListMember(this);
			}
		});
	});
});


function getListMember(list)
{
	var listmemberUrl = api + username + "/" + list.id + "/members.json?cursor=" + cursor;
	listmemberUrl += "&callback={callback}";
	
	var block;
	if(cursor < 0) {
		block = "member_0";
	}
	else {
		block = "member_" + cursor;
	}

	$("#list").append('
');
	$.getJSONP(listmemberUrl, function(member) {
		cursor = member.next_cursor;
		showMembers(member.users, block);
		
		if(cursor > 0) {
			getListMember(list);
		}
	});

}

function showMembers(members, blockid)
{
	$("#" + blockid).empty();
	
	var html = "";
	var user;
	$(members).each(function() {
		user = '
';
		user += '
';
		user += '
';
		user += '
' + this.screen_name + '
';
		user += '
名前: ' + this.name + '
';
		user += '
場所: ' + this.location + '
';
		user += '
';
		user += '
フォロー数:: ' + this.friends_count + '
';
		user += '
フォロワー数:: ' + this.followers_count + '
';
		user += '
ツイート数: ' + this.statuses_count + '
';
		user += '
利用開始日: ';
		var createat = getDateString(this.created_at);
		user += createat.getFullYear() + "/" + (createat.getMonth() + 1) + "/" + createat.getDate() + '
';
		
		user += '
';
		user += '
自己紹介: 
' + this.description + '
';
		$("#" + blockid).append(user);
		var css = { "background-image" : "url(" + this.profile_background_image_url + ")", "background-color" : this.profile_background_color,
			"background-repeat" : this.profile_background_tile?"repeat":"no-repeat"};
		$("#user_" + this.id).css(css);
	});
	
	
}

function getDateString(datestring)
{
	// 日時データを要素分解
	var created_at = datestring.split(" ");
	// 投稿日時変換 "Mon Dec 01 14:24:26 +0000 2008" -> "Dec 01, 2008 14:24:26"
	var post_date  = created_at[1] + " "
	               + created_at[2] + ", "
	               + created_at[5] + " "
	               + created_at[3];
	// 日時データ処理
	var date = new Date(post_date);     // 日付文字列 -> オブジェクト変換
	date.setHours(date.getHours() + 9); // UTC -> JST (+9時間)
	
	return date;
}

まぁ、用途としては、オフ会参加者をリストにいれておいて、プロフィールの一覧を出しておきたいなとかいうときに使えるかなと思います。