jQueryでTwitter検索作った
できるフリして実はできないjQueryをそろそろ何とかしないとと思って、昨夜急に勉強がてらjQueryだけで動くTwitter検索を作ってみた…わけなんだけど特に需要はなさそうだなこれ。まぁいいか…。
つゐったー検索(GitHub)
APIはsearch.twitterの方のAPIを使ってみた。Twitter本体のAPIより機能はだいぶ少ないが作りが単純なので、私のようなajax初心者が何か試してみるにはよいと思う。しかし、取得IDが本体に比べて下一桁だけ微妙にズレてたりとか割とダメダメです。
モバイル用にしたいわけでもなかったんだけど、気づいたらiPhone用っぽいデザインになってた。モバイルファーストや。また木目調とか言うなヽ(`Д´)ノ
<script type="text/javascript"> $(function(){ $("form").submit(function(){ $("#search").empty(); //検索結果を一旦空にする var keyword = $(":text").val()+" lang:ja"; //入力キーワード( +lang:ja) $.getJSON('http://search.twitter.com/search.json?callback=?', { q: keyword, //検索クエリ show_user: true, //ユーザー名表示 rpp:100 //100件まで取得 },test); return false; }); function test(data,status){ if(status=="success"){ for(var i=0;i<10;i++){ var profileImageUrl = data.results[i].profile_image_url; //Twitterアイコン var text = data.results[i].text; //投稿内容(テキスト) var user = data.results[i].from_user; //ユーザー名(screen name) var created = data.results[i].created_at; //投稿日時 var source = data.results[i].source; //利用クライアント(使用せず) //var postId = data.results[i].id; //個別投稿のID(※訂正前:"id"はズレる。使用中止) var postId = data.results[i].id_str; //個別投稿のID(※訂正後:"id_str"ならOK) var userProfile = "http://twitter.com/#!/"+user; //ユーザーのURL var permaLink = "http://twitter.com/#!/"+user+"/status/"+postId; //パーマリンクURL $("#search").append("<div class='post post"+i+"'><p class='icon'><a href='"+userProfile+" ' target='_blank'><img src='"+profileImageUrl+"' / alt='"+user+"' /></a></p><div class='wrapper'><p class='user'><a href='"+userProfile+"' target='_blank'>"+user+"</a></p><p class='text'>"+text+"</p><p class='created'><a href='"+permaLink+"' target='_blank'>"+created+"</p></div></div>"); $(".post"+i).fadeIn("slow").animate({ 'marginTop':"10px"}); } }else{ alert("処理に失敗しました"); } } }); </script>
少し前述したように、search.twitter APIの方の問題で、個別POSTのIDが本物と下一桁ぶんだけズレてることが多いので、投稿日時からパーマリンクに飛ばしてるんだけど、体感で約7割くらい間違ってます。約2〜3割くらいは正しいURLに飛ぶので、占いとかに験担ぎとかに使うといいと思うw(ex:このPOSTが正しいURLに飛んだら今日はいいことあるに違いない!)
(2012/04/13訂正)
id:yamada-22 さんよりコメント欄にて、"id"がズレるのはSnowflake IDリリース以後の既知の問題なので、"id_str"を使えばOK というご指摘をいただきまして、訂正いたしました。おお、ズレない。ありがとうございました!m(__)m
あと、.appendと.prepend間違えてツイートが逆に並んでしまっていたのでこっそり修正。。
今後(気が向いたら)やってみよう
submitしたら前回のPOSTを消す|ωΦ)さっきこっそり対応- POSTの最後にもっと見るボタンを出して追加読み込み
- プリローダー
- 動きとかかっこよく
- ボタンで色んなパラメータ設定(ex: RT除く、mension除く、日本語のみ)
- $("#search").append のところでわらわらとhtml書いてるところって、もっといい書き方ないのかな…(これしか知らないけど不便だし汚い)
- 検索結果が0件だった時にアラート
- 投稿本文中のURL、mentionをリンクに
- 週1くらいは勉強時間捻出したい。