第20回　jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける

Twitterにリンクをつける

前回は.getJSON()メソッドを使い、Twitter上での発言をサイトに表示できるようにしてみました。しかし、時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが、前回のままではそのままテキストとして表示されるだけになってしまいます。

以前、フォームの内容を紹介した時に正規表現の紹介をしましたが、今回はその正規表現を利用して、Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。

URLにリンクをつける

まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために、正規表現を利用します。

URL用の正規表現

/(http:\/\/[\x21-\x7e]+)/gi

「[\x21-\x7e]」の部分は16進数で表現したASCII文字で、「⁠[\x21-\x7e]」を利用するだけで、空白を除く大文字・小文字のアルファベットと各種記号を抜き出すことができる。

これを.replace()メソッドを使い置換するサンプルをみてみましょう。

URL用の正規表現を使い置換するサンプル

jQuery(function($){ 
    $('li','#demo').each(function(){
        var txt = $(this).text();
        //URLをリンク付きに置換
        txt = txt.replace(/(http:\/\/[\x21-\x7e]+)/gi,'<a href="$1">$1</a>');
        $(this).html(txt);
    });
});

これでURL部分にリンクがつきます。

「<a href="$1">$1</a>」の部分での$1というのは、今回の例で言うと、正規表現で該当したURLがそこに代入されます。正規表現中の括弧でまとめたものを、順に$○で指定することができるのです。今回は正規表現のURL全体を括弧でまとめているので$1は該当したURLがそのまま入ることになります。

hashタグにリンクをつける

次にhashタグにリンクをつけてみます。Twitter上の発言でつけたhashタグは、Twitter内の検索を利用することでまとめてみることができます。

例えば「#jQuery」というhashタグをつけたものを見つけたい時は、下記のURLで表示させることができます。

#jQueryのhashタグがついた発言を表示するURL

http://twitter.com/#search?q=%23jQuery

#jQueryの検索をすると、その文字列は「%23jQuery」となります。「⁠#」が「%23」となるのです。

さて、hashタグを見つける正規表現をみてみましょう。

hashタグ用の正規表現

/#(\w+)/g

数字とアルファベットだけでいいので、シンプルになります。「⁠#」を括弧の外に出しているのは.replace()メソッドを利用した際の$1で代入する際に「#」を含めない為です。

それではhashタグをリンク付きに置換するサンプルを見てみましょう。

hashタグ用の正規表現を使い置換するサンプル

