【Chapter8】プラグイン

概要と目標 jQueryプラグインを使って、
楽をしよう。

jQueryには様々なプラグインが存在する。
ネットで見つけたプラグインを使えるようになろう。

今回のゴール

RERUN

新しいウインドウで表示する

プラグインとは jQueryの機能を拡張するライブラリ。

プラグインとは、jQueryと一緒に利用するJavaScriptのライブラリのこと。
膨大な数のプラグインがネット上にあるため、手軽に様々な効果が付けれる。

公式のプラグイン紹介ページ（https://plugins.jquery.com/）

RERUN

新しいウインドウで表示する

プラグインの使い方プラグインのファイルを読み込み、
実行するだけ。

多くのプラグインは以下の手順で利用できる。
ただし、プラグイン利用時には必ずライセンスを確認してから利用すること。

プラグインを探す
プラグインを読み込む（JSファイル、CSSファイルなど）
※. ファイルをダウンロードするか、CDNのコードをコピー)
※. 基本はファイル容量の軽い「minified」を利用
※. プラグインのJSファイルは必ず、jQuery本体より後に読み込む
プラグインを実行

jQuery UI よく見かけるUIのパッケージ。

カレンダーや、タブなど、よく見かける様々なUIが簡単に使えるプラグイン。

jQuery UIのサイト（https://jqueryui.com/）

RERUN

新しいウインドウで表示する

jQuery UIを使ってみよう。

「jquery-lessons」 › 「chapter08」 › 「jquery-ui」フォルダ内の「index.html」を開く
下記を参考に必要なファイルを読み込む

chapter08/jquery-ui/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
</head>
<body>
  <h1>jQuery UI</h1>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
</body>
</html>

上書き保存
jQuery UIのサイトのデモページ（https://jqueryui.com/demos/）から、
実装したい機能を探しHTMLを追記する

chapter08/jquery-ui/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
</head>
<body>
  <h1>jQuery UI</h1>

  <p>Date: <input type="text" id="datepicker"></p>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
</body>
</html>

読み込んだプラグインのJSファイルより後にプラグインの実行コードを記述

chapter08/jquery-ui/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
</head>
<body>
  <h1>jQuery UI</h1>

  <p>Date: <input type="text" id="datepicker"></p>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function () {
      $("#datepicker").datepicker();
    });
  </script>
</body>
</html>

上書き保存
「jquery-lessons」 › 「chapter08」 › 「jquery-ui」フォルダ内の「index.html」をブラウザで開く
プラグインが機能しているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

bxSlider 超ド定番のjQueryスライダー。

jQueryには様々なスライダー系のプラグインがある。
bxSliderはその中でも、オプションが豊富な、ど定番のプラグイン。

bxSliderのサイト（https://bxslider.com/）

RERUN

新しいウインドウで表示する

bxSliderを使ってみよう。

「jquery-lessons」 › 「chapter08」 › 「bxslider」フォルダ内の「index.html」を開く
bxSliderのインストールページ（https://bxslider.com/install/）を参考に、
必要なファイルを読み込む

chapter08/bxslider/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>bxSlider</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
</head>
<body>
  <h1>bxSlider</h1>

  <div class="container">
    <ul>
      <li><img src="images/photo-sea.jpg" alt="きれいな海"></li>
      <li><img src="images/photo-mountain.jpg" alt="きれいな山"></li>
      <li><img src="images/photo-sky.jpg" alt="きれいな空"></li>
      <li><img src="images/photo-river.jpg" alt="きれいな川"></li>
      <li><img src="images/photo-town.jpg" alt="きれいな街"></li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</body>
</html>

上書き保存
bxSliderのインストールページ（https://bxslider.com/install/）を参考に、
スライドアイテムの親要素にclass属性を指定。

