jQueryを使っていろいろやれるようになってきたら、そろそろプラグインも作れるようになりたくなるってもんだよね!
超シンプルな例を使って、プラグインの作り方を説明しようと思う。
まずは事例を見てほしい
僕が作った超絶プラグイン。その名も「アラートファンキー」というプラグインだ。
アラートファンキーの事例
「ボタン1」をクリックしてみてね。
このプラグイン
このアラートファンキープラグインの作り方を説明しながら、プラグインの作り方をざっくり理解してもらえればいいと思う。
プラグインのjsファイルの中身
このプラグインのファイル名は「jquery.alertfunky.js」。
jqueryのプラグインはこういう名前の付け方をするのが一般的。
中身はこんな感じ
jquery.alertfunky.js
たった8行でなりたってる。
(jqueryの記述本文だけを考えれば6行)
覚えなきゃいけないのは2つだけ。
名前を決める
まずは2行目の
$.fn.alertfunkyとなっている。
この形式でメソッドの名前をつくる。
例えばbigbtnとかいうメソッド名にしたければ
という風にすればOK。
機能の部分を書く
次に3〜5行目に肝心のプラグインの機能を書いている。
クリックしたらファンキー!とalertする。それだけ。
大事なのは$(this)の部分。
$(this)をクリックしたらalertが出るのはわかる。
じゃぁ$(this)は何をさすのかというと、それは後で決めることになる。
どこでalertが発動するのかを後で決められるというのがプラグインっぽいところだよね。
これでプラグイン部分はおしまい。
次にプラグインを読み込んで実際に使う場面を考えてみる。
プラグインを使う
プラグインを読み込んだhtmlはこんな感じになっている。
html
jqueryのプラグインを使ったことがある人ならこのへんは大体わかると思う。
まず1,2行目でjqueryと今回作ったプラグインであるjquery.alertfunky.jsを読み込む。
次にid="btn1"に対して、alertfunkyが発動するようにする。
↑プラグイン使う時こういう形よくでてくるよね!
さっきの$(this)の話に戻るけど、
ここで指定した$("#btn1")がプラグイン側の$(this)にあたる、というわけ。
id="btn1" に対して、alertfunkyメソッドを発動したので、ボタン1をクリックすると
「ファンキー!!ウリィィィィィィィイイ!」っていうalertが出るっていうわけ。
あとは膨らませるだけ
alertするだけというシンプルなプラグインを作ってみたけれど、構造は大体こんな感じなので、あとは中身を膨らませて、$(this)に対していろいろやらせれば、もっと複雑なプラグインができていくよ!
アルジャーノン!
超シンプルな例を使って、プラグインの作り方を説明しようと思う。
まずは事例を見てほしい
僕が作った超絶プラグイン。その名も「アラートファンキー」というプラグインだ。
アラートファンキーの事例
「ボタン1」をクリックしてみてね。
このプラグイン
$('#btn1').alertfunky();という風にidに対して指定すると、そのidをクリックしたときに「ファンキー!」というアラートが出る、という機能だ。
このアラートファンキープラグインの作り方を説明しながら、プラグインの作り方をざっくり理解してもらえればいいと思う。
プラグインのjsファイルの中身
このプラグインのファイル名は「jquery.alertfunky.js」。
jqueryのプラグインはこういう名前の付け方をするのが一般的。
中身はこんな感じ
jquery.alertfunky.js
$(function(){$.fn.alertfunky = function(){$(this).click(function(){alert("ファンキー!");});};});
たった8行でなりたってる。
(jqueryの記述本文だけを考えれば6行)
覚えなきゃいけないのは2つだけ。
名前を決める
まずは2行目の
$.fn.alertfunky = function(){...の部分。
$.fn.alertfunkyとなっている。
この形式でメソッドの名前をつくる。
例えばbigbtnとかいうメソッド名にしたければ
$.fn.bigbtn = function(){...
という風にすればOK。
機能の部分を書く
次に3〜5行目に肝心のプラグインの機能を書いている。
中身自体は簡単。$(this).click(function(){alert("ファンキー!");});
クリックしたらファンキー!とalertする。それだけ。
大事なのは$(this)の部分。
$(this)をクリックしたらalertが出るのはわかる。
じゃぁ$(this)は何をさすのかというと、それは後で決めることになる。
どこでalertが発動するのかを後で決められるというのがプラグインっぽいところだよね。
これでプラグイン部分はおしまい。
次にプラグインを読み込んで実際に使う場面を考えてみる。
プラグインを使う
プラグインを読み込んだhtmlはこんな感じになっている。
html
<script src="jquery.js"></script><script src="jquery.alertfunky.js"></script><script>$(function() {$('#btn1').alertfunky();});</script><div id="btn1" class="btn">ボタン1</div>
jqueryのプラグインを使ったことがある人ならこのへんは大体わかると思う。
まず1,2行目でjqueryと今回作ったプラグインであるjquery.alertfunky.jsを読み込む。
次にid="btn1"に対して、alertfunkyが発動するようにする。
$("#btn1").alertfunky();
↑プラグイン使う時こういう形よくでてくるよね!
さっきの$(this)の話に戻るけど、
ここで指定した$("#btn1")がプラグイン側の$(this)にあたる、というわけ。
id="btn1" に対して、alertfunkyメソッドを発動したので、ボタン1をクリックすると
「ファンキー!!ウリィィィィィィィイイ!」っていうalertが出るっていうわけ。
あとは膨らませるだけ
alertするだけというシンプルなプラグインを作ってみたけれど、構造は大体こんな感じなので、あとは中身を膨らませて、$(this)に対していろいろやらせれば、もっと複雑なプラグインができていくよ!
アルジャーノン!