CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

jQuery – プラグインを作る


jQueryプラグインは簡単に作れる!

スライダーやニュースティッカー等jQueryと同様になくてはならない存在のプラグイン。jQueryやプラグインの作者さんたちには頭が上がらないです。
今回は、そんなjQueryのプラグインを作ってみます。さて、

「わざわざプラグインにしなくてもいいんじゃない?」

っていう方もいるでしょうね。
コードを全て自分一人で管理していたり、ごく簡単なものならグローバルの名前空間でゴリゴリ書いてもいいし楽です。しかし、チームで開発するとき等にはプロパティやメソッドがバッティングしないような気遣いは必要になると思います。大きなコードであれば自分だけで作っててもバッティングしてしまうことすらあります。IDEのコードヒントも鬱陶しくなりますしね。
jQueryのプラグインにすれば$内空間だけで完結できるので、グローバルでのびのびできます。

「大抵のプラグインはあるし、車輪の再発明では?」

自分で書いたプラグインはメンテもしやすいし、資産になると考えます。

jQueryプラグインのテンプレ「jQuery Boilerplate」

jQueryのプラグイン作成には、$.fn.extend()が用意されていて、jQueryオブジェクトの命令を拡張することができます。「$(セレクタ).新しいメソッド({オプション})」こんな感じですね。
この形でプラグインを作った時は、コードが決まった形になりやすいので、テンプレート「jQuery Boilerplate」なるものが公開されています。少ないメモリで効率的に動作させることができるそうです。
さっそくgithubから落として見てみます。

jquery.boilerplate.js(V3.1)

親切なコメントがありがたいです。
最初のほうではプラグインの定義をしています。

Plugin()がプラグインのコンストラクタです。関心したのが

の部分で、defaultオブジェクトをoptionsで上書き(継承)してプラグインオプションを定義している部分です。$.extend()を使うとオブジェクトの継承ができるのですが、プラグインがオプションを必要としている場合でオプションが渡されなかった時に、defaultのプロパティが使われるようになってるんですね。
this.elementにはプラグインを適用するDOM要素、そしてthis.optionsにプラグインオプションが入ります。
Plugin.prototype.initにはプラグインの動作を書きます。さらに$.fn[pluginName]ではプラグインのインスタンスを作成しています。
プラグインのインスタンスは$.data()に格納されるようです。

早速作ってみる

jquery.test.js(※長いのでコメントは削除しています)

要素に赤い枠を表示するだけのjQueryプラグインです。
書き変えた(書き加えた)ところは「pluginName = ‘test’」とPlugin.prototype.init内の「$(this.element).css({“border”: “solid 3px #F00″});」の二ヶ所のみです。このテストプラグインは$(“p”).test()のように使用します。p要素に赤枠がつくだけです。

簡単でしょう?

これだけではあんまりなので、オプションを使ったものを次に挙げます。

じんわりマウスオーバーjQueryプラグイン jquery.jiwa.js

jquery.jiwa.js

アンカーをdisplay:blockにし、background-imageでボタン化する手法はまだまだ使われますが、そうしたボタンにフェードインフェードアウトでマウスオーバー効果を付けるプラグインです。前述したサンプルとたいしてそう変わりませんが、簡単に説明します。

この部分では、マウスオーバー時に表示する要素を作成してoptionsに入れてしまいました。理由は後述します。
Plugin.prototype.initの中でマウスオーバー時の要素の設定、そしてマウスオーバー・アウトのイベントを設定しています。イベントには.on()を使っているので、jQueryは1.7以上である必要があります(記事作成時のjQuery最新Verは1.8)。
その.on()の第二引数でthis.optionsを渡しています。.on()には任意のデータをイベントハンドラ内に渡す仕組みがあります。ハンドラ内ではプラグインのオプションを参照する必要があるのでこうしてる訳です。先ほどのマウスオーバー時要素をoptionsに入れたのも同じ理由です。
※このプラグインは要素のサイズをハードコーディングしてしまっています。もし使い回したい時はthis.elementのサイズを見るように改造してみてくださいね。

jquery.jiwa.jsの使い方

まずは、CSSのhover疑似要素を使う要領と同じでこんな画像を用意し、
btn.jpg
btn.jpg
CSSには背景画像として指定します。

btn.css

htmlはこんな感じです。

sample.html

プラグインに渡しているオプションは「position」と「speed」です。positionにはマウスオーバー時の背景画像ポジションを、speedにはミリ秒単位でフェードインの時間を指定します。
実行結果は下のようになります。(マウスを重ねてみてください)

test

minifyする

こうしてできたプラグインですが、開発の利便上、コメント文やホワイトスペースが多めで開発中みたいですね…というわけでもないのですが、さらに高機能なものを作ろうとすると1000行2000行と増えていくファイル容量もばかにできません。
そこで、ホワイトスペースをとったり長い変数名を縮めたりしてファイル容量を削減してみます。世に公開されているjQueryプラグインの中でもよく見られますが、「jquery.jiwa.min.js」とかいうヤツですね。
jsファイルに対してこれを行う方法はいくつかありますが、Googleで配布している「Closure Compiler」が手軽だと感じました(※javaですのでJREが必要です)。
Closure Compilerをダウンロードし展開すると「compiler.jar」というjarファイルが入っています。これをカレントディレクトリに置き、ここの説明と同じようにコマンドラインで(Macならターミナルから)

と入力するだけです。
引数 「–js」には元となるjsのファイル名を、「–js_output_file」には書き出すファイル名を指定します。これを実行すると、minifyされたjsがカレントにでき上がります。
リリースする度にこのコマンドを入力するのが面倒ならばantを使うとよいでしょう。(MacOS10.8には標準で入ってました)
以下にantで使うbuild.xmlの例を置きます。

build.xml

こうしてできたプラグインはgithubなどに上げて共有しましょう!
今日からあなたもjQueryプラグイン開発者
というわけで、サンプルファイルはgithubに上げてあります。


#どうでもいいですけれど、公式プラグインページやgithubはなんで工事中なのですかね?追記:公式プラグインページ、公開されてました!

関連記事
BACK TO TOP