Jqueryで独自プラグインを自作してみました
ホームページ屋にとって、JqueryやJavascriptといったブラウザ側での表示操作は必須スキルです。
なので、ちょこちょこJqueryを使って構築することも多々あります。
ある日、ふと思いました。
作ったソースをプラグイン化できないかなぁ。
画像のスライド表示プラグインなど、Jqueryプラグインは多々あります。
これらは呼び出すだけで動きます。
Jqueryで自作したものは、その都度修正を入れたりしていますが、プラグイン化して変更する部分はパラメータ渡しにすれば、制作上の利便性が向上します。
というわけで、今回はJqueryプラグイン構築について、ググって調べて実践してみました。
今回プラグイン化するサンプル
お手数ですが、サンプルを見ていただければ幸いです。
サンプルは現在時刻を表示するだけの代物です。
Jqueryで組み込んでいます。
今回これをプラグイン化します。
ちなみにソースを以下に記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!doctype html> <html> <head> <meta charset="shift_jis"> <title>Jquery プラグイン</title> <style> body { text-align:center; } p { font-size:24px; text-align:center; border-top-width:3px; border-bottom-width:3px; border-top-style:solid; border-bottom-style:solid; border-top-color:#999; border-bottom-color:#999; padding-top:20px; padding-bottom:20px; } input[type=button] { font-size:30px; padding:10px; text-align:center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("input[type=button]").click(function() { if($(this).attr("name")==="off") { $(this).attr("name","on"); $(this).val("表示を消す"); $("#message").css("color","#FF0000"); $("#message").text(date_get()); timecode=setInterval(function(){$("#message").text(date_get());},1000); } else { clearInterval(timecode); $("#message").text("ボタンを押すと現在時刻が表示されます"); $("#message").css("color","#000000"); $(this).attr("name","off"); $(this).val("現在時間を表示"); } }); functiondate_get() { date=newDate(); y=date.getFullYear(); m=("0"+(date.getMonth()+1)).slice(-2); d=("0"+date.getDate()).slice(-2); h=date.getHours(); i=("0"+date.getMinutes()).slice(-2); s=("0"+date.getSeconds()).slice(-2); return(y+"/"+m+"/"+d+" "+h+":"+i+":"+s); } }); </script> </head> <body> <pid="message">ボタンを押すと現在時刻が表示されます</p> <input name="off"type="button"value="現在時間を表示"> </body> </html> |
とはいえプラグイン化する方法がさっぱりわかりません
Jqueryをそこそこ知っていても、プラグインとなるとさっぱりわかりません。
C言語ベースのプログラム屋からすると、次のことがよくわかりませんでした。
- プラグインとサブルーチンは何が違うの？
- パラメータの引き渡しをどうやって受け取っているの？
これらを踏まえて調べてみました。
プラグインの基本的なこと
Jqueryプラグインを使ったことはありますが、作るとなると途端にとっつきにくくなります。
でも調べてみると、たった2つのことを理解すればよいことがわかりました。
理解すべき点その1：基本フォーマット
プラグインにも文法があります。
作るときには、以下の記述をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | (function($) { $.fn.独自名称1=function(options) { // パラメータデフォルト設定 var独自名称2= { } // パラメータを配列化 var独自名称3=$.extend(独自名称2,options); returnthis; } })(jQuery); |
独自名称部分には、オリジナルの名前を付けてOKです。
プラグインを呼び出す場合、以下のように記述します。
1 | $("#sample").独自名称1(); |
これを実現するために、「$.fn.独自名称1」という記述をします。
プラグイン名称の設定といったところです。
おおよそこのひな形をベースに構築すればプラグインになります。
理解すべき点その2：引数渡しの方法
プラグインといえば、独自の引数渡しがあります。
例えば以下のような記述です。
1 2 3 4 5 | $("#sample").独自名称1({ color:"#ff0000", size:300, loop:true }); |
スライド系プラグインでよく見かける形です。
この引数をプラグインではどうやって受け取っているのでしょうか?
それが以下の部分の記述になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 | $.fn.独自名称1=function(options) { // パラメータデフォルト設定 var独自名称2= { color:"#00ff00", size:600, loop:false } // パラメータを配列化 var独自名称3=$.extend(独自名称2,options); } |
デフォルトパラメータは記述しなくてもエラーにはなりませんが、呼び出し側で省略できるようにするためには、デフォルト値を設定しておいたほうが無難です。
$.fn.独自名称1 = function(options) の記述で、optionsの部分が、呼び出し側から渡される引数です。
$.extendは差分上書き関数で、「デフォルト値」に「引数」を上書きしています。
これで必要な引数すべての値を取得することができます。
これらを踏まえてプラグイン化したものがこちらです
ソースはこちらです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <!doctype html> <html> <head> <meta charset="shift_jis"> <title>Jquery プラグイン</title> <style> body { text-align:center; } p { font-size:24px; text-align:center; border-top-width:3px; border-bottom-width:3px; border-top-style:solid; border-bottom-style:solid; border-top-color:#999; border-bottom-color:#999; padding-top:20px; padding-bottom:20px; } input[type=button] { font-size:30px; padding:10px; text-align:center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("input[type=button]").click(function() { // ① 呼び出し側の記述 $("#message").time_disp({ name:"#message02", color:"#22ac38", btn:$(this), btn_msg_off:"現在時間を表示します", btn_msg_on:"表示を消します", def_msg:"ボタンを押すと現在時刻を表示します" }); }); }); // プラグイン部分▼▼▼▼▼－－－－－－－－－－－－ (function($) { // ② 基本的な記述 $.fn.time_disp=function(options) { // ③ デフォルトパラメータ設定 vardefault_para= { name:"#message", color:"#FF0000", def_color:"#000000", btn:"input[type=button]", btn_msg_off:"現在時間を表示", btn_msg_on:"表示を消す", def_msg:"ボタンを押すと現在時刻が表示されます" } // ④ パラメータ取得 varpara=$.extend(default_para,options); // ⑤ 直接指定部分をパラメータに置き換える if($(para.btn).attr("name")==="off") { $(para.btn).attr("name","on"); $(para.btn).val(para.btn_msg_on); $(para.name).css("color",para.color); $(para.name).text(date_get()); timecode=setInterval(function(){$(para.name).text(date_get());},1000); } else { clearInterval(timecode); $(para.btn).attr("name","off"); $(para.btn).val(para.btn_msg_off); $(para.name).text(para.def_msg); $(para.name).css("color",para.def_color); } functiondate_get() { date=newDate(); y=date.getFullYear(); m=("0"+(date.getMonth()+1)).slice(-2); d=("0"+date.getDate()).slice(-2); h=date.getHours(); i=("0"+date.getMinutes()).slice(-2); s=("0"+date.getSeconds()).slice(-2); return(y+"/"+m+"/"+d+" "+h+":"+i+":"+s); } returnthis; } })(jQuery); // プラグインここまで▲▲▲▲▲－－－－－－－－－－－－ </script> </head> <body> <pid="message02">ボタンを押すと現在時刻を表示します</p> <input name="off"type="button"value="現在時間を表示します"> </body> </html> |
もともとのソースをプラグイン用に書き換えしてみました。
意外とちゃんと動きました。
（1）呼び出し部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(document).ready(function() { $("input[type=button]").click(function() { // ⑥ 呼び出し側の記述 $("#message").time_disp({ name:"#message02", color:"#22ac38", btn:$(this), btn_msg_off:"現在時間を表示します", btn_msg_on:"表示を消します", def_msg:"ボタンを押すと現在時刻を表示します" }); }); }); |
呼び出し部分は、一般的なプラグインと同じです。
＜div id="message">＜／div＞部分に時刻を出力するため、$(“#message").time_disp()で呼び出しします。
time_disp()は、任意につけた名称です。
（２）基本的な記述部分
1 2 3 4 5 6 7 8 9 | (function($) { // ② 基本的な記述 $.fn.time_disp=function(options) { // 中略 } })(jQuery); |
プラグインの基本フォーマットを記述しています。
プラグインの呼び出し名称は time_disp()です。
$.fn.time_disp とプラグインの頭でプラグイン名を指定します。
（３）デフォルトパラメータ設定部分
1 2 3 4 5 6 7 8 9 10 11 12 13 | // ③ デフォルトパラメータ設定 vardefault_para= { name:"#message", color:"#FF0000", def_color:"#000000", btn:"input[type=button]", btn_msg_off:"現在時間を表示", btn_msg_on:"表示を消す", def_msg:"ボタンを押すと現在時刻が表示されます" } |
デフォルトパラメータを設定します。
「default_para」は任意の名称でOKです。
よくよく見ると、ただの配列を記述しているだけです。
（４）パラメータ取得
1 2 | // ④ パラメータ取得 varpara=$.extend(default_para,options); |
デフォルトパラメータに、呼び出し側から渡されたパラメータを上書きしています。
プラグインへの引数渡しを省略できる仕掛けです。
（５）要素名をパラメータに置き換える
もともとは直接指定していた要素名を取得したパラメータに置き換えます。
例えば以下のようにします。
$(“#message").text() → $(para.name).text()
これにより直接指定を無くすことができ、汎用性を高くすることができます。
固定記述は、特定コーディングであることを制限しますが、汎用記述であれば、クラス名など自由に変更できます。
Jqueryプラグインで最初よくわからなかったこと
基本文法と、パラメータ渡しの部分が最初なかなか理解できず最初の一歩を作り出すことができませんでした。
それは、一般的なプログラム言語の呼び出し（サブルーチン）と異なる形だからです。
しかし、Jqueryは要素名を指定してから呼び出しします。
（例えば、$(“#message").time_disp(); ）
サブルーチンだとこのような呼び出しができません。
また一般的なプログラム言語でも、このような呼び出し方がありません。
そこがJquery独自の部分であり、分かりにくいところでした。
パラメータ渡しについても、一般的なプラグインの渡し方が、プラグイン独自の記述方法だと思っていました。
しかし今回分かったのは、単に配列を記述しているだけということでした。
Javascriptの配列記述方法は、少々変わっており、そこがとっつきにくいだけでした。
今回、プラグインの記述方法を調べ実践したことで、理解することができました。
良い経験をいたしました。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
