Twitterにリンクをつける
前回は.getJSON()メソッドを使い、Twitter上での発言をサイトに表示できるようにしてみました。しかし、時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが、前回のままではそのままテキストとして表示されるだけになってしまいます。
以前、フォームの内容を紹介した時に正規表現の紹介をしましたが、今回はその正規表現を利用して、Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。
URLにリンクをつける
まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために、正規表現を利用します。
「[\x21-\x7e]」の部分は16進数で表現したASCII文字で、「[\x21-\x7e]」を利用するだけで、空白を除く大文字・小文字のアルファベットと各種記号を抜き出すことができる。
これを.replace()メソッドを使い置換するサンプルをみてみましょう。
これでURL部分にリンクがつきます。
「<a href="$1">$1</a>」の部分での$1というのは、今回の例で言うと、正規表現で該当したURLがそこに代入されます。正規表現中の括弧でまとめたものを、順に$○で指定することができるのです。今回は正規表現のURL全体を括弧でまとめているので$1は該当したURLがそのまま入ることになります。
hashタグにリンクをつける
次にhashタグにリンクをつけてみます。Twitter上の発言でつけたhashタグは、Twitter内の検索を利用することでまとめてみることができます。
例えば「#jQuery」というhashタグをつけたものを見つけたい時は、下記のURLで表示させることができます。
#jQueryの検索をすると、その文字列は「%23jQuery」となります。「#」が「%23」となるのです。
さて、hashタグを見つける正規表現をみてみましょう。
数字とアルファベットだけでいいので、シンプルになります。「#」を括弧の外に出しているのは.replace()メソッドを利用した際の$1で代入する際に「#」を含めない為です。
それではhashタグをリンク付きに置換するサンプルを見てみましょう。
これでhashタグに、hashタグ一覧表示のURL付きリンクになりました。
@ユーザー名にリンクをつける
最後に、@ユーザー名が含まれていた場合、そのユーザーのタイムラインへのリンクを付ける正規表現を紹介します。先程のhashタグの「#」を「@」にすることで、文中の@ユーザー名は見つけることができます。
これで各種、リンクを付けるサンプルが出そろいました。これらを、前回紹介したTwitterのプラグインに導入して、表示させたいユーザーの発言一覧にリンクを付けて表示させるようにしてみましょう。
プラグイン化したものに導入してみる
これでプラグイン中でも発言にリンクがついて表示されるようになりました。
プラグインをhashタグ一覧表示に
今回の最後に、ここまで説明してきた、特定ユーザーの発言一覧を表示するプラグインを少し修正して、特定のhashタグが付けられた発言一覧を表示にしてみます。
先程までのプラグインとほとんど同じコードで表示ができます。変更したのは、変数userをhashに変えたことと、JSONのURLをhashタグ用に変えたこと。それと、Twitter検索のAPI用に「var results = data.results;」の一行を加えて、その変数に対して.each()メソッドのループ処理をさせた部分が変更した箇所です。
自分のサイトにTwitterのタイムラインを表示するだけでなく、hashタグのついた一覧も表示してみてはいかがでしょうか。