Twitterの色んな値をJSONで取得する方法
今後必要になるだろうと思い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;\'()*+,;=%]+)/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.値
と「値」の部分を変えるだけで好きな値を取得出来ます。
- Web-Parkのホーム >
- Javascript >
- Twitterの色んな値をJSONで取得する方法
- オススメ本（既読）
-
- 読んでみたい本（未読）
-
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「Twitterの色んな値をJSONで取得する方法」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
https://web-park.org/javascript/twitter_json.html/trackback
COMMENT!!
[…] [jQuery(JavaScript) で取得する方法] Twitterの色んな値をJSONで取得する方法 | WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介 […]
[…] とかにしてます。 ソースはここやここを大いに参考にしてます。 […]
[…] で、テキストウィジェットを使うことに。実際の読み込みは Twitterの色んな値をJSONで取得する方法 | WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介 を参考にさせてもらった。 […]