K's Labo 3G

 Twitter でのつぶやきをブログに表示

前のエントリーで、「Twitter」の使い方がよく分からないって書きましたが、使ってみれば、そんな事なかったです。簡単、簡単。あの悩んでた時間は、いったい何だったんだろうか？

んで、せっかく「Twitter」を使い始めたんだから、普通に使っててはおもしろくないってことで、「Twitter」でのつぶやき（？）をブログに表示できるようカスタマイズを実施しました。

今回カスタマイズを実施するうえで参考にさせてもらったサイトは以下の2つ。

先日より、Twitterのブログパーツを使って、ブログのトップページに自分の最新情報を表示させていましたが、表示に違和感あったので、日本語化＆改造をしてみました。E | Twitterブログパーツを改造 | ENSIS Note3.5
遅ればせながら、Twitterを始めました。流行し始めたときは、ちょっと余裕がなくて、今やっと手をつけました。KOROPPYの本棚 : Twitterの開始と、Badgesのカスタマイズ

んでもって、上記のサイトを参考にしつつ、完成したソースが以下の通り。

出来上がったソース

  1. <script type="text/javascript">
  2. function relative_time(time_value) {
  3. time_values = time_value.split(" ");
  4. time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
  5. var parsed_date = Date.parse(time_value);
  6. var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  7. var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  8. delta = delta + (relative_to.getTimezoneOffset()*60);
  9. if(delta < 60) {
  10. return '1分以内';
  11. } else if(delta < 120) {
  12. return '約1分前';
  13. } else if(delta < (45*60)) {
  14. return (parseInt(delta / 60)).toString() + '分前';
  15. } else if(delta < (90*60)) {
  16. return '約1時間前';
  17. } else if(delta < (24*60*60)) {
  18. return '約' + (parseInt(delta / 3600)).toString() + '時間前';
  19. } else if(delta < (48*60*60)) {
  20. return '昨日';
  21. } else {
  22. return (parseInt(delta / 86400)).toString() + '日前';
  23. }
  24. }
  25. function twitterCallback(obj) {
  26. var t = document.getElementById('twitter');
  27. t.innerHTML += '<ul>';
  28. for ( i=0; i<obj.length; i++) {
  29. t.innerHTML += '<li>' + obj[i].text + '&nbsp;：&nbsp; ' + relative_time(obj[i].created_at) + '</li>';
  30. }
  31. t.innerHTML += '</ul>';
  32. }
  33. </script>
  34. <div id="twitter"></div>
  35. <script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/あなたのUsername.json?callback=twitterCallback&count=表示件数"></script>

赤字の箇所は、あなたのUsernameを、青時の箇所は表示件数を指定してください。

まぁ、一風変わったブログパーツですが、日々のつぶやき（？）をお知らせするには、あり（？）かと・・・。

それと、当然の話ですが上記のソースを利用するには、事前に「Twitter」への登録が必要となります。
登録にあたっては、下記のサイトがとても参考になります。ご覧ください。

ここでは「いま何してる？」で ゆるくつながるコミュニケーションサービス「Twitter」の使い方をご紹介します。Twitter をはじめよう！ - GreenSpace

お友達探しはこちら。

Twitter

http://twitter.com/
非常にゆる～い、コミニケーション



 Trackback Pings(1)

from Design Lab

K’s Labo 3Gさんのサイトで、Twitterのつぶやきを表示するサンプルが紹介されています。 これを元に、同ページに2種類のつぶやきを...

Tracked on November 27, 2009

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード