第7章　「プラグインの作成」

jQueryが他のライブラリと最も異なるのが「拡張可能」な点です。これはプラグインという形でjQuery自体に機能を追加することができます。このプラグインによる拡張は非常に大きな意味があります。通常、ライブラリにない機能は自分で関数を定義して利用する事が多いでしょう。ただ、この場合作成した関数を他のプロジェクトに流用するのが難しかったり、関数名の衝突（オブジェクト名の衝突など）も配慮しなければいけません。 jQueryのプラグインの場合、このような心配はありません。jQuery自体に機能を追加するので関数名の衝突はありません。ただ、既存のjQueryに用意されているメソッド名を使ってしまうと上書きされ動作が変わってしまうので注意が必要です（機能が不足している場合は不具合がある場合は書き換えが可能というメリットもあります）。
それでは、実際にプラグインを作成してみましょう。jQueryでプラグインを追加するには「$.fn.メソッド名 = function(){～}」とします。function(){～}に呼び出された際に行なう処理を記述します。この時、関数にはメソッドに渡されたパラメータを受け取ることができます。
function(){～}内で操作対象となるオブジェクト／エレメントはthisを使って参照することができます。this.isとすれば対象オブジェクトのID属性にアクセスすることができます。
プラグイン内からすでに定義されているjQueryのメソッドも利用することができるため、かなり効率的にプログラムを記述することができます。注意点としてはプラグインの戻り値です。基本的にreturn thisとして操作対象のエレメントを返すようにします。必ずしもthisでなくても構いませんが、jQueryでのメソッドチェーンを実現するためにこのようにしておくのがベストということです。
サンプル1はcautionという名前のメソッドを定義しています。このメソッドは対象エレメントの文字色を赤色、背景色を黄色にするものです。これを別ファイルとして用意しておき読み込ませて使うようにします。これで他のサイトやプロジェクトでも簡単に利用することができるわけです。サンプル1で実際に呼び出して使う場合には$(～).caution()となります。（サンプル1を実行する）

【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}

【JavaScript】
$(function(){
$("#myArea").caution();
});

【プラグイン】myplug.js
$.fn.caution = function(){
this.css("color", "red");
return this.css("backgroundColor", "yellow");
}

それでは次にエレメントの内容の前に■を追加するプラグインを作成してみましょう。サンプル1と異なりエレメント別に処理を行なわなければなりません。もし、間違ってthis.html("■"+this.html())としてしまうと最初に読み込まれたエレメントの内容が対象エレメント全てに適用されてしまいます。エレメント別に処理を行なうにはthis.each(function(){～})とします。function(){～}では対象となるエレメントをthisで参照することができます。
エレメントの内容はthis.innerHTMLとして読み出すことができます。あとは■の文字と連結し書き戻せばできあがりです。実際のプログラムはサンプル2のようになります。（サンプル2を実行する）

【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.msg {
width:320px;
border:1px solid gray;
background-color:#f0f0f0;
}

【JavaScript】
$(function(){
$(".msg").rectMark();
});

【プラグイン】myplug.js
$.fn.rectMark = function(){
return this.each(function(){
this.innerHTML ="■"+this.innerHTML;
});
}

どのエレメントに対しても同じ処理を行なうのは簡単です。しかし、実際にはエレメントの状況に応じて処理を変えなければならないことがあります。サンプル3では与えられたエレメントの先頭の文字が全角の空白なら空白を削除するというプラグインです。プラグインのコードは、もう少し短く記述できます。（サンプル3を実行する）

これまで書いたプラグインも混合して利用することができます。このようにプラグインをたくさん作成しておけば、いろいろなところで使い回すことができます。他のライブラリでは再利用という点でネックになることがjQueryではプラグインを作成することで再利用を可能にしているわけです。
jQueryのサイトには多数のプラグインが用意されています。特に作成しなくても探せば見つかる可能性もあります。jQueryのプラグインページは以下のURLになります。

http://jquery.com/plugins/

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mypugin.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIのプラグインを追加</p>
<div class="msg">　文章の前に全角の空白がある場合、自動的に削除されます（ここは有り）</div>
<div class="msg">文章の前に全角の空白がある場合、自動的に削除されます（ここは無し）</div>
<div class="msg">文章の前に全角の空白がある場合、自動的に削除されます（ここは無し）</div>
<div class="msg">　文章の前に全角の空白がある場合、自動的に削除されます（ここは有り）</div>
</body>
</html>

【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.msg {
width:320px;
border:1px solid gray;
background-color:#f0f0f0;
}

【JavaScript】
$(function(){
$(".msg").cutFirstSpace();
});

【プラグイン】myplug.js
$.fn.cutFirstSpace = function(){
this.each(function(){
var txt = this.innerHTML;
if (txt.charAt(0) == "　") {
var sText = txt.substr(1, txt.length);
this.innerHTML = sText;
}
});
}

【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.msg {
width:320px;
border:1px solid gray;
background-color:#f0f0f0;
}

【JavaScript】
$(function(){
$(".msg").cutFirstSpace();
});

【プラグイン】myplug.js
$.fn.cutFirstSpace = function(){
var txt = this.html();
if (txt.charAt(0) == "　") {
var sText = txt.substr(1, txt.length);
return this.html(sText);
}
}

[目次へ]

第7章 「プラグインの作成」

第7章　「プラグインの作成」