Plugin自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。Link外部ファイル化たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。{$('#hide-btn').click(function(){$('#view').fadeOut(1000);});});まずは外部ファイル化しましょう。jQueryプラグインは「jquery.プラグイン名.js」というファイル名にするのが基本なようです。ここでは「jquery.hoge.js」としました。上記のコードをそのまま外部ファイルにしただけだと、読み込むだけで実行されてしまうので、jQuery.fn拡張しメソッドで実行できるようにします。{$('#hide-btn').click(function(){$('#view').fadeOut(1000);});}})(jQuery);先頭に「;」があるのは他のプラグインと併用した場合に、最後に「;」を付けてないプラグインがまれにあるそうで、それが原因でのエラーを回避できます。「$.fn.」の後に続くのがメソッド名です。これで「jquery.hoge.js」を読み込み「hoge」を呼び出せばこのスクリプトが実行されます。{$('#hide-btn').hoge();});</script>柔軟性のあるスクリプト「$(‘#hide-btn’).hoge();」としていますが、実際は何を指定しても「#hide-btn」をクリックしないと実行されないのであまり柔軟性がよろしくないですね。html側で動作するボタンを指定するにはスクリプトの「$(‘#hide-btn’)」を「$(this)」に変更します。{$(this).click(function(){$('#view').fadeOut(1000);});}こうすることで「$(‘#hide-btn2’).hoge();」と指定すれば、「#hide-btn2」から実行できるようになります。オプションを変更できるようにするサンプルのスクリプトは「fadeOut(1000)」とフェードアウトの速度を直接指定しています。いった設定はhtml側で変更できた方がいいですよね。htmlで「fadeSpeed」というオプションを設定します。5000});});この値を使用するには下記のようになります。{alert(options.fadeSpeed);};しかし受け取った値をそのまま使用すると、必ずオプションを設定しないといけないので、使用側としてはめんどくさいですね。できればオプションを記述しないでも動作して、さらにオプションを指定することができるようにしたいものです。そのために、デフォルトオプションというのを作成します。そのデフォルトオプションと指定されたオプションを「extend」でマージするということを行います。1000};こうすることで何も指定がなかった場合「$.fn.hoge.defaults」がデフォルトの値として使用されることになります。複数のオプションを変更できるようにする複数のオプションを設定するには「,」で区切るだけです。「#view」を非表示していましたが、これも変更できるようにしてみましょう。'#view'};これくらい単純なスクリプトだとあまり意味ないですが、これを機に積極的にプラグイン化していきたいなとか。定義したファイルの後に読み込ませないとだめかもしれませんが、できますよ。html側で動作するボタンを指定するにはスクリプトの「$(‘#hide-btn’)」を「$(this)」に変更します。プラグインの関数内部ではthisがjQueryオブジェクトなので、「$(this)」ではなく「this」でOKです。ご指摘ありがとうございます。参考ページも含め勉強になりました。jQueryのPlugIn化の事例は他のサイトよりわかりやすいですね。Yasuさんわざわざコメントありがとうございます。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。