「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