chapter08/bxslider/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>bxSlider</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
</head>
<body>
  <h1>bxSlider</h1>

  <div class="container">
    <ul class="slider">
      <li><img src="images/photo-sea.jpg" alt="きれいな海"></li>
      <li><img src="images/photo-mountain.jpg" alt="きれいな山"></li>
      <li><img src="images/photo-sky.jpg" alt="きれいな空"></li>
      <li><img src="images/photo-river.jpg" alt="きれいな川"></li>
      <li><img src="images/photo-town.jpg" alt="きれいな街"></li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</body>
</html>

読み込んだJSファイルより後にプラグインの実行コードを記述

chapter08/bxslider/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>bxSlider</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
</head>
<body>
  <h1>bxSlider</h1>

  <div class="container">
    <ul class="slider">
      <li><img src="images/photo-sea.jpg" alt="きれいな海"></li>
      <li><img src="images/photo-mountain.jpg" alt="きれいな山"></li>
      <li><img src="images/photo-sky.jpg" alt="きれいな空"></li>
      <li><img src="images/photo-river.jpg" alt="きれいな川"></li>
      <li><img src="images/photo-town.jpg" alt="きれいな街"></li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
  <script>
    $(function () {
      $('.slider').bxSlider();
    });
  </script>
</body>
</html>

上書き保存
「jquery-lessons」 › 「chapter08」 › 「bxslider」フォルダ内の「index.html」をブラウザで開く
プラグインが機能しているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

オプション多くのプラグインは、
オプションがある。

jQueryのプラグインの多くはオプションを指定できる。
オプションを指定する時は、プラグイン実行用メソッドのパラメータとして指定する。

オプションを指定してみよう。

「jquery-lessons」 › 「chapter08」 › 「bxslider」フォルダ内の「index.html」を開く
bxSliderのオプションページ（https://bxslider.com/options/）を参考に、
オプションを設定する

chapter08/bxslider/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>bxSlider</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
</head>
<body>
  <h1>bxSlider</h1>

  <div class="container">
    <ul class="slider">
      <li><img src="images/photo-sea.jpg" alt="きれいな海"></li>
      <li><img src="images/photo-mountain.jpg" alt="きれいな山"></li>
      <li><img src="images/photo-sky.jpg" alt="きれいな空"></li>
      <li><img src="images/photo-river.jpg" alt="きれいな川"></li>
      <li><img src="images/photo-town.jpg" alt="きれいな街"></li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
  <script>
    $(function () {
      $('.slider').bxSlider({
        mode: 'fade',
        auto: true,
        pause: 3000
      });
    });
  </script>
</body>
</html>

上書き保存
「jquery-lessons」 › 「chapter08」 › 「bxslider」フォルダ内の「index.html」をブラウザで開く
プラグインが機能しているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

プラグインの自作プラグインは自分で作ることもできる。

よく使う機能をプラグイン化しておけば、様々な案件で使いまわしやすくなる。
ただし、プラグインの作成には他のJavaScriptやプラグインと変数名や関数名が衝突しないなどの配慮が必要で少々複雑。
ここでは最低限のプラグイン作成方法を紹介。

プラグインの作り方

$.fn.プラグイン実行用のメソッド名 = function() {
  // プラグイン化する処理
  return this;
}

プラグインの実行方法

$(セレクタ).プラグイン実行用のメソッド名()

なお、プラグインファイル内で、実行時のセレクタを使うには、
「this」というキーワードを使うことで利用できる。

モーダルウインドウを
プラグイン化してみよう。

「jquery-lessons」 › 「chapter08」 › 「mymodal」フォルダ内に「jquery.mymodal.js」を作成
下記を参考にプラグイン作成のコードを記述

chapter08/mymodal/jquery.mymodal.js

$.fn.mymodal = function () {
  // ここにプラグインの処理

  return this;
}

「cahpter5」で作った、モーダルウインドウのコードをコピーする

モーダルウインドウのコード

