Twitterの色んな値をJSONで取得する方法

Javascript

2010.06.19

今後必要になるだろうと思いTwitterの値の取得方法を調べてみました。
使用するのは、TwitterAPIとjQueryです。

TwitterAPIの値をみる

まず、TwitterAPIの中身を覗いてみよう。
下記URLの「アカウント」に自分のIDを入れて開くと。。。

http://api.twitter.com/1/statuses/user_timeline/アカウント.json

ずらっと表示さた文字がTwitterAPIの中身です。

値は全て配列になっている

文字列の嵐だがよくみてみると、配列になっている。
例えば。。。

“source”:”web”,”created_at”:”Fri Jun 18 07:28:41 +0000 2010″

はwebでツイートしてその時間が表されています。
ですので、中身は簡単に理解できると思います。

$.getJSONでTwitterAPIの値を取得

先ほどのTwitterAPIの値を表示させるには$.getJSON関数を使用します。
これはjQueryの関数で、外部サイトの値を取得することができます。
取得したデータはJSONとして評価されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Twitterの色んな値をJSONで取得する方法</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(function(){
	var account = "TwitterのIDを入力して下さい";
	var twitAPI = "http://api.twitter.com/1/statuses/user_timeline/"+account+".json?callback=?";
	function jsonTwit(){
		$.getJSON(twitAPI, function(data){
			var desp = data[0].user.description;
			$("<p></p>").html(desp).prependTo("#description")
			$.each(data, function(i, item){
				var txt = item.text
				.replace(/(https?:\/\/[-a-z0-9._~:\/?#@!$&amp;amp;amp;\'()*+,;=%]+)/ig,"<a href='$1'>$1</a>")
				.replace(/@+([_A-Za-z0-9-]+)/ig,"<a href='http://twitter.com/$1'>@$1</a>")
				.replace(/#+([_A-Za-z0-9-]+)/ig,"<a href='http://search.twitter.com/search?q=$1'>#$1</a>");
				$("<li></li>").html(txt).prependTo("#tweet");
				if(i == 4){ return false; }
			});
		},"json");
	};
	jsonTwit();
});

</script>
</head>

<body>
	<div id="description"></div>
	<ul id="tweet"></ul>
</body>
</html>

ソースの簡単な解説

9行目
account変数に入れたTwitter IDのツイートが表示されます。
13行目 data[0].user.description
最初の配列の”user”の”description”の値を取得。
これは紹介文のことです。
15行目 – 22行目
TwitterAPIの配列をeachで上から順番に取得します。
変数txtに”item”の値を代入します。これはツイートです。
ツイートにリンクがあれば.replaceで設定しています。
最後のif文は表示数設定です。

色んな値を取得してみる

上記のJSONのdataにTwitterAPIの配列が格納されているので。。。

data.値

と「値」の部分を変えるだけで好きな値を取得出来ます。

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. Twitterの色んな値をJSONで取得する方法
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

COMMENT PLEASE!!

トラックバック

「Twitterの色んな値をJSONで取得する方法」のトラックバックURL
http://web-park.org/javascript/twitter_json.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook