モーグルとカバとパウダーの日記 このページをアンテナに追加 RSSフィード Twitter

モーグルやカバ(EXカービングスキー)、山スキー(BC)の山行記録などがメインの日記です。
いろんな条件のいろんなところを、その時々の条件にあった滑り方で楽しむ、フリースキーをして遊んでいます。

検索で来られた方は、上の検索窓から再度検索していただくか、右サイドバーのカテゴリーやトピックスの項目で絞り込んでみてください。
仕事柄、コンピュータ系のネタも多いので、スキー関連ネタだけ読みたい方は[ski]、コンピュータ関連ネタは[pc]、スパム関連ネタは[spam]で絞り込んでください。

2010-05-31 (Mon)

[]ハッシュタグなどでtwitter検索した結果を表示して自動更新するjavascript ハッシュタグなどでtwitter検索した結果を表示して自動更新するjavascriptを含むブックマーク ハッシュタグなどでtwitter検索した結果を表示して自動更新するjavascriptのブックマークコメント

ハッシュタグなどでtwitter検索した結果を表示して自動更新するページを作りたいと思い、いろいろと調べてました。

で、twitter API使うとjavascriptで検索結果を得ることができるということがわかったので、javascriptだけでtwitter検索した結果を表示し、それを自動更新し続けるスクリプトを作成しました。

最終的にはPukiWikiプラグイン化する予定ですが、出来上がって嬉しかったのでとりあえずスクリプト部分のソースを公開します。


(追記)

このスクリプトをベースにしてPukiWiki用のTwitterプラグインを作りました。

こちらもご参照ください。

PukiWiki用Twitterプラグイン - モーグルとカバとパウダーの日記

(/追記)


(追記)

Twitterウィジェットを使えばよかったんですよね… 調べてた頃はこのウィジェット知らなくて

http://twitter.com/widgets

(/追記)


スクリプト部分の最後に出てくる

updateLoop("#ipadjp", 30);

が実際に検索させているところで、ここでは「#ipadjp」というハッシュタグのついた最新30tweetを拾ってきています。

ここを呼び出すように変更すれば、PukiWikiに限らずいろんなCMS向けのプラグインを簡単に作れると思います。


<div style="overflow:auto;height:30ex">
    <ul id="twitter_update_list"></ul>
</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript">
function updateLoop(search_word, count) {
  var update_time = 2*60; // sec
  var callback_func = "twitterSearchCallback";
  var api_url = "http://search.twitter.com/search.json?q="
	+encodeURIComponent(search_word)+"&rpp="+count+"&callback="+callback_func;
  callJSONP(api_url);
  timerID = setInterval(function(){callJSONP(api_url)},update_time*1000);
}

function twitterSearchCallback(searchs) {
  var s = convertSearchedTweets(searchs);
  document.getElementById("twitter_update_list").innerHTML = "<ul>"+s+"</ul>";
}

function convertSearchedTweets(searchs) {
  var s="";
  for(var i in searchs["results"]){
    var username = searchs["results"][i].from_user;
    var id = searchs["results"][i].id;
    var profile_image_url = searchs["results"][i].profile_image_url;
    var reltime = relative_time(searchs["results"][i].created_at);
    var status = searchs["results"][i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    s+='<li><img src="'+profile_image_url+'" width=48 height=48> <a href="http://twitter.com/'+username+'">'+username+'</a>: <span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+id+'">'+reltime+'</a></li>';
  }
  return s;
}

function callJSONP(url) {  
  var target = document.createElement('script');  
  target.charset = 'utf-8';  
  target.src = url;  
  document.body.appendChild(target);  
}

updateLoop("#ipadjp", 30);
</script>

これを作るに当たって下記エントリーが大変参考になりました。この場を借りてお礼いたします。ありがとうございます。


twitterPukiWiki上で表示させるときに使うプラグイン : Curo.jp

http://curo.jp/83


JSONPを使ってJavaScriptだけでマッシュアップ (Yahoo! JAPAN Tech Blog)

http://techblog.yahoo.co.jp/cat207/web_1/jsonpjavascript/

hkobahkoba 2010/05/31 21:37 ペダル無し自転車、そこそこしますね〜(><
以前読んだ漫画(並木橋通りアオバ自転車店)に、普通の自転車から
ペダル(の足乗せ?)を外して練習するシーンが出てました。
そういう路線もあるかもです〜

こうじこうじ 2010/06/01 00:27 普通のんでも、すぐに乗れるようになりますよ…(^^;;

stealthinustealthinu 2010/06/01 09:39 >>hkobaさん
どもです。
そうなんですよ、そこそこするもんで安いの探しちゃいました。
あー、ペダルはずすっていう手もあるんですね。
自転車はすでにあるのですが、うちの子は小さいので、まず自転車が重いというのもあるみたいです。
転びそうになったときに足を付いて自転車を支えられないという。でかいバイクで立ちゴケする恐怖、みたいな。
なので軽いこの手の自転車がいいのかな〜と思っていました。

>>こうじさん
いやーそれが、普通のんで練習してたんですがなかなかできるようにならなくて…
女の子で小さいのと、怖がりなのとで、なかなか効果的に練習が出来なくって。
同じ学年の超運動神経良い子とかだと、2歳くらいから?補助輪無しで乗れたとか…

こうじこうじ 2010/06/01 20:30 無理せず、補助輪ありで、楽しく遊ばせてやったらいいと思うよ。
力がついて速くこげるようになったら、どうせすぐに補助輪なんて取って大丈夫になると思うし。

stealthinustealthinu 2010/06/02 15:31 それが、補助輪つきの自転車を別に楽しんでくれないんですよ…
というか自転車乗ること自体、別にそれほど楽しくないようで。
こんな土地に住んでるのにインドア派なんですわ。

こうじこうじ 2010/06/03 00:10 それではペダルなしでも同じような…(^^;;
家族で自転車で出かけなされ。
でも、坂ばっかだしなぁ…。
乗りたくない気持ちもわかる…(笑)

stealthinustealthinu 2010/06/07 11:12 家族で自転車で出かけるには子供の根性がなさすぎて無理っす :)
白馬、それほど坂ばっかでもないですよ。…という感想は、自分が普段あまり自転車乗らないからかなあ?

鰻 2010/11/23 19:41 はじめまして。いつも参考にさせて頂いております。
初心者の質問で申し訳ないのですが、ハッシュタグを2つ設置し、2つの最新ツイートを、表示させる方法はあるでしょうか?
例:#1111 ついーと 1dayago
  #2222 ついーと 2dayago
  #2222 ついーと 2dayago
  #1111 ついーと 3dayago
教えて頂けると幸いです。

stealthinustealthinu 2010/11/24 10:32 Twitter APIのsearchでも「OR」句が使えるそうなので「#1111 OR #2222」でいけると思います。

鰻 2010/11/24 10:42 ("#1111" OR #2222",@@)でいけました。対応が早くて助かりました。本当にありがとうございます。

mop21cmop21c 2010/11/24 10:42 ("#1111 OR #2222",@@)↑訂正