$('.js-modalWindow').click(function () {
  // body要素内の末尾にdiv要素を追加
  $('body').append('<div class="overlay"></div>');

  // .overlay をフェードイン
  $('.overlay').fadeIn(300);

  // イベントが発生した要素のhref属性の属性値を取得
  var target = $(this).attr('href');
  // console.log(target);

  // 新たなimg要素を生成
  var largeImg = '<img src="' + target + '" class="content">';

  // .overlay の子要素として追加
  $('.overlay').append(largeImg);

  // body要素に is-active classを追加
  $('body').addClass('is-active');

  // リンク機能を無効化
  return false;
});

// 非表示用のクリックイベント
$('body').on('click', '.overlay', function () {
  // 自身をフェードアウトで非表示にし、コールバック関数発動
  $(this).fadeOut(300, function () {
    // フェードアウト完了後、自身を削除
    $(this).remove();

    // body要素の is-active classを外す
    $('body').removeClass('is-active');
  });
});

chapter08/mymodal/jquery.mymodal.js

$.fn.mymodal = function () {
  // ここにプラグインの処理
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // .overlay の子要素として追加
    $('.overlay').append(largeImg);

    // body要素に is-active classを追加
    $('body').addClass('is-active');

    // リンク機能を無効化
    return false;
  });

  // 非表示用のクリックイベント
  $('body').on('click', '.overlay', function () {
    // 自身をフェードアウトで非表示にし、コールバック関数発動
    $(this).fadeOut(300, function () {
      // フェードアウト完了後、自身を削除
      $(this).remove();

      // body要素の is-active classを外す
      $('body').removeClass('is-active');
    });
  });

  return this;
}

プラグイン実行時のセレクタを「this」に置き換える

chapter08/mymodal/jquery.mymodal.js

$.fn.mymodal = function () {
  // ここにプラグインの処理
  this.click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // .overlay の子要素として追加
    $('.overlay').append(largeImg);

    // body要素に is-active classを追加
    $('body').addClass('is-active');

    // リンク機能を無効化
    return false;
  });

  // 非表示用のクリックイベント
  $('body').on('click', '.overlay', function () {
    // 自身をフェードアウトで非表示にし、コールバック関数発動
    $(this).fadeOut(300, function () {
      // フェードアウト完了後、自身を削除
      $(this).remove();

      // body要素の is-active classを外す
      $('body').removeClass('is-active');
    });
  });

  return this;
}

上書き保存
「jquery-lessons」 › 「chapter08」 › 「mymodal」フォルダ内にある「index.html」をテキストエディタで開く
作成したプラグインファイルを読み込む

chapter08/mymodal/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像のモーダルウインドウ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>画像のモーダルウインドウ</h1>

  <ul>
    <li>
      <a href="images/pizza-large.jpg" class="js-modal">
        <img src="images/pizza-thumb.jpg" alt="ピザ">
      </a>
    </li>
    <li>
      <a href="images/pasta-large.jpg" class="js-modal">
        <img src="images/pasta-thumb.jpg" alt="パスタ">
      </a>
    </li>
    <li>
      <a href="images/hamburger-large.jpg" class="js-modal">
        <img src="images/hamburger-thumb.jpg" alt="ハンバーガー">
      </a>
    </li>
    <li>
      <a href="images/onigiri-large.jpg" class="js-modal">
        <img src="images/onigiri-thumb.jpg" alt="おにぎり">
      </a>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="jquery.mymodal.js"></script>
</body>
</html>

プラグイン実行用のコードを記述

