Twitterのユーザー名を入力し、【Git】ボタンをクリックすると、該当するユーザーのつぶやきが最新の5件だけ表示されます。
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>MooTools TwitterGitter Plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js"></script>
<script type="text/javascript" src="/content/lib/mootools/jsonp.js"></script>
<script type="text/javascript">
var TwitterGitter = new Class({
//implements
Implements: [Options,Events],
//options
options: {
count: 2,
sinceID: 1,
link: true,
onRequest: $empty,
onComplete: $empty
},
//initialization
initialize: function(username,options) {
//set options
this.setOptions(options);
this.info = {};
this.username = username;
},
//get it!
retrieve: function() {
new JsonP('http://twitter.com/statuses/user_timeline/' + this.username + '.json',{
data: {
count: this.options.count,
since_id: this.options.sinceID
},
onRequest: this.fireEvent('request'),
onComplete: function(data) {
//linkify?
if(this.options.link) {
data.each(function(tweet) { tweet.text = this.linkify(tweet.text); },this);
}
//complete!
this.fireEvent('complete',[data,data[0].user]);
}.bind(this)
}).request();
return this;
},
//format
linkify: function(text) {
//courtesy of Jeremy Parrish (rrish.org)
return text.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
}
});
/* usage */
window.addEvent('domready',function() {
$('git').addEvent('click',function(e) {
e.stop();
$('tweets-here').set('html','');
//get information
var myTwitterGitter = new TwitterGitter($('username').value,{
count: 5,
onComplete: function(tweets,user) {
tweets.each(function(tweet,i) {
new Element('div',{
html: '<img src="' + user.profile_image_url.replace("\\",'') + '" align="left" alt="' + user.name + '" /> <strong>' + user.name + '</strong><br>' + tweet.text + '<br><span>' + tweet.created_at + ' via ' + tweet.source.replace("\\",'') + '</span>',
'class': 'tweet clear'
}).inject('tweets-here');
});
}
}).retrieve();
});
});
</script>
<!-- CSS -->
<style type="text/css">
#tweets-here { margin:20px 0 0 0; }
.tweet { padding:5px 10px; height:48px; clear:both; margin:5px 0; background:#eee; }
.tweet img { margin-right:10px; }
.tweet strong { color:navy; }
.tweet span { font-size:11px; color:#666; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://davidwalsh.name/mootools-twitter-plugin'>MooTools TwitterGitter Plugin</a> | 設置サンプル</h1>
<p> Twitterのユーザー名を入力し、【Git】ボタンをクリックすると、該当するユーザーのつぶやきが最新の5件だけ表示されます。</p>
<!-- CODE -->
<form action="" method="get">
<strong>Username:</strong>
<input name="username" id="username" size="30" />
<input type="submit" id="git" class="button" value="Git!" />
</form>
<div id="tweets-here"></div>
<!-- / CODE -->
</div>
</body>
</html>