jQueryのプラグイン導入・・・jQuery Migrateについても
jQueryの便利なところのひとつは、javascriptについてあまり知らなくても、有名なサイトなどで使っているのと同じような動作を簡単に使える点です。
jsどころかhtmlやcssについても詳しくなくても、見た目にすごそうなwebページを作ることができます。
というのも、有志の方々がさまざまなのプラグインを提供してくださっているからです。
プラグインを利用することによって難しいプログラムを組むことなく、さまざまな処理が行えます。
例えばcolorboxというプラグインの場合、とりあえずjqueryライブラリとcolorboxのjsファイルとcssファイルを目的のhtmlページによみこんで、、指示通りに画像とリンクのパスとjsコードを書き込めば、webページのリンクをクリックするとそのページはグレイアウトして、画像を前面に表示するといった処理を行えたりします。
注意点
プラグインはjqueryに限らず、prototypeであるとかmootoolsであるとか、さまざまなプログラム言語やそれらを元にしたライブラリに対して提供されています。
プラグインを導入することで、複雑なコードを組むことなく、色々な動作や表示をwebページ(等)で実現することができます。
ただし、導入前に注意することがあります。
- 導入したいプラグインの前提のライブラリ(jQueryなど)は何ですか?・・・ベースがjsであるなら特に気にしなくても良いかもしれませんが、jqueryなどのライブラリを事前に読み込んでいることが前提なら、目的のプラグインの他にそのライブラリが使いたいwebページに読み込まれている必要があります。
- 導入したいプラグインのバージョンとベースとなるライブラリのバージョンの組合せ・・・たとえば、jqueryライブラリが前提のプラグインの場合、jqueryのバージョンとプラグインのバージョンの組合せがよろしくないと、正しく動作しない場合があります(あるプラグインのバージョンが1のときjQuery1.7.2で動作したけれど、そのプラグインのバージョンを2にかえたところjQuery1.7.2で動かなくなったと言うことがあったりします)。
- 導入したいプラグインが動作する環境・・・IE9以上でないと動作しないとか、プラグインによっては、動作環境にいろいろ制限があったりします。
- 導入したいプラグインの付随ファイルの有無・・・jQueryプラグインの場合、プラグインを記述したjsファイルの他に、cssファイルや画像ファイル等が必要だったりする場合があります。jsファイルも複数のファイルにわかれている場合があったり、そのプラグインの提供者以外が制作した別のプラグインを併用する必要があったりします。
- ライセンスの問題・・・有志の方々が提供しているプラグインの多くは、無料で利用できたりしますが、それでも商用利用は不可の場合があったり、なにかしら制限があったりすることもあります。使用前にライセンスに関する事項を確認しましょう。
もし商用有料であった場合は、代わりになるプラグインがないか探してみましょう(結構類似のプラグインはあったりします)。
仕事で使いたいのに商用無料で使えるようなプラグインがない場合は、ディレクターやプロデューサーなど予算に関わる人に相談してどうしても使わないと行けない旨を伝えましょう。それでも購入が無理な場合は、代替案がないかエライ人含め、周囲の人と相談してみてください。
- プラグインのバージョンや機能制限によるライセンスの違いに注意・・・使いたいプラグインのバージョンが古いときはライセンスの制限が緩かったのに、最新バージョンでは商用不可になっていたりする場合もあります。
また、複数の機能を有しているプラグインの場合、ある機能はライセンスフリーなのに、ほかの機能はライセンスに制限があったりすることもあります。
過去に商用フリーだったからと、使用要件を確認せずに使ってしまうと、思わぬトラブルに巻き込まれるので、注意してください。
プラグインのバージョンが違うと、機能を呼び出すコードや、オプションのパラメータが異なる場合もあります。
- 複数のライブラリが共存しなければならない場合・・・たとえば、jQueryでは提供されていなくて、mootoolsでしか提供されていないプラグインをどうしても使わざるを得ない場合、そのWEBページではほかのプラグインがjQueryを前提としていたりすると、mootoolsとjQueryがバッティングして旨く動作しないことがあります。
まずは、そのプラグインと類似の動作をするjQueryを前提としたプラグインがないか、探してみてください。できれば、それを使った方が良いです(複数のライブラリを読み込むといろいろトラブルの元です)。
最近は、mootoolsでしか動かないプラグインでも、類似のものがjQueryで提供されていたり(その逆だったり)、結構至れり尽くせりだったりすることが多いです。
ない場合は、mootoolsとjQueryが共存できる方法はないかをネットで調べてください(ほかのライブラリの組合せでも、ネットで探せば解説が結構あります )。
- プラグイン同士の干渉・・・jQueryのバージョンとプラグインのバージョンの組み合わせも問題なく、複数のライブラリが共存しているわけでもないのに、プラグインが動作しないことがあります。
そのページにすでにプラグインがあって、そのプラグインで使われている何かと新しく読みこんだプラグインの何かが干渉しあってしまうこと(セレクタ名などが偶然同じであるなど)があるからです。対処法は場合によりけりなのでここでは言及しませんが、google先生に上手に訊けば、たいていのことは解決します。
- プラグインのファイル名にminがついているものとついていないものがある場合・・・たいてい、プラグインはプラグイン名(英字)とバージョン番号と、拡張子(.js)で成り立っていますが(そうでない場合もあります)、そのファイル名のほかに、[min]という文字列が追加されているものがあったりします([min]が付加されているものだけしかない場合もあります)。たとえば、test.1.2.jsとtest.1.2.min.jsといった感じです。
ふつうは、[min]が付加されているものとされていないものどちらかをダウンロードして読みこめばよいです。たいていの場合[min]は改行や不要なスペースなどを排除して、ファイルを軽量化したものです。
特に、前提となるライブラリ(jQueryなど)が必要なプラグインの場合、ライブラリのバージョンとプラグインのバージョンの組合せによっては動作しない場合があること、プラグインのバージョンによってライセンスの違う場合があること、複数のライブラリの共存には気を付けてください。
jQuery Migrateとは
「jQueryを使うための準備」や上記の「注意点」でも述べていますが、jQueryのバージョンには注意が必要です。
jQuery1.9.x以降、コードの削除や変更が行われたため、以前jQueryを使って自分で書いたコードや、使い慣れたプラグインが動作しなくなってしまうことがあるからです。
jQuery1.9.xより前のバージョンを使っておけばよいのですが、新しく導入したいプラグインがjQuery1.9.x以降でないと動作しないなど、やむを得ずjQueryのバージョンを上げる必要が出てくる場合があると思います。
そういった場合の対処法としてjQuery Migrate pluginを使うという方法があります。
※このプラグインはjQuery1.9.x以降で動作します。
以下からファイルをダウンロードします。
2015/07現在、ファイル名は以下の通りです。
jquery-migrate-1.2.1.min.js
- ファイル名中、数値部分はバージョンになるので、ダウンロードした時期によっては異なります。
- 上記の「注意点」ではminがついていないファイルとついているファイルはファイルサイズ以外は同じと述べましたが、jQuery Migrateは例外で、一部のコードやプラグインがjQuery1.9.x以降で動かない場合に動かしたいときは、[min]がついている方を使ってください。
jQuery(1.9.x以降)とともに、jQuery Migrateのjsファイルを読み込みます。
<script src="jQuery(1.9.x以降)ライブラリのパス" type="text/javascript"></script>
<script src="jQuery Migratのjsファイルのパス" type="text/javascript"></script>
これでjQuery1.9.xより前のバージョンでしか動かないコードやプラグインが動くようになるかもです。
動くようになる「かも」・・・というのは、jQuery Migratは万能ではなく、jQuery1.9.x以降で削除・変更されたコードのすべてが復元されるわけではないということです。
また、そもそも自分が書いたコードや既存のプラグインが動かない原因がjQueryのバージョン違いによるものではない場合もあります。
上記は、一部のコードやプラグインがjQuery1.9.x以降で動かない場合にjQuery Migrateを使って動かせる(かもしれない)方法でしたが、実は[min]がついていない方のファイルで、(動かせないけれど)削除・変更のあったjQueryのコードを使用しようとしたときにブラウザのコンソールに警告を出力することもできます。
<script src="jQuery(1.6.4以降)ライブラリのパス" type="text/javascript"></script>
<script src="jQuery Migratのjsファイル(minがついていない方)のパス" type="text/javascript"></script>
- コンソールに警告を出力する場合はjQuery1.6.4以降であれば、使えるようです(jQuery Migrate ver1.2.1の場合)。
- jQuery Migrateはjquery-migrate-1.2.1.jsのように、[min]が付加されていない方を使います。
このほかに使いたいプラグインなどを読み込んだり、自作のコードを記述したり(またはjsファイルを読み込んだり)してhtmlページを作り、ブラウザで表示させてください。
ブラウザによってコンソールのだしかたは異なりますが、たいていF12キーをおして表示された開発ツールのtabの中から「コンソール」(英字の場合もあり)をクリックすれば見ることができると思います。
詳しくは以下の参考ページを参照するか、google先生に訊いてみてください。
戻る
Top