Koichi Labs Blog

「Twitterのリストに登録されている人一覧」をOAuthに対応してみました。

前回のiTunes2Twitterの時と同じく、phpでproxyしてOAuthに対応する方法にしました。初めてのアクセス時に、Twitterの認証確認のウインドウが表示されて、承認すると一覧が表示されるようになります。
これによりJavascript経由でOAuthを利用してTwitterのAPIへのアクセスを擬似的に可能にしています。

javascript部分のソースが変わってますが、認証部分はphpのproxy側でやってるので、詳細は省略します。

var baseurl = "http://labs.s-koichi.info/oauthproxy/twproxy.php";
// 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;
	
	document.title = opt + "の一覧";
	
	$("#list").append('<div style="width: 500; text-align: center;"><img src="loading.gif" width="100" height="100" border="0" /></div>');
	
	getLists();
});

function getLists()
{
	var listurl = baseurl + '?action=lists&pushback=getLists&username=' + username + '&callback={callback}';
	
	$.getJSONP(listurl, function(res) {
		if(res.js == undefined) {
			$( res.lists ).each(function() {
				if(this.name == listname) {
					$("#list").empty();
					
					getListMember(this);
					
					return false;
				}
			});
		}
		else {
			eval(res.js);
		}
	});

}


function getListMember(list)
{
	var listmemberUrl = baseurl + '?action=list_members&username=' + username + "&list_id=" + list.id + "&cursor=" + cursor;
	listmemberUrl += "&callback={callback}";
	
	var block;
	if(cursor < 0) {
		block = "member_0";
	}
	else {
		block = "member_" + cursor;
	}

	$("#list").append('<div id="' + block + '"><div style="width: 500; text-align: center;"><img src="loading.gif" width="100" height="100" border="0" /></div></div>');
	$.getJSONP(listmemberUrl, function(member) {
		cursor = member.next_cursor_str;
		showMembers(member.users, block);
		
		if(cursor > 0) {
			getListMember(list);
		}
	});

}

function showMembers(members, blockid)
{
	$("#" + blockid).empty();
	
	var html = "";
	var user;
	$(members).each(function() {
		user = '<div class="member" id="user_' + this.id + '"><div class="info">';
		user += '<div class="icon"><img src="' + this.profile_image_url + '" width="80" /></div>';
		user += '<div class="profile">';
		user += '<div class="name"><a href="http://twitter.com/' + this.screen_name + '" target="_blank">' + this.screen_name + '</a></div>';
		user += '<div class="name">名前: ' + this.name + '</div>';
		user += '<div class="location">場所: ' + this.location + '</div>';
		user += '<div class="follow">';
		user += '<p>フォロー数: ' + this.friends_count + '</p>';
		user += '<p>フォロワー数: ' + this.followers_count + '</p>';
		user += '<p>ツイート数: ' + this.statuses_count + '</p>';
		user += '<p>利用開始日: ';
		var createat = getDateString(this.created_at);
		user += createat.getFullYear() + "/" + (createat.getMonth() + 1) + "/" + createat.getDate() + '</p>';
		
		user += '</div></div></div>';
		user += '<dl class="discription"><dt>自己紹介: </dt><dd>' + this.description + '</dd>';
		if(this.url != null) {
			user += '<dt>URL: </dt><dd><a href = "' + this.url + '" target="_blank">' + this.url + '</a></dd>';
		}
		user += '</dl></div>';

		$("#" + 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;
}

URLは前回と同じままですが、使用例です。
http://labs.s-koichi.info/mashup/twitter/listmembers.html?koichi99/famous-people