このページの本文へ

2日目:顔文字を顔画像に変換しよう (1/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;
    });
}

前へ 1 2 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く