jQueryプラグインの設置方法

このブログでもjQueryのプラグインを紹介していますが、jQueryプラグインの詳しい設置方法を書いていなかったので、jQuery本体の読み込み、プラグインの読み込み、プラグインの初期化の順で説明します。

公式ページからファイルを取得

公式ページからjQueryをダウンロードします。

ダウンロードのページには以下のバージョンがあります。
「jQuery 1.x」：Internet Explorer 6、7、8をサポートしています。
「jQuery 2.x」：Internet Explorer 6、7、8をサポートしていません。

マイクロソフトは2016年1月13日でInternet Explorer 8をサポートしなくなりましたので、「jQuery 2.x」を使用しても良いのですが、場合によっては「jQuery 1.x」を使用するケースがあるかもしれません。

jQueryのファイルは以下の２つの種類があります。「Download the compressed, production jQuery X.X.X」は、改行コードなどを省いてファイルサイズを小さくしたものです。「Download the uncompressed, development jQuery X.X.X」は、改行コードを省いていない分、見やすくなっています。プラグインを使用するだけならば「compressed」の方をダウンロードします。

jQuery本体の読み込み

jQuery本体は、一般的には<head>タグ内で読み込みます。

ダウンロードしたjQueryを読み込む方法

「js」というフォルダーを作成して、ダウンロードしたjQueryを「js」フォルダに保存して読み込む場合


<html>
<head>
  ・
  ・
  <script type="text/javascript" src="./js/1.12.0/jquery.min.js"></script>
  ・
</head>

CDN(Content Delivery Network)から読み込む方法

jQuery、google、Microsoftなどのサーバーに置いてあるjQueryを読み込んで使用することもできます。

jQuery


<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

google


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Microsoft


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>

プラグインの読み込み

jQuery本体を保存している「js」フォルダーにプラグインも保存します。プラグイン本体の読み込みは、<head>タグ内で読み込みますが、プラグインによっては、<body>タグの最後の方で読み込むものもありますのでプラグインのドキュメントを確認してください。


<script type="text/javascript" src="./js/XXXXX.js"></script>

プラグインの初期化

プラグインの初期化は、プラグインによって記述が必要だったり必要なかったりしますので、プラグインのドキュメントを確認してください。初期化の記述が必要な場合は、プラグインを読み込んだ後に記述します。

例1

<head>タグの中で読み込みと初期化を行う例です。


<!DOCTYPE html>
<html lang="ja">
<head>
    ・
    ・
  <script type="text/javascript" src="./js/2.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="./js/XXXXX.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('XXXX').XXXXXX(); /* 初期化 */
    });
  </script>
</head>
<body>
 ・
 ・

例2

<head>タグの中でjQuery本体を読み込み、</body>の直前でプラグインを読み込み初期化する例です。


<!DOCTYPE html>
<html lang="ja">
<head>
  ・
  <script type="text/javascript" src="./js/2.2.0/jquery.min.js"></script>
</head>
<body>
  ・
  ・
  ・
  <script type="text/javascript" src="./js/XXXXX.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('XXXX').XXXXXX(); /* 初期化 */
    });
  </script>
</body>
</html>