Twitterで「i.imgur.com」を含むつぶやきの検索結果を取得し、画像付きのツイート最新6件を表示。
<!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>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script> <!-- JS --> <script type="text/javascript"> $(function(){ //「i.imgur.com」をTwitter検索 var url="http://search.twitter.com/search.json?q=i.imgur.com&rpp=100&callback={callback}"; //(特定のユーザーが投稿した写真のみ検索する場合) //var url="http://search.twitter.com/search.json?q=i.imgur.com+from%3Acocoism&rpp=100&callback={callback}"; $.getJSONP(url, function(json){ var s,formatStr; var j=0; $.each(json.results, function(i, item){ formatStr=formatTwitterString(item.text); if(formatStr.indexOf(' class="thumb"')>0){ if(j>5) return; s="<li><div class='box'>"; s+="<p><a href='http://twitter.com/"+item.from_user+"' class='prof'><img src='"+item.profile_image_url+"' alt='@"+item.from_user+"' /></a> @<a href='http://twitter.com/"+item.from_user+"' class='prof'>"+item.from_user+"</a></p>"; s+="<p>"+formatStr+"</p>"; s+="<div><a class='pubdate' href='http://twitter.com/"+item.from_user+"/statuses/"+item.id_str+"'>"+relativeTime(item.created_at)+"</a></div>"; s+="</div></li>"; $("#tw ul").append(s); j++; } }); }); }); // リンク内につぶやきを含むURLに変更 function formatTwitterString(str){ str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>'); str = str.replace(/@(\w+)/gm,'<a href="http://twitter.com/$1" target="_blank">@$1</a>'); str = str.replace(/#(\w+)/gm,'<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>'); str = str.replace(/>(http:\/\/i\.imgur\.com\/)([\w\-]+?)(\.jpg)(<\/a>)/gm,' class="thumb"><img src="http://i.imgur.com/$2s.jpg" /></a><a href="$1$2$3">$1$2$3</a>'); return str; } function relativeTime(pastTime){ var origStamp = Date.parse(pastTime); var curDate = new Date(); var currentStamp = curDate.getTime(); var difference = parseInt((currentStamp - origStamp)/1000); if(difference < 0) return false; if(difference <= 5) return "いまさっき"; if(difference <= 20) return "数秒前"; if(difference <= 60) return "1分以内"; if(difference < 3600) return parseInt(difference/60)+" 分前"; if(difference <= 1.5*3600) return "One hour ago"; if(difference < 23.5*3600) return Math.round(difference/3600)+" 時間前"; if(difference < 1.5*24*3600) return "1日前"; var dateArr = pastTime.split(' '); return (parseInt(difference / 86400)).toString() + '日前'; } </script> <style type="text/css"> #tw { margin:0; padding:0; border:1px solid #ccc; font-size:11px; background:#eee; webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; overflow:hidden; } #tw ul { list-style:none; margin:0; padding:5px; overflow:hidden; } #tw p { margin:0; padding:0; /*text-overflow:ellipsis; overflow: hidden; white-space:nowrap;*/ } #tw li { margin:5px; padding:0; float:left; width:48%; position:relative; height:92px; overflow:hidden; } #tw li .box { margin:0; padding:0 0 0 100px; } #tw a.prof img { width:24px; height:24px; vertical-align:middle; webkit-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; } #tw a.thumb { position:absolute; width:92px; height:92px; top:0; left:0; overflow:hidden; } #tw a.thumb img { border:1px solid #000; } </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>設置サンプル</h1> <p>Twitterで「i.imgur.com」を含むつぶやきの検索結果を取得し、画像付きのツイート最新6件を表示。</p> <!-- CODE --> <div id="tw"> <ul></ul> </div> <!-- / CODE --> </div> </body> </html>