jQuery(function($){ 
    $('li','#demo').each(function(){
        var txt = $(this).text();
        //hashタグをリンク付きに置換
        txt = txt.replace(/#(\w+)/g,'<a href="http://twitter.com/#search?q=%23$1">#$1</a>')
        $(this).html(txt);
    });
});

これでhashタグに、hashタグ一覧表示のURL付きリンクになりました。

@ユーザー名にリンクをつける

最後に、@ユーザー名が含まれていた場合、そのユーザーのタイムラインへのリンクを付ける正規表現を紹介します。先程のhashタグの「#」を「@」にすることで、文中の@ユーザー名は見つけることができます。

@ユーザー名用の正規表現

/@(\w+)/g

@ユーザー名用の正規表現を使い置換するサンプル

jQuery(function($){ 
    $('li','#demo').each(function(){
        var txt = $(this).text();
        //ユーザー名（スクリーン名）をリンク付きに置換
        txt = txt.replace(/@(\w+)/g,'<a href="http://twitter.com/$1">@$1</a>'); 
        $(this).html(txt);
    });
});

これで各種、リンクを付けるサンプルが出そろいました。これらを、前回紹介したTwitterのプラグインに導入して、表示させたいユーザーの発言一覧にリンクを付けて表示させるようにしてみましょう。

プラグイン化したものに導入してみる

リンク付きタイムラインを表示するプラグイン

(function($){
    $.fn.twLine = function(options){ 
        var c = $.extend({
            //ユーザーIDもしくはスクリーン名
            user: null,
            number: 10
        },options || {});
        
        var twiUrl = 'http://twitter.com/';
        
        $(this).each(function(){
            var self = $(this);

        // ユーザー名がなければ処理を終了する
        if( !c.user ) {
            return false;
        }

        // loading文字列とJSONの中身を一覧で表示するためのul要素を入れておく
        self.append(
            '<div class="loading"><img src="images/loading.gif" width="32" height="32" alt="" />loading...</div>',
            '<ul/>'
        );
            // JSONの取得
            $.getJSON('http://twitter.com/statuses/user_timeline/' + c.user +'.json?callback=?',function(data){  
                // loading文字列を消去
                $('.loading', self).remove();
                
                // ポストがひとつもなかった場合
                if( data.length < 1 ) {
                    $('ul', self).append('<li>投稿がありません。</li>');
                    return false;
                }
                            
                // item毎に･･･
                $.each(data , function(i , items) {
                    
                    // 指定した数を超えた場合は終了する
                    if( i > (c.number - 1) ) {
                        return false;
                    }
                    
                    var txt = items.text;
                    // 各種リンク付きに置換する
                    txt = txt.replace(/(http:\/\/[\x21-\x7e]+)/gi,'<a href="$1">$1</a>')
                        .replace(/#(\w+)/g,'<a href="'+twiUrl+'#search?q=%23$1">#$1</a>')
                        .replace(/\@(\w+)/g,'<a href="'+twiUrl+'$1">@$1</a>'); 
                    
                    // itemの中のtextを抜き出してulに追加する
                    $('ul', self).append(
                        $('<li/>').html(txt)
                    );
                });
            });
        });
    }
})(jQuery);

jQuery(function($){ 
    $('#demo').twLine({
        user: '32262053'
    });
    
    $('#demo2').twLine({
        user: 'h2ham',
        number: 5
    });
});

これでプラグイン中でも発言にリンクがついて表示されるようになりました。

プラグインをhashタグ一覧表示に

今回の最後に、ここまで説明してきた、特定ユーザーの発言一覧を表示するプラグインを少し修正して、特定のhashタグが付けられた発言一覧を表示にしてみます。

hashタグ一覧を表示するプラグイン

(function($){
    $.fn.twLine = function(options){ 
        var c = $.extend({
            //検索するhashタグ
            hash: null,
            number: 10
        },options || {});
        
        var twiUrl = 'http://twitter.com/';
        
        $(this).each(function(){
            var self = $(this);

        // ユーザー名がなければ処理を終了する
        if( !c.hash ) {
            return false;
        }

        // loading文字列とJSONの中身を一覧で表示するためのul要素を入れておく
        self.append(
            '<div class="loading"><img src="images/loading.gif" width="32" height="32" alt="" />loading...</div>',
            '<ul/>'
        );
            // JSONの取得
            $.getJSON('http://search.twitter.com/search.json?q=%23' + c.hash +'&callback=?',function(data){ 
                var results = data.results;
                
                // loading文字列を消去
                $('.loading', self).remove();
                
                // ポストがひとつもなかった場合
                if( data.length < 1 ) {
                    $('ul', self).append('<li>投稿がありません。</li>');
                    return false;
                }
                            
                // item毎に･･･
                $.each(results , function(i , items) {
                    
                    // 指定した数を超えた場合は終了する
                    if( i > (c.number - 1) ) {
                        return false;
                    }
                    
                    var txt = items.text;
                    // 各種リンク付きに置換する
                    txt = txt.replace(/(http:\/\/[\x21-\x7e]+)/gi,'<a href="$1">$1</a>')
                        .replace(/#(\w+)/g,'<a href="'+twiUrl+'#search?q=%23$1">#$1</a>')
                        .replace(/\@(\w+)/g,'<a href="'+twiUrl+'$1">@$1</a>'); 
                    
                    // itemの中のtextを抜き出してulに追加する
                    $('ul', self).append(
                        $('<li/>').html(txt)
                    );
                });
            });
        });
    }
})(jQuery);

jQuery(function($){ 
    $('#demo').twLine({
        hash: 'jQuery'
    });
    
    $('#demo2').twLine({
        hash: 'plugin',
        number: 5
    });
});

先程までのプラグインとほとんど同じコードで表示ができます。変更したのは、変数userをhashに変えたことと、JSONのURLをhashタグ用に変えたこと。それと、Twitter検索のAPI用に「var results = data.results;」の一行を加えて、その変数に対して.each()メソッドのループ処理をさせた部分が変更した箇所です。

自分のサイトにTwitterのタイムラインを表示するだけでなく、hashタグのついた一覧も表示してみてはいかがでしょうか。