このページの本文へ

1日目:難しい漢字にふりがなをつけよう (2/3)

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;
    });
}

この連載の記事

一覧へ

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

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