2010年10月13日 21:21

jQueryでTwitter検索の結果をべろべろーと表示させるスクリプト

スポンサードリンク

ここまでやったらjQueryのプラグインにすればいいんじゃねえかとは思うがめんどくせえ。あとJavascriptの書き方のスタイルが古くさいとかいうのはそのうち勉強し直します......

ソース。放課後うちで作ったやつだから会社で使ったりしてもほかの人が使ったとしても問題あるめえ。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type"
      content="text/html; charset=UTF-8" />
    <title>Twitter Realtime</title>
    <meta http-equiv="Content-Script-Type"
      content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" href="//yui-s.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
 
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    var Tw = function( f ) {
      this.id = new Date().getTime();
      this.targetId = f.targetId;
      this.freq     = f.freq;
      this.data     = f.data;
      this.innerId  = 'tw' + this.id;
      var html = '<ul id="' + this.innerId + '"></ul>';
      $(function() {
        $( '#' + f.targetId ).append( html );
      });
      return;
    };
    Tw.prototype = {
      show: function ( f ) {
        var self = this;
        var target = '#' + self.innerId;
        var d = new Date;
        d.setTime( Date.parse( f.created_at ) );
        var datestrings = (
          d.getFullYear () + '/'
          + ( '0' + ( d.getMonth() + 1) ).slice(-2) + '/' 
          + ( '0' + d.getDate   () ).slice(-2) + ' ' 
          + ( '0' + d.getHours  () ).slice(-2) + ':' 
          + ( '0' + d.getMinutes() ).slice(-2) + ':' 
          + ( '0' + d.getSeconds() ).slice(-2)
        );
        var s = $(
          '<li />',
          {
            css  : { display: 'none' },
            html :
                '<a class="stream-item-wrapper" '
              +   'href="http://twitter.com/#!/' + f.from_user
              +   '/status/' + f.id + '" target="_blank">'
              +   '<img class="user-profile-link" '
              +     'width="48" height="48" src="'
              +     f.profile_image_url + '" />'
              +   '<span class="tweet-content">'
              +     '<span style="display: block;">'
              +       '<span class="tweet-user-name">'
              +         f.from_user
              +       '</span>&nbsp;'
              +       '<span class="tweet-text">' + f.text
              +       '</span>'
              +     '</span>'
              +     '<span class=tweet-date>' + datestrings
              +     '</span>'
              +   '</span>'
              + '</a>'
          }
        ).addClass('stream-item').prependTo ( target );
        s.slideDown('slow');
        $( target ).children().slice( self.data.rpp ).remove();
        return;
      },
      callback: function ( f ) {
        var self = this;
        self.max_id = f.max_id;
        $.each( f.results.reverse(), function( i, item ) {
          self.show(item);
        });
        return;
      } ,
      getJSONP: function ( f ) {
        var self = this;
        var data = self.data;
        if ( typeof f != 'undefined') {
          data.since_id = f;
        }
        $.ajax({
          type: 'GET',
          url : 'http://search.twitter.com/search.json',
          data: data,
          dataType: 'jsonp',
          success : function( data, status ) {
            self.callback( data );
          }
        });
        return;
      },
      start: function() {
        var self = this;
        $( function() {
          self.getJSONP();
          self.timerId = setInterval(
            function() { self.getJSONP( self.max_id ); },
            self.freq
          );
        });
        return;
      }
    };
    // ]]>
    </script>
    <script type="text/javascript">
    // <![CDATA[
    var t = new Tw({
      targetId: 'twitterzone', 
      freq:      60000,
      data: { q: '#agqr', rpp: 4, lang :'ja' } }
    );
    t.start();
    // ]]>
    </script>
    <style type="text/css">
    #twitterzone ul {
      background-color: #f7f7f7;
      height: 276px;
      overflow: hidden;
    }
    li.stream-item {
      border-bottom: 1px solid #EBEBEB;
      clear: both;
    }
    li.stream-item a.stream-item-wrapper {
      display: block;
      padding: 10px 20px 10px 20px;
      position: relative;
      text-decoration: none;
    }
    .stream-item img {
      float: left;
      border: 0px;
    }   
    .stream-item .tweet-user-name {
      font-weight: bold;
      float: left;
      color: black;
    }   
    .tweet-content {
      display: block;
      margin-left: 58px;
      min-height: 48px;
      color: black;
    }   
    .tweet-date {
      color: #666;
      font-size: 86%;
    } 
    </style>
  </head>
  <body>
    <div id="doc" class="yui-t7">
 
      <div id="hd"><h1>Twitter Realtime</h1></div>
      <div id="bd">
        <div class="yui-g">
          <!-- YOUR DATA GOES HERE -->
 
          <div id="twitterzone">
          </div>
 
        </div>
 
      </div>
      <div id="ft"><p>---</p></div>
    </div>
  </body>
</html>

2010.10.13 21:21 投稿　大野義貴 [Web] | 固定リンク |

スポンサードリンク

トラックバック(1)

トラックバックURL: http://blog.dtpwiki.jp/MTOS/mt-tb.cgi/3373

M.C.P.C. - Twitter検索の結果をべろべろーと表示させるjQueryプラグイン (2010年10月16日 16:06)

この前書いたjQueryを使ったTwitter Searchをべろべろーっと表示させるJavascriptなんですけれども、jQueryのプラグインになるように書き直してみたよ。 ?xml version="1.0" encoding="UTF-8"? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="http:... 続きを読む