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

1日目：難しい漢字にふりがなをつけよう

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

文● 古籏一浩

正規表現を使って置換

　ではいよいよ、実際にプラグインの作成に入りましょう。ふりがなプラグインの名前（メソッド名）は「furigana」とし、「$.fn.furigana」と書いて定義します。

　次に、1つのエレメントに対して処理をします。今回は正規表現を使って漢字を置換する方法を使うこととし、ふりがなをつける漢字とかなの対応は以下の表のようにすることとします。

詳細	詳細(しょうさい)
有無	有無(うむ)
頻繁	頻繁(ひんぱん)
踏襲	踏襲(とうしゅう)
未曾有	未曾有(みぞう)

　文字を置換するには、エレメントから読み出した文字列に対して「replace()」を使います。エレメント内の文字列は「this.innerHTML」で参照できるので、「srcText = this.innerHTML」とすれば変数「srcText」にエレメント内の文字列が入ります。なお、この文字列は標準テキスト（プレーンテキスト）ではなく、HTMLタグを含む文字列です。

　replace()は、最初のパラメータに置換したい文字とオプション、2番目のパラメータに置換後の文字列を指定します。たとえば「未曾有」の文字にふりがなをつける場合、以下のように書きます。

srcText = srcText.replace(/未曾有/g,"未曾有(みぞう)");

　最初のパラメータで「/未曾有/g」と指定していますが、パラメータには単純な文字列ではなく正規表現で使用できる文字列を指定します。今回は特殊な文字がないので、「/」と「/」の間に置換元になる文字列を指定するだけです。「/」の後にある「g」はグローバルマッチ (global match) で、指定すると文章全体にある該当文字が対象になります。ふりがなをつけるのは文章中の最初の1回だけでいい、という場合はgを外せばOKです。

　ふりがなの部分を強調したい場合もありますから、<span>タグを使って「jqfurigana」という名前のスタイルシートクラスを割り当てておきます。これで、スタイルシートを使ってふりがなの文字サイズを小さくしたり、色をつけたりといったことが手軽にできるようになります。

　あとは、それぞれの漢字にふりがなをつけるように繰り返し書けばできあがりです。ただ、ふりがなをつける漢字が多いと、今回のような力業による書き方は好ましくありません。たくさんある場合の方法については、短期連載3日目で説明したいと思います。

　以上の作業が終わったら、「furigana.js」という名前でファイルを保存します。「jQueryのプラグイン」と言っても中身はJavaScriptですので、一般的な外部ファイルのJavaScriptと扱いは変わりません。

【ふりがなプラグインのソース】


/* ふりがなプラグイン for jQuery
2009.1 By KaZuhiro FuRuhata  */
$.fn.furigana = function(){
    return this.each(function(){
        var srcText = this.innerHTML;
        srcText = srcText.replace(/詳細/g,"詳細<span class='jqfurigana'>(しょうさい)</span>");
        srcText = srcText.replace(/有無/g,"有無<span class='jqfurigana'>(うむ)</span>");
        srcText = srcText.replace(/頻繁/g,"頻繁<span class='jqfurigana'>(ひんぱん)</span>");
        srcText = srcText.replace(/踏襲/g,"踏襲<span class='jqfurigana'>(とうしゅう)</span>");
        srcText = srcText.replace(/未曾有/g,"未曾有<span class='jqfurigana'>(みぞう)</span>");
        this.innerHTML = srcText;
    });
}