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>