この記事は「【短期集中連載】この冬作ろう！ jQueryプラグイン講座」の第2日目です→[連載インデックス]へ
顔文字を画像に置き換えてにぎやかなWebサイトに
昔はパソコン通信の中だけで使われていた、:-) などの顔文字も、今や珍しいものではなくなり、掲示板やメールはもちろんのこと、ブログや個人のWebサイトなどでもよく使われるようになりました（ちなみに、日本の顔文字は (^-^)ですが、米国の場合は ;-) のように顔が横向きになっています）。
文字だけでは難しい感情を手軽に表現できる便利な顔文字ですが、Webサイトで使うときにはもうひと工夫、顔の画像にして表示するのも一興でしょう。ケータイの絵文字のようなカラフルな画像に置き換えれば、テキストだけのWebサイトが見た目に楽しく、にぎやかなものになります。今日は顔文字を画像に変換するjQueryのプラグインを作成してみましょう。
顔文字も正規表現を使って置換
作成する顔文字変換プラグインの名前（メソッド名）は「facemark」とし、前回と同じように正規表現を使って置換処理をします。「replace()」処理を行なうのも前回と同じですが、1つだけ注意しなければならないのは、顔文字が「(」や「^」などの特殊な記号で構成されていることです。
JavaScriptで扱う正規表現では、「(」や「)」、「^」などは意味を持った特殊記号（メタキャラクタ）として定義されています。このため、笑っている顔文字である(^^)を、そのままreplace()の最初のパラメータに書いてしまうと顔文字が置換されず、まったく違う動作になってしまうのです。このような特殊記号を指定する場合は、その文字の前に半角バックスラッシュ（\）を入れる必要があります。
たとえば、顔文字(^^)の場合は以下のように指定しなければいけません。
\(\^\^\)
注意点はこれだけです。今回作成するプラグインでは、以下の表のとおり、2つの顔文字を画像に置換します。
| 顔文字（置換前） | 画像（置換後） |
|---|---|
| (^^) | <img src="nico.gif"> |
| (T_T) | <img src="namida.gif"> |
ここまでの処理だと前回と変わりませんので、新たな機能を1つ追加してみましょう。他のサーバー上に顔文字の画像がある場合を考慮して、顔画像のファイルを読み込む基本URLを指定する機能です。
基本となるURLはメソッドを呼び出すときにパラメータとして渡すことにします。つまり以下のようにすると、「http://ascii.jp/face/」にある「nico.gif」「namida.gif」が顔画像として利用されます。
$(～).facemark("http://ascii.jp/face/");
作成が完了したら「facemark.js」という名前でファイルを保存します。
【顔文字変換プラグインのソース】
/* 顔文字変換プラグイン for jQuery
2009.1 By KaZuhiro FuRuhata */
$.fn.facemark = function(baseURL){
return this.each(function(){
var srcText = this.innerHTML;
srcText = srcText.replace(/\(\^\^\)/g,"<img src='"+baseURL+"nico.gif'>");
srcText = srcText.replace(/\(T_T\)/g,"<img src='"+baseURL+"namida.gif'>");
this.innerHTML = srcText;
});
}
