2010年10月16日 16:05

《TwitterAPI１.0廃止で動作不能》Twitter検索の結果をべろべろーと表示させるjQueryプラグイン

スポンサードリンク

（2016-03-02追記）Twitter APIが鬼のように変更が入っていて、この記事を書いたと2010年10月ではユーザ認証なしに使えていたTwitter Search APIが、2013年6月12日にTwiiter API 1.0が廃止されて以降現在ではTwitter API 1.1によるOAuth認証下でしか使えなくなっています。また、ここで紹介したスクリプトプラグインをそのままリンクしてTimeline表示していた方もいらっしゃったようなのですが、その後お元気でいらっしゃるでしょうか？ともかく、現在ではこのエントリに書かれたとおりにやっても動作しませんので予めご了承ください。

この前書いたjQueryを使ったTwitter Searchをべろべろーっと表示させるJavascriptなんですけれども、jQueryのプラグインになるように書き直してみたよ。

#cho_ag

#agqr

以下ソース。

Filename: jquery_showTwitter.js

( function( $ ) {
  $.fn.showTwitter = function( options ) {
    var defaults = {
      freq: 60000
    };
    var setting = $.extend( defaults, options );
    setting.id = Math.random().toString().replace( '.', '' );
    setting.innerId  = 'tw' + defaults.id;
    var method = {
      start: function( item ) {
        setting.target = $('<ul>').attr('id', setting.innerId );
        setting.target.appendTo( item );
        return;
      },
      show: function ( f ) {
        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)
        );
        f.user.from_user.replace('<', '&lt;');
        f.user.from_user.replace('>', '&gt;');
        f.text.replace('<', '&lt;');
        f.text.replace('>', '&gt;');
        var s = $(
          '<li />',
          {
            css  : { display: 'none' },
            html :
                  '<a class="stream-item-wrapper" '
              +   'href="http://twitter.com/#!/' + f.from_user
              +   '/status/' + f.id_str + '" 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( setting.target );
        s.slideDown('slow');
        $( setting.target ).children()
          .slice( setting.data.rpp ).remove();
        return;
      },
      getJSONP: function ( f ) {
        var data = setting.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 ) {
            method.callback( data );
          }
        });
        return;
      },
      callback: function ( f ) {
        setting.max_id = f.max_id_str;
        if ( typeof f.results != 'undefined' ) {
          $.each( f.results.reverse(), function( i, item ) {
            method.show(item);
          });
        }
        return;
      }
    }
    this.each(function() {
      method.start(this);
      method.getJSONP();
      setting.timerId = setInterval(
        function() { method.getJSONP( setting.max_id ); },
        setting.freq
      );
    });
    return this;
  };
}) ( jQuery );

Filename: index.html

<?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="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery_showtwitter.js"></script>
    <script type="text/javascript">
    // <[CDATA[
    $(function() {
      $('#twitterzone').showTwitter({
        data: { q: '#cho_ag', rpp: 4, lang :'ja' } }
      );
      $('#twitterzone2').showTwitter({
        data: { q: '#agqr', rpp: 4, lang :'ja' } }
      );
    });
    // ]]>
    </script>
    <style type="text/css">
    #twitterzone ul {
      background-color: #f7f7ff;
      height: 276px;
      overflow: hidden;
      border-top: 1px solid #ebebeb;
    }
    #twitterzone2 ul {
      background-color: #fff7f7;
      height: 276px;
      overflow: hidden;
      border-top: 1px solid #ebebeb;
    }
    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;
    }   
    .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">
            <p>#cho_ag</p>
          </div>
 
          <div id="twitterzone2">
            <p>#agqr</p>
          </div>
 
        </div>
 
      </div>
      <div id="ft"><p>---</p></div>
    </div>
 
  </body>
</html>

極端な話、最低限

<script type="text/javascript"
  src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery_showTwitter.js"></script>
<script type="text/javascript">
// <[CDATA[
$(function() {
  $('#twitterzone').showTwitter({
    data: { q: '#cho_ag', rpp: 4, lang :'ja' } }
  );
  $('#twitterzone2').showTwitter({
    data: { q: '#agqr', rpp: 4, lang :'ja' } }
  );
});
// ]]>
</script>
<div id="twitterzone"></div>
<div id="twitterzone2"></div>

で動きます（jqueryプラグインは自分のサーバに設置しよう）。

検索ワードの設定が

      $('#twitterzone').showTwitter({
        data: { q: '#cho_ag', rpp: 4, lang :'ja' } }
      );

のように出来るのですが、たとえば自分の発言を表示させたい、というのであれば、

      $('#twitterzone').showTwitter({
        data: { q: 'from:CLCLCL', rpp: 4, lang :'ja' } }
      );

で表示できます。

jQueryのプラグインの作り方 | Coder's Note [codersnote.com]

を参考にしました。

（2011-01-25 22:32修正） f.id→f.id_str setting.max_id = f.max_id; → setting.max_id = f.max_id_str; に修正。Twitterのstatus IDが64bit化した際に従来のJSONのパースでは64bit値を整数として扱えなかったため、新たに導入されたid_str、max_id_strを使うように修正。

2010.10.16 16:05 投稿　大野義貴 [Web] | 固定リンク |