chapter08/mymodal/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像のモーダルウインドウ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>画像のモーダルウインドウ</h1>

  <ul>
    <li>
      <a href="images/pizza-large.jpg" class="js-modal">
        <img src="images/pizza-thumb.jpg" alt="ピザ">
      </a>
    </li>
    <li>
      <a href="images/pasta-large.jpg" class="js-modal">
        <img src="images/pasta-thumb.jpg" alt="パスタ">
      </a>
    </li>
    <li>
      <a href="images/hamburger-large.jpg" class="js-modal">
        <img src="images/hamburger-thumb.jpg" alt="ハンバーガー">
      </a>
    </li>
    <li>
      <a href="images/onigiri-large.jpg" class="js-modal">
        <img src="images/onigiri-thumb.jpg" alt="おにぎり">
      </a>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="jquery.mymodal.js"></script>
  <script>
    $(function () {
      $('.js-modal').mymodal();
    });
  </script>
</body>
</html>

上書き保存
「jquery-lessons」 › 「chapter08」 › 「mymodal」フォルダ内にある「index.html」をブラウザで開く
モダールウインドウが表示されるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

（おまけ）オプションを設定してみよう

オプジョンは、引数にオブジェクト型で設定値を渡すことで設定できる。

$.exted()メソッド・・・オブジェクトを結合するメソッド

$.extend(元となるオブジェクト, 結合するオブジェクト)

「jquery-lessons」 › 「chapter08」 › 「mymodal」フォルダ内にある「jquery.mymodal.js」を開く
下記を参考にオプションを受け取れるように変更する

chapter08/mymodal/app.js

$.fn.mymodal = function (options) {
  // ここにプラグインの処理

  // オプションの設定
  var settings = $.extend({
    speed: 300
  }, options);

  this.click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(settings.speed);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // .overlay の子要素として追加
    $('.overlay').append(largeImg);

    // body要素に is-active classを追加
    $('body').addClass('is-active');

    // リンク機能を無効化
    return false;
  });

  // 非表示用のクリックイベント
  $('body').on('click', '.overlay', function () {
    // 自身をフェードアウトで非表示にし、コールバック関数発動
    $(this).fadeOut(settings.speed, function () {
      // フェードアウト完了後、自身を削除
      $(this).remove();

      // body要素の is-active classを外す
      $('body').removeClass('is-active');
    });
  });

  return this;
}

上書き保存
「jquery-lessons」 › 「chapter08」 › 「mymodal」フォルダ内にある「index.html」をテキストエディタで開く
オプションを設定する

chapter08/mymodal/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像のモーダルウインドウ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>画像のモーダルウインドウ</h1>

  <ul>
    <li>
      <a href="images/pizza-large.jpg" class="js-modal">
        <img src="images/pizza-thumb.jpg" alt="ピザ">
      </a>
    </li>
    <li>
      <a href="images/pasta-large.jpg" class="js-modal">
        <img src="images/pasta-thumb.jpg" alt="パスタ">
      </a>
    </li>
    <li>
      <a href="images/hamburger-large.jpg" class="js-modal">
        <img src="images/hamburger-thumb.jpg" alt="ハンバーガー">
      </a>
    </li>
    <li>
      <a href="images/onigiri-large.jpg" class="js-modal">
        <img src="images/onigiri-thumb.jpg" alt="おにぎり">
      </a>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="jquery.mymodal.js"></script>
  <script>
    $(function () {
      $('.js-modal').mymodal({
        speed: 500
      });
    });
  </script>
</body>
</html>

「jquery-lessons」 › 「chapter08」 › 「mymodal」フォルダ内にある「index.html」をブラウザで開く
フェードのスピードが変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

まとめプラグインを使えば、
様々な機能が容易に実装できる。

jQueryにはたくさんのプラグインが存在する。
よく見かけるサイト上の動きは、ネットを探せばプラグイン化されてるものが多い。

プラグインは、jQuery本体より後に読み込む
プラグイン実行用のメソッドを記述する必要がある
プラグインは、自分で作ることもできる

Chapter08 プラグイン

jQuery UIを使ってみよう。

bxSliderを使ってみよう。

オプションを指定してみよう。

モーダルウインドウをプラグイン化してみよう。

（おまけ）オプションを設定してみよう

モーダルウインドウを
プラグイン化してみよう。