Twitterのタイムラインを取得するJavascriptを書いてみました。
先人が飽きるほど通ってきた道ですが、書き方には様々な方法が有るとは思うので、共有します。
http://yohawing.com/exp/TwitterApiTest.html
フォームに見たい人のTwitterIDを入れると、その人のTLが読み込まれます。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script src=”jquery.js”></script>
<script>
//グローバル変数の指定
account = “Gniwahoy”; //アカウント名
twapi = “https://api.twitter.com/1/statuses/user_timeline/”+account+”.json?callback=?”;//function gtInpt(){
account = document.form1["text1"].value;
var twapi = “https://api.twitter.com/1/statuses/user_timeline/”+account+”.json?callback=?”;$.getJSON( twapi, function(data){ //APIを呼び出すJqueryの関数
var twSN = data[0].user.screen_name;
var twID = data[0].user.id;
var twEN = data[0].text;
var twDT = data[0].created_at;
$.each( data, function( i, item){ //Jqueryの繰り返し関数
$(“<h2></h2>”).html(“<a href=”>”+item.user.screen_name+”</a>”).appendTo(“#twit”);
//$(“#twit”).html(“<img src=’”+item.user.profile_image_url+”‘/>”);
$(“<p></p>”).html(item.text).appendTo(“#twit”);
$(“<p></p>”).html(twDT).appendTo(“#twit”);
//こういうDOM指定の仕方も有るのですね。
if(i == 20){ return false; }//繰り返しを抜け出す
})
});
};
ここでは使っていないですが、標準のTLを取得する関数です。
function getTL(){
$.getJSON( twapi, function(data){
var twSN = data[0].user.screen_name;
var twID = data[0].user.id;
var twEN = data[0].text;
var twDT = data[0].created_at;
$.each( data, function( i, item){
$(“<h2></h2>”).html(“<a href=”>”+item.user.screen_name+”</a>”).appendTo(“#twit”);
$(“<p></p>”).html(item.text).appendTo(“#twit”);
$(“<p></p>”).html(twDT).appendTo(“#twit”);
if(i == 20){ return false; }
})
});
};
</script>
</head>
<body>
<h1>TwitterApiTest</h1>
<p>TwitterのIDを入力してください。</p>
<form name=”form1″>
<input type=”text” name=”text1″ />
関数gtInpt()をクリックで呼び出しています。
<input type=”button” value=”submit” onClick=”gtInpt()”>
</form>
<div id=”twit”></div>
<p></p>
</body>
</html>
APIを取得する方法が大体解ってきたので、他のAPIにも応用出来るはずだと思います。
思い浮かぶAPIは Twitter,Google+,Facebook,Instagram,Youtube などなど、弄ってみたいAPIは沢山あるので、勉強しながら身に付けていきたいと思います。