おれせか

なんかそれっぽいのをうにうに。

以前にDropboxで友人数人とjs共有しようぜ!って話になった時に、イキオイで作ったまんまDropbox内に放置していたもの。
今日、そういえばこういうのも作ったんだよねーと友人に話したところ、折角作ったなら公開しないともったいないよ!と言われたのでそれもそうかと思い公開してみる。


何コレ?

指定したユーザーのtwitterのタイムラインを取得して表示させるjQueryプラグインです。

  • さらっと使う分にはtwitterのidと表示件数あたりを指定するだけですぐ簡単に使えるよ!
  • post内のURLや@でのreply、#でのハッシュタグを自動でリンクするよ!
  • 独自テンプレート形式で表示の方法をカスタマイズも可能。htmlだけわかるくらいでさくっとできるよ!
    #もすこし詳しくは『テンプレート』の項参照

必要なもの

サンプル

http://ichi.fool.jp/test/js/jquery/twitter/twitter.html

使い方

$(function(){
    // id="twitter1"タグ内に@kazuyo_kのTLを表示(デフォ5件) */
    $('#twitter1').twitter('kazuyo_k');
    // id="twitter2"タグ内に@kohmiのTLを最新10件まで表示 */
    $('#twitter2').twitter('kohmi', {count:10});
    // id="twitter3"タグ内に@tsudaのTLを最新10件まで独自テンプレートでカスタマイズして表示。
    $('#twitter3').twitter('tsuda', {
          count: 10
        , prefix: '<dl>'
        , postfix: '</dl>'
        , each_line: '<dt><a class="user" href="%user.link%"><img src="%user.profile_image_url%" width="20" height="20" alt="%user.name%" />%user.screen_name%</a> (<a href="%link%">%date%</a>)</dt><dd>%text%<dd>'
    });
});

実際の表示動作はサンプルで確認できます。

オプション

count
デフォルト値:5
TLの表示件数を指定。
loading
デフォルト値:’now loading…
ローディング中に表示される内容を指定。(htmlタグ使用OK)
prefix
デフォルト値:’<ul>
TL全体の最初に挿入されるものを指定
postfix
デフォルト値:’</ul>
TL全体の最後に挿入されるものを指定
each_line
デフォルト値:’<li><a class="user" href="%user.link%" target="_blank"><img src="%user.profile_image_url%" width="16" height="16" alt="%user.name%" /></a> %text% <a class="date" href="%link%" target="_blank">%date%</a></li>
各postをどのように表示するかの指定。
『テンプレート』の項で詳細説明

テンプレート

オプションの「each_line」内で使える独自タグ(?)。
『%~~%』形式でオプション内に記述、展開時に該当タグ部分がその内容に置換されます。

