jQueryプラグインとは、使い方について

今回は初心者の方に向けて、そもそもjQueryプラグインとはなんなのか？につきまして、理解しやすいように記載してみようと思います。

JavaScriptは難しそうだけど、jQueryならプラグインを使えば比較的簡単に色々なことができると、聞いたことはあるけれど、そもそもjQueryのプラグインてなんなの？と思われている初心者の方もいることと思います。そこでjQueryのプラグインにつきまして、初めに学んでほしい事柄および、使い方をまとめてみます。

という事で、それでは今回はッ、

・jQueryプラグインとは
・jQueryプラグインを探す！
・プラグインを使用する際の注意点
・jQueryプラグインのライセンス
・プラグイン組み込み使い方の基本ステップ

上記について記載していこうと思います…。

jQueryプラグインとは

jQueryプラグインは、jQuery本体には実装されていない機能を追加する、jQueryで記述した拡張スクリプトです。
jQueryのコアな機能に加えて、jQueryプラグインにより数多くの機能を追加することができます。また、世界中の開発者がjQueryプラグインを制作して公開しているので、かなりの数が存在する便利な拡張スクリプトになります。

jQueryは、数多くの機能を簡単に利用できるよう設計されていますが、実際の作業では、それだけでは足りないことが多々ございます。そういった場合に、目的に見合った動作を実装したjQueryプラグインを利用することで、jQueryで利用できる機能を追加することができます。

jQueryプラグインを探す！

jQueryプラグインを探す方法としては、公式サイトでカテゴリー別に分類されたリストの中から目的のプラグインを検索したり、デモの確認やプラグインファイルのダウンロードが行えます。

jQueryプラグイン公式サイト

上記では、英語表記だったりしますので日本語表記に直しても直訳だったりします、慣れていない方だと少し分かりにくいかと思います。そこで、実際にどのようにしたら使いたいプラグインを見つけることができるのか、記載してみます。

「jQuery スライダー、jQuery メニュー、jQuery 写真」など、実際に使ってみたい機能を「jQuery」の後に記載して検索をかけるのが、てっとり早く日本語で説明されたページが表示されることと思います。

また、設置方法などはプラグイン検索後に、実際に使用したいプラグイン名、例えば「slick 設置方法」などと検索をかけてみますと、比較的詳しい設置方法などを記載した記事を閲覧することが、可能なことと思います。

プラグインを使用する際の注意点

jQueryの対応ヴァージョンを確認する

jQueryプラグインは、jQuery本体と併せて利用しますが、プラグインの中には特定のバージョン以外のjQueryでは動作しないなど、動作が制限されている場合があります。

通常のヴァージョンで動作するのかプラグインのドキュメントに明記されていることが多いので、プラグインを利用する際は確認しておくことをおすすめします。

複数のプラグインを利用する

jQueryプラグインは、基本的には他のプラグインの動作に影響しないように制作されていますが、プラグインどうしの相性が悪く、期待した動作をしない場合もあります。

そのような場合は、プラグインの組み込む順序を変更することで解消することもありすが、HTMLの構成を変更するか、どちらかのプラグインを変更するなど、状況により対応が異なります。
複数のプラグインを利用する際は、注意が必要になります。

jQueryで競合（コンフリクト）を避ける方法！

jQueryで競合（コンフリクト）を避ける方法！今回は、jQueryを使用する際、他の（jQuery以外）のライブラリと競合（コンフリクト）を避ける方法について、実際にサンプルコードを用いて、詳しく記載していこうと思います。ページ作成の…

jQueryプラグインのライセンス

jQueryプラグインは、オープンソースとして提供されているものが沢山あります。一般にこのような制作物は、開発者の権利や利益を守るため、ライセンスによって保護されています。

それらのライセンスは、一定の利用条件下での「スクリプトの使用」「スクリプトの変更」「コピー」「再配布」を認めています。この場合の再配布とは、スクリプトを変更したものやコピーしたものも含まれます。

下記に利用条件をまとめてみます。

無保証

jQueryプラグインの開発者は、提供したjQueryプラグインの動作を保証しません。その動作の結果何らかの損害が発生しても、保証することはありません。

著作権表示の義務

jQueryプラグインの著作権は、jQueryプラグインの開発者にあります。スクリプトの内容を変更した場合でも、オリジナルの著作権表示がスクリプトの中に含まれている必要があります。

同一ライセンスの適用

