【短期集中連載】この冬作ろう！jQueryプラグイン講座
1日目：難しい漢字にふりがなをつけよう
2008年12月30日 08時00分更新
プラグインを実際に使ってみよう
では、完成したばかりのプラグインをさっそく使ってみましょう。
最初にjQueryライブラリファイルを読み込ませたあと、プラグインファイルを読み込ませます。
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/furigana.js"></script>
これだけではプラグインは機能しないので、ページが読み込まれた後に実行するように、以下のスクリプトを書き加えます。ID名が「sampleDoc」のエレメントだけにふりがなをつける場合は、以下のようにします。
<script type="text/javascript"><!--
$(function () {
$("#sampleDoc").furigana();
});
// --></script>
ページ全体に対してふりがなをつけるには、以下のように指定します。
$("body").furigana();
期待通り漢字にふりがながついていれば、今日の課題は完成です。ちなみに、Internet Explorer（IE）ではルビを表示させるHTMLタグ（<ruby>タグ）が使えますので、今回のプラグインにひと手間加えて、IEの場合だけ漢字の上にふりがなをつけるように改良してもいいかもしれません。
 |
|---|
| ふりがなプラグインを組み込む前（上）と組み込んだ後（下） |
明日は、顔文字を置換して画像にするプラグインを作成します。お楽しみに。
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
この特集の記事
- 最終日：リンク先のサムネイルを自動的に表示しよう
- 4日目：写真の横にGoogleマップを表示しよう
- 3日目：単語に自動的にリンクを追加しよう
- 2日目：顔文字を顔画像に変換しよう
- 0日目：jQueryプラグイン作成の基礎知識
- この特集の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