%user.name%
ユーザーの「名前」。(例:勝間和代)
%user.screen_name%
ユーザー名。(例:kazuyo_k)
%user.link%
ユーザーのプロフィールへのリンク (例:http://twitter.com/kazuyo_k
%user.profile_image_url%
ユーザー画像のURL。
%text%
post内容。
%link%
postへのパーマリンク。(例:http://twitter.com/kazuyo_k/status/4466616139
%date%
postされた日時。twitterのwebと同じような~分前、~時間前形式。

例としてeach_lineが

<dt><a class="user" href="%user.link%"><img src="%user.profile_image_url%" width="20" height="20" alt="%user.name%" />%user.screen_name%</a> (<a href="%link%">%date%</a>)</dt><dd>%text%<dd>

だった場合

<dt><a class="user" href="http://twitter.com/kazuyo_k"><img src="http://a3.twimg.com/profile_images/371937965/twitter_bigger__1__bigger.jpg" width="20" height="20" alt="勝間和代" />kazuyo_k</a> (<a href="http://twitter.com/kazuyo_k/status/4466616139">約4時間前</a>)</dt><dd>偏光サングラスなので、室内ではすどおしです。<dd>

のような形で各postが整形されて表示されます。

おまけ(linkfy的なやつ)

postの内容を自動でリンクするための関数も入ってるので、そこだけ別用途で使うこともできるよ。
これを使えばhttp://~~みたいなurlを含んだ文字列をurl箇所だけリンクタグで囲った形に整形して出力するよ。

var before = 'あいうえおhttp://www.google.comかきくけこ';
var after = $.makeLink(before);
//→ 'あいうえお<a href="http://www.google.com" target="_blank">http://www.google.com</a>かきくけこ'

ソース

(function($){//BEGIN $ = jQuery
    
    
    $.makeLink = $.makeLink || function(str, options){
        options = $.extend({
              target: '_blank'
        }, options);
        return str.replace(/[A-Za-z]+?:\/\/[A-Za-z0-9_-]+\.[A-Za-z0-9:%&\?\/.=~_-]+/g, function(m){
            return [
                  '<a href="'
                , m
                , options.target ? '" target="' + options.target + '">' : ''
                , m
                , '</a>'
            ].join('');
        });
    };
    
    $.twitter = {
          make_user_link: function(str){
            return str.replace(/@(\w+)/g, function(m, user){
                return [
                      '@<a href="'
                    , 'http://twitter.com/'
                    , user
                    , '" target="_blank">'
                    , user
                    , '</a>'
                ].join('');
            });
        }
        , make_hash_link: function(str){
            return str.replace(/#(\w+)/g, function(m, hashtag){
                return [
                      '#<a href="'
                    , 'http://search.twitter.com/search?q='
                    , encodeURIComponent(m)
                    , '" target="_blank">'
                    , hashtag
                    , '</a>'
                ].join('');
            });
        }
        , related_time: function(created_at, options){
            options = $.extend({
                  sec: function(c, d, diff){
                    return [(Math.floor(diff / 5) + 1) * 5, '秒以内前'].join('');
                }
                , min: function(c, d, diff){
                    var m = Math.floor(diff / 60);
                    return m < 45 ? [m, '分前'].join('') : '約1時間前';
                }
                , hour: function(c, d, diff){
                    var h = Math.floor(diff / 60 / 60) + 1;
                    return h < 24 ? ['約', h, '時間前'].join('') : options.other(c, d, diff);
                }
                , other: function(c, d, diff){
                    var dd = new Date(c);
                    var m = dd.getMonth() + 1;
                    var d = dd.getDate();
                    var h = dd.getHours();
                    var i = dd.getMinutes();
                    
                    return [
                          [
                              dd.getFullYear() || dd.getYear()
                            , m < 10 ? ['0', m].join('') : m
                            , d < 10 ? ['0', d].join('') : d
                        ].join('/')
                        , [
                              h < 10 ? ['0', h].join('') : h
                            , i < 10 ? ['0', i].join('') : i
                        ].join(':')
                    ].join(' ');
                }
            }, options);
            var d = new Date().getTime();
            var c = Date.parse(created_at) || (function(at){
                var c = new Date([at[1], at[2], at[5], at[3]].join(' '));
                c.setTime(c.getTime() - (!(at[4] - 0) ? c.getTimezoneOffset() * 60 * 1000 : 0));
                return c.getTime();
            })(created_at.split(' '));
            var diff = (d - c) / 1000;
            
            if(diff < 60){
                return options.sec(c, d, diff);
            }else if(diff < 60 * 60){
                return options.min(c, d, diff);
            }else if(diff < 60 * 60 * 24){
                return options.hour(c, d, diff);
            }
            
            return options.other(c, d, diff);
        }
    };
    $.twitter.convert_link = function(str){
        var $tw = $.twitter;
        return $tw.make_user_link($tw.make_hash_link($.makeLink(str)));
    };
    
    $.fn.twitter = function(username, options){
        if(!username || typeof arguments[0] != 'string') throw 'requires a username';
        
        var $this = this;
        
        var default_count = 5;
        options = $.extend({
              method: 'status/user_timeline'
            , count: default_count
            , loading: 'now loading...'
            , prefix: '<ul>'
            , postfix: '</ul>'
            , each_line: '<li><a class="user" href="%user.link%" target="_blank"><img src="%user.profile_image_url%" width="16" height="16" alt="%user.name%" /></a> %text% <a class="date" href="%link%" target="_blank">%date%</a></li>'
            , success: function(json){
                var ret = [options.prefix];
                $.each(json, function(i, item){
                    var screen_name = item.user.screen_name;
                    item.link = ['http://twitter.com', screen_name, 'status', item.id].join('/');
                    item.text = $.twitter.convert_link(item.text);
                    item.date = $.twitter.related_time(item.created_at);
                    item.user.link = ['http://twitter.com/', screen_name].join('');
                    var each_line = options.each_line
                        .replace(/%(.*?)%/g, function(m, obj){
                            var mm = obj.match(/(.+?)\.(.+)/);
                            return mm ? item[mm[1]][mm[2]] : item[obj];
                        })
                    ret.push(each_line);
                });
                ret.push(options.postfix);
                $this.html(ret.join(''));
            }
            , error: function(XMLHttpRequest, textStatus, errorThrown){
                console && console.log && console.log(XMLHttpRequest, textStatus, errorThrown);
                $this.html('error...');
            }
            , params : {}
        }, options);
        
        $this.html(options.loading);
        
        
        var Tw_API_URI = ['http://twitter.com/', options.method, '/', username, '.json'].join('');
        
        var params = $.extend({
            count: options.count
        }, options.params);
        if(!params.count || params.count > 200) params.count = default_count;
        params = $.param(params);
        
        var uri = [Tw_API_URI, params].join('?');
        
        $.ajax({
              url: uri
            , dataType: 'jsonp'
            , success: options.success
            , error: options.error
        });
        
        return this;
    };
    
    
})(jQuery);//END $ = jQuery
PAGETOP
PAGETOP
PAGETOP

Comments (11)

At the same time, the best possibility can be to pay off by just COD (profit regarding sending), however , given that you can check out system after which you can consider whenever you might pay off or simply possibly not.ありま

[2013/04/25 (木) 13:03]

not to say that employers aren’t l

[2015/08/13 (木) 16:36]

macだとコピーとペーストのコマンドがそれぞれ『pbcopy』と『pbpaste』なので、
変換したい文字列をコピーして、

[2015/09/16 (水) 13:06]

l直書きでネスト作るこ

[2015/10/13 (火) 17:13]

かつて2015年のバーゼルのシャネル激安時計展初めて見得、

シャネルの超薄自動的にの上で鎖陀はずみ車腕時計、
今年プラチナの金の上着をはおって、

そのデザインはアイデアを高く備えて、
シャネル激安http://www.cctoh.com/

シャネルバッグ、腕時計、財布、靴、ピアス、眼鏡

超薄は表して殻のシャネル中で時計の歴史、
上で最も偉大な発明の中の一つを埋蔵していて。

[2015/11/23 (月) 00:34]

良い書き込み記事をありがとう!それは実際にはアミューズメントアカウントです。

[2015/11/23 (月) 17:47]

あと、もしも日曜からこれまでの間にメールや電話等してくれた方がいれば上記いずれかに再度連絡してみてもらえるとありがたいですー。

[2016/01/06 (水) 17:52]

フラグとほぼ同じですが, 各ループの最後に変数 $_ の値を出力するようになります。

[2016/01/07 (木) 10:59]

宝のスーパーコピーめでたい(ミュウミュウ)。

[2016/01/15 (金) 17:44]

ポストかなり良い。私はちょうどあなたのブログにつまずいたと私は本当にあなたのブログの記事を読んで楽しかったと言っていた。

[2016/06/20 (月) 12:23]

と言われたのでそれもそうかと思い公開してみる。

[2016/06/27 (月) 18:37]
PAGETOP

Comment Form

PAGETOP

Trackbacks (1)

[...] [js] twitterのTLをとってくるjQueryプラグイン | おれせかを参考にやってみました。プロフィールの画像アイコンも取って来てくれるので非常に便利! [...]

PAGETOP

Trackback URL

PAGETOP

Search