スクリプトを変更したり、コピーしたjQueryプラグインを再配布する場合、オリジナルのライセンスを適用する必要があります。オリジナルとは異なるライセンスに変更し、販売することなどは出来ません。

jQueryプラグインの多くは無保証で、著作権表示の義務があります。著作権表示はほとんどの場合、スクリプトファイルの上部にあらかじめ記載されていることが多くなります。

それでは、一般的に利用されているライセンスと、適用されている利用条件をまとめてみます。

・GPL（GUN General Public License）
無保証
著作権表示の義務
同一ライセンスの適用
商用可能

・LGPL（GUN Lesser General Public License）
無保証
著作権表示の義務
同一ライセンスの適用
商用可能

・BSD License
無保証
著作権表示の義務
商用可能

・MIT License
無保証
著作権表示の義務
商用可能

jQuery本体は、MITライセンスとなっているため、適用ライセンスの制限がありません。

これらのライセンスが適用されたjQueryプラグインは、商用利用も可能になっています。なかには、商用利用する際にライセンスを購入する必要があるjQueryプラグインもあるので、注意が必要になります。

ほかにも、「Creative Commons License」というライセンス形態があります。jQueryではあまり多くは適用されていませんが、次の4つのアイコンで、利用状況が表示されています。

4つのアイコンでユーザーが従うべき条件を分かりやすく示すライセンス表示形態です。どの項目がどのような条件で許可されているかは、開発者により異なります。

プラグイン組み込み使い方の基本ステップ

jQueryプラグインの組み込みは、プラグインが公開されているWebサイトからプラグインファイルをダウンロードし、同梱されているドキュメントやデモを確認しながら進めていくのが一般的になります。

ファイルをダウンロードした後は、次のようなステップでHTMLへ組み込みます。

① jQueryの本体ファイルを読みこむ（下記リンク参照）
② jQueryプラグインファイルを読みこむ
③ jQueryプラグインを実行させるためのスクリプトを記述

初心者向け：jQueryの使い方！CDNを読み込む方法

初心者向け：jQueryの使い方！CDNを読み込む方法初心者向けに、jQueryの使い方には、jQuery自体をダウンロードして使う方法と、jQueryのCDNを読み込んで使う方法の2種類の方法があります。「jQueryを使いたいけど、…

jQuery本体は、jQueryプラグインに同梱されている場合があります。CDNを利用する場合には、同梱されているjQueryと同じヴァージョンのファイルを読み込むことをおすすめします。

また、プラグインの種類によっては、上記②までのステップで組み込みが完了するなど、プラグインによって対応が異なることがあります。

jQueryプラグインファイルを読みこむ

ここでは、架空の「sample」プラグインの読み込み方法を記載してみます。jQuery本体、プラグインの順序でファイルを読みこむよう記述します。

この順序が逆になってしまうと、エラーが発生して動作しないので注意が必要になります。

サンプル1

プラグインファイル以外にも、CSSや画像ファイルの読み込みが必要となるプラグインもあります。
その場合はダウンロードファイルに同梱されているか、特定のファイルをダウンロードするように指示されています。

また、処理対象となる要素に対して、特定のid名やclass名を記述するように指示されていることもあるので、プラグインが動作しない場合などは確認が必要になります。

サンプル2

jQueryプラグインファイルを実行させるためのスクリプトの記述

プラグインファイルを読みこむだけで動作するプラグインもありますが、ほとんどのプラグインは、プラグインファイルを読みこむだけでは動作しません。

その場合、プラグインを動作させるためのスクリプトを記述しますが、比較的簡単な記述で実行できるようになっています。

$( セレクタ ).プラグイン名（パラメータ）；

パラメータの有無は、プラグインにより異なります。

次の例では、id=”test”要素に対して「sample」プラグインの処理を記述した例になります。

サンプル3

$(function(){ //お約束のHTMLが読みこまれた時点でのスクリプト実行

$(#test).sample({

fade-in: true

});

</script>

といことで今回は、jQueryプラグインとは、使い方についてサンプルを交え詳しく記載してみました。

jQueryプラグイン、ひと言でいってとても便利なスクリプトです。しかしながら初心者のうちは、なかなか記述順序や、スクリプトを実行させるための記述方法など、なかなか思ったようにいかない事もあることと思います。やはりその場合は、基本に立ち返ってjQueryの基本構文をしっかりと身につけておくことで、スクリプトを実行させる記述も、比較的楽に理解できることと思います。

とりあえず、今回はここまで…。

ご相談・問合せ・お仕事のご依頼は↓コチラより…、それではまた次回…。