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

3日目：単語に自動的にリンクを追加しよう

2009年01月03日 08時00分更新

文● 古籏一浩

自動単語リンクプラグインを使ってみよう

　それでは、完成したプラグインを実際に使ってみましょう。

　いつもどおり、最初にjQueryライブラリファイルを読み込ませたあと、プラグインファイルを読み込ませます。

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/adlink.js"></script>

　次に、ページが読み込まれた後に自動リンク機能が実行されるように、スクリプトを書きます。ID名が「sampleDoc」のエレメントだけにリンクを追加するには、以下のようにします。

<script type="text/javascript"><!--
$(function () {
$("#sampleDoc").addlink();
});
// --></script>

　　ページ全体に対してリンクを追加する場合、以下のように書きます。


$("body").addlink();

　動作を確認して、単語にWikipediaのリンクが追加されていれば完成です。改造例としては、プラグインが読み込まれたら常にページ全体に適用されるようにすると便利でしょう。また、配列部分は別ファイルを読み込むようにておくと、プログラムファイルを修理することなく単語の追加・削除ができます。さらにJSON形式にしておけば、他のサーバー上にある単語ファイルを読み込む、といったことも可能になります。いろいろ試してみましょう。