X
pm studio world wide news pj club
pm studio world wide news pj club
news, tech, music, film, sports, cg, translation, photo uploader
  • 2015-12-09
  • PJ Club
  • How to create jQuery Plugin / jQueryプラグインの作り方:基礎編
  • PJ Club2回目は、jQueryのプラグインの作り方です。今やWeb制作では必須となったjQuery。便利なプラグインがネットに一杯アップされています。
    しかし、時々そこまでの機能はいらないんだけどと思ったり、自分でカスタマイズできるオリジルのプラグインがあったら便利だなと、思う事もあります。と言うことで、オリジナルを作ってみましょう。
    jQueryはプラグイン用のスクリプトが予め準備されており、これを使うと簡単にプラグインが作れます。

    プラグイン側は、下記のようになります。
    (function($) {
         $.fn.ファンクション名 = function(options){
              ここへプラグインの処理を記述
         };
    })(jQuery);

    呼び出すスクリプトです。
    $(document).ready(function() {
         $("tagのID、またはClass").ファンクション名();
    });

    HTMLです。
    <div id="plug_test" class="plug_test""></div>

    たったこれだけです。
    では、プラグインでよく見かけるパラメーターですが、記述の仕方は、下記のようになります。(パラメーターが2つの場合)
    関数内のパラメーター初期値は、パラメーターを設定しない時に使用されるもので、パラメーターがあれば上書きされます。

    //プラグイン側
    (function($) {
         $.fn.ファンクション名 = function(options){
              var パラメータ名=$.extend( {
                  パラメーター1 : "初期値",
                  パラメーター2 : "初期値"
              }, options);

              //パラメーター値の取得
              パラメータデータ1=パラメータ名.パラメーター1;
              パラメータデータ2=パラメータ名.パラメーター2;

              ここへプラグインの処理を記述
         };
    })(jQuery);

    //スクリプト側
    $(document).ready(function() {
         $("tagのID、またはClass").ファンクション名({
              パラメーター1 : "変更する値",
              パラメーター2 : "変更する値"
         });
    });

    //HTML内
    <div id="id名" class="クラス名"></div>

    基本的にプラグインは、配列になっているため、プラグインを複数設定しても自動で、順番に処理してくれます。

    $(document).ready(function() {
         $("1個目のtagのID、またはClass").ファンクション名({
              パラメーター1 : "変更する値",
              パラメーター2 : "変更する値"
         });

         $("2個目のtagのID、またはClass").ファンクション名({
              パラメーター1 : "変更する値",
              パラメーター2 : "変更する値"
         });
    });

    <div id="1個目のid名" class="1個目のクラス名"></div>
    <div id="2個目のid名" class="2個目のクラス名"></div>
  • 簡単に、jQueryのオリジナルプラグインが作成できそうですね。
    さて、今回pm studioでは、video tagのオーディオ用プラグインを作成したかったので、作ってみました。
    前回でも紹介した「PM Player」です。


    しかし、作成上でちょっと問題がありました。
    HTML5のvideo tagはJavaScriptで再生、停止、音声を制御できます。Properties、EventはHTML5であらかじめ用意されてます。基本的に、オーディオプレイヤーもビデオプレイヤーも同じです。
    以下のサイトにスクリプトの一覧表があります。

    W3Schools.com:http://www.w3schools.com/tags/ref_av_dom.asp

    例えば、
    <video width="320" height="240" src="動画のURL" type="video/mp4" id="ビデオタグのid" poster="動画の静止画" controls></video>
    のようなvideo tagでは、

    video= document.getElementById(ビデオタグのid");
    video.onloadedmetadata=function() {
         スクリプト記述
    };

    addEventListener()を使用した場合は、

    video.addEventListener("loadedmetadata", function() {
         スクリプト記述
    }, false);

    等のように指定した要素にスクリプトを記述します。複数要素の場合は、それぞれの要素にスクリプトを記述しなければなりません。プラグインの作成でここが問題となりました。
    プラグインは配列なので、複数でもビデオタグのidを変更すれば、自動でvideo用のスクリプトを呼んでくれると思ったのですが、このvideo syntaxは複数の要素があった場合、1回づつ上書きをします。そのため、スクリプトは最後尾の要素だけに反映されてしまいます。これの回避の方法は、関数を使用します。
    例えば、playerSet()と言う関数を作り、

    videoNum= document.getElementById(ビデオタグのid");
    playerSet(videoNum);
    function playerSet(video){
         video.onloadedmetadata=function() {
              script記述
         };
    }

    のようにすると、複数要素それぞれに関数が処理されるため、video syntaxは上書きされません。
    全体の例です。

    (function($) {
         $.fn.ファンクション名 = function(options){
         var パラメータ名=$.extend( {
                  パラメーター1 : "初期値",
                  パラメーター2 : "初期値"
         }, options);

              //パラメーター値の取得
              パラメータデータ1=パラメータ名.パラメーター1;
              パラメータデータ2=パラメータ名.パラメーター2;

              //Video用スクリプト
              videoNum= document.getElementById(ビデオタグのid");
              playerSet(videoNum);
              function playerSet(video){
                   video.onloadedmetadata=function() {
                        script記述
                   };
              }
         };
    })(jQuery);

    サンプルはここをクリック

    ま、簡単に作成できるけど、用途によっては、ちょっとしたコツもいると言うことですね。
    次回は、RSSから最新情報を取得するニュースフィードの作り方を紹介したいと思います。
  • source : pm studio world wide news
Recent Post
Latest News
Billboard Hot 100
Top 10
  • No.1
    In My Feelings
    Drake
  • No.2
    I Like It
    Cardi B, Bad Bunny & J Balvin
  • No.3
    Girls Like You
    Maroon 5 & Cardi B
  • No.4
    Nice For What
    Drake
  • No.5
    Boo'd Up
    Ella Mai
  • No.6
    God's Plan
    Drake
  • No.7
    Lucid Dreams
    Juice WRLD
  • No.8
    Don't Matter To Me
    Drake & Michael Jackson
  • No.9
    Psycho
    Post Malone & Ty Dolla $ign
  • No.10
    The Middle
    Zedd, Maren Morris & Grey
BBC Radio 1 Singles 40
Top 10
  • Don't Matter To Me (feat. Michael Jackson)
  • No.5
    "Don't Matter To Me (feat. Michael Jackson)"
    Drake
  • Editor: Toshio Maeoka / pm studio
    pm studio world wide news © 2014-2018 . All Rights Reserved
^
to TOP