JSONP とかよくわからないけど・・

JSON yoropico Twitter

ともかく、Twitter をいじってみることにする。わからないけど始めることが肝心！

まずはコピペだけでできそうなことからやってみよう。これ↓をマネする。

JSONPのTwitterAPIを試してみました - blog.katsuma.tv

(test01.js)
function loadTwitter_test01(id){
	//var id = "8440992";
	var api = "http://twitter.com/statuses/user_timeline/" + id + ".json?callback=viewTwitter&count=1";
	var s = document.createElement('script');
	var head = document.getElementsByTagName('head').item(0);

	s.setAttribute('type', 'text/javascript');
	s.setAttribute('src', api);
	s.setAttribute('charset', 'UTF-8');
	head.appendChild(s);
}

function viewTwitter(json){
	//console.log(json);
	var states = json;
	var latest_state = states[0];
	$('twitt').innerHTML = latest_state.text;
	$('screen_name').innerHTML = latest_state.user.screen_name;
	$('url').innerHTML = latest_state.user.url;
}

というスクリプトを書いておいて、この↓ HTML を表示してやると、Twitter から最新のつぶやき（twitt）を取って来て表示してくれる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>twitter test01</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/test01.js"></script>
</head>

<body>
<script type="text/javascript">
  loadTwitter_test01('8440992');
</script>
<div id="twitt"></div>
<div>by <span id="screen_name"></span></div>
<div id="url"></div>
</body>
</html>

実行結果：twitter_test01


とりあえず動いたけど、viewTwitter(json) 関数がなぜ自動的に呼び出されるのかわからない。この関数の名前を viewTwitter_test01(json) に変えるとうまく動かなくなるし。JSONP というやつに関数名に関する規約があるのかも知れない。にしても、どういう規約なんだかさっぱりわからない。この辺は課題だな。


今後の課題：JSONP について少し勉強すること！