2010年11月16日 20:48

Twitterの特定ユーザがフォローしている人の数を表示させる（jQuery使用）

スポンサードリンク

Twitterの特定ユーザがフォローしている数を知りたいとき、ちゃんとTwitterのAPIを使って、jQueryで取得するときの基本的な書き方。

$.ajax({
  type    : 'GET',
  url     : 'http://twitter.com/users/show/CLCLCL.json',
  dataType: 'jsonp',
  success : function( d ) { alert( d.friends_count ); }   
});

実際に取得できるJSONをみると、どうやって必要な数値を選べるかというのが推測できると思うよ。

{
  "profile_background_image_url":"http:\/\/s.twimg.com\/a\/1287523226\/images\/themes\/theme1\/bg.png",
  "description":"\u5f7c\u5973\u52df\u96c6\u4e2dPC\u306b\u300c\u30cd\u30bf\u753b\u50cf\u30d5\u30a9\u30eb\u30c0\u300d\u6301\u3063\u3066\u308b\u5b50\u9650\u5b9a\/\u8abf\u67fb\u95a2\u9023\/docomo2\u56de\u7dda(Android+\uff76\uff9e\uff97\uff79\uff70)\/iPad(Wi-Fi)\u306fHT-03A\u30c6\u30a3\u30b6\u30ea\u30f3\u30b0\u3067\/\uff97\uff8c\uff9e\uff8c\uff9f\uff97\uff7d\u306f\u51db\u5b50",
  "verified":false,
  "screen_name":"CLCLCL",
  "status":{
    "place":null,
    "retweeted":false,
    "in_reply_to_status_id_str":null,
    "in_reply_to_user_id":null,
    "truncated":false,
    "in_reply_to_user_id_str":null,
    "id_str":"4385132047769600",
    "source":"\u003Ca href=\"http:\/\/www.amazon.co.jp\/gp\/search?ie=UTF8&keywords=%E5%A1%A9%E8%BE%9B&tag=dtpwiki-22&index=food-beverage&linkCode=ur2&camp=247&creative=1211\" rel=\"nofollow\"\u003E\u5a5a\u6d3b\u4e2d\u306a\u3093\u3060\u003C\/a\u003E",
    "favorited":false,
    "geo":null,
    "created_at":"Tue Nov 16 04:07:51 +0000 2010",
    "contributors":null,
    "in_reply_to_screen_name":null,
    "coordinates":null,
    "retweet_count":null,
    "id":4385132047769600,
    "in_reply_to_status_id":null,
    "text":"\u300c\u30ae\u30fc\u30af\u30cf\u30a6\u30b9\u300d\u306epha\u3055\u3093\u3092\u30d5\u30a9\u30f3\u30c8\u5c4b\u3055\u3093\u306e\u96c6\u307e\u308a\u306b\u547c\u3093\u3067\u5c0f\u585a\u30d5\u30a9\u30f3\u30c8\u306e\u30e9\u30a4\u30bb\u30f3\u30b9\u306e\u4ef6\u3067\u30d5\u30eb\u30dc\u30c3\u30b3\u308b\u3068\u3044\u3046\u306e\u306f\u3069\u3046\u304b http:\/\/d.hatena.ne.jp\/pekkopeko\/20101113\/1289645904"
  },
  "follow_request_sent":false,
  "profile_background_tile":false,
  "profile_background_color":"C0DEED",
  "id_str":"14119989",
  "profile_text_color":"333333",
  "url":null,
  "listed_count":32,
  "lang":"ja",
  "time_zone":"Tokyo",
  "created_at":"Tue Mar 11 03:26:56 +0000 2008",
  "profile_link_color":"0084B4",
  "location":"",
  "statuses_count":7006,
  "notifications":false,
  "protected":false,
  "show_all_inline_media":false,
  "friends_count":255,
  "profile_sidebar_fill_color":"DDEEF6",
  "name":"CL",
  "contributors_enabled":false,
  "following":false,
  "profile_use_background_image":true,
  "favourites_count":66,
  "id":14119989,
  "geo_enabled":true,
  "utc_offset":32400,
  "profile_sidebar_border_color":"C0DEED",
  "followers_count":249,
  "profile_image_url":"http:\/\/a2.twimg.com\/profile_images\/1168459578\/0_normal.png"
}

d.friends_count で、"friends_count":255, の部分の数字がとれる。

"created_at":"Tue Nov 16 04:07:51 +0000 2010", の所をとりたい場合は、実際には

{
 "status":{
    "created_at":"Tue Nov 16 04:07:51 +0000 2010",
  }
}

となっているから、JavaScriptでは d.status.create_at という形で取得できる。

実際に使う場合はこんな感じにするかな。

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
></script>
 
<script type="text/javascript">
// <![CDATA[
　
　
/* Twitter API読み込み設定 */
　
$.ajax({
  type    : 'GET',
  url     : 'http://twitter.com/users/show/CLCLCL.json',
  dataType: 'jsonp',
  success : function( data ) { 
    showFriendsCount( data );
  }   
});
 
 
/* JSONが読み取られたときに呼ばれる（コールバック） */
 
function showFriendsCount( data ) {
  $('#friendscount').html( data.friends_count );
}
// ]]>
</script>
 
 
<p>このユーザがフォローしている人の数は<span id="friendscount"></span>です。</p>

2010.11.16 20:48 投稿　大野義貴 [Web] | 固定リンク |