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

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

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

文● 古籏一浩

この記事は「【短期集中連載】この冬作ろう！ jQueryプラグイン講座」の第1日目です→[連載インデックス]へ


今回作るプラグインは「ふりがな」プラグイン。画面のような難しい漢字もこれで安心!?

　日本語は平仮名、片仮名に加えて複雑な漢字があります。漢字の読み方は思っている以上に難しく「未曾有」を「みぞうゆう」と読んでしまったり「踏襲」を「ふしゅう」と読んでしまう人もいます。人名にいたっては、もう何と読んだらよいのか分からないことも多々ありますから、学校の先生はさぞかし大変だろうと思います。

　そこで、jQueryプラグイン講座1日目は、「テキスト中の読みにくい漢字にふりがなをつけるプラグイン」を作ってみましょう。すべての漢字ではなく、“読みにくい漢字だけ”（人名や地名など）にふりがなをつけてくれるプラグインです。これなら、「未曾有」を「みぞうゆう」と読み間違えてしまうことはないでしょう。

プラグインの基本形

　プラグインの作成に入る前に、プラグインの基本形について説明します。jQueryでは「$()」によって複数のエレメントが操作対象となるため、プラグインには「複数のエレメント」の情報が渡されます。今回のように漢字にふりがなをつける場合、ふりがなをつけるエレメント単位で情報が渡されることになります。

　たとえば「$("#abc, #def")」と2つのエレメントが指定されている場合、まずID名が「abc」のエレメントの情報が渡され、次にID名が「def」のエレメントの情報がプラグインに渡されます。

　対象となるエレメントが1つの場合も、複数あるものとして処理します。処理の基本形が以下のようになります。

【基本形】


$.fn.メソッド名 = function(){
    return this.each(function(){
        エレメント１つに対しての処理
    });
}

　メソッド名とエレメント1つに対しての処理を書けばよいので、いたってシンプルです。ただし、jQueryのメソッドチェーンを機能させるため、returnでエレメント情報を返すことに注意です。もちろん、作成するプラグインによってはそうでないこともありますが、基本的にはこのようにエレメント情報を返すようにしておきましょう。

前へ 1 2 3 次へ

ツイートする