【短期集中連載】この冬作ろう！jQueryプラグイン講座

2日目：顔文字を顔画像に変換しよう

2008年12月31日 08時00分更新

文● 古籏一浩

この記事は「【短期集中連載】この冬作ろう！ 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;
    });
}