こん＊＊は。CDNがないとウェブ制作がまったくはかどらない@hirok-kです。
静的なHTMLファイルにしろ、phpを使った動的なサイトにしろ、またWordPressなどのテーマを作るときも、ウェブ制作にはなくてはならないjQueryですが、CDN (Contents Delivery Network)で読み込みを行うとバージョン指定も楽に行えますし、最新版も常に使用することができます。そこでjQueryとそれに関わるJSファイルを利用できるCDNをまとめました。
目 次
jQuery本体
Code jQuery CDNを使用する
Code jQuery CDNからjQuery本体を読み込む場合は、次の形式が基本形です。
|
1 2 3 4 |
<!-- 非圧縮版 --> <script src="https://code.jquery.com/jquery-xxx.js"></script> <!-- 圧縮版 --> <script src="https://code.jquery.com/jquery-xxx.min.js"></script> |
xxxの箇所には詳細なバージョンナンバーを入れる必要がありますので、ご注意ください。
Code jQuery CDNに用意されているjQuery本体全バージョンはこちらのページで確認可能です。
2015年9月現在の最新版は2.1.4ですので、指定例としてはこうなります。
|
1 2 3 4 |
<!-- 非圧縮版 --> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <!-- 圧縮版 --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> |
Google Libraries CDNを使用する
Google Libraries CDNからjQuery本体を読み込む場合は、次の形式が基本形です。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/xxx/jquery.min.js"></script> |
xxxの箇所にはバージョンナンバーを入れる必要がありますが、Code jQuery CDNとは指定方法が異なるため、注意が必要です。
|
1 2 3 4 5 6 |
<!-- 例）ver.1系の最新版を読み込みたい場合 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- 例）ver.1.9系の最新版を読み込みたい場合 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script> <!-- 例）ver.1.9.1を読み込みたい場合 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
jQuery UIとテーマ
Code jQuery CDNを使用する
|
1 2 3 4 5 6 |
<!-- 非圧縮版 --> <script src="https://code.jquery.com/ui/xxx/jquery-ui.js"></script> <!-- 圧縮版 --> <script src="https://code.jquery.com/ui/xxx/jquery-ui.min.js"></script> <!-- テーマ --> <link rel="stylesheet" href="https://code.jquery.com/ui/xxx/themes/smoothness/jquery-ui.css"> |
xxxの箇所には詳細なバージョンナンバーを入れる必要がありますので、ご注意ください。
Code jQuery CDNに用意されているjQuery UI全バージョンはこちらのページで確認可能です。
2015年9月現在の最新版は1.11.4ですので、指定例としてはこうなります。
|
1 2 3 4 5 6 |
<!-- 非圧縮版 --> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <!-- 圧縮版 --> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <!-- テーマ --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> |
Google Libraries CDNを使用する
|
1 2 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/xxx/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/xxx/jquery-ui.min.js"></script> |
xxxの箇所にはバージョンナンバーを入れる必要がありますが、jQuery本体と同じバージョン指定方法が使用可能です。
|
1 2 3 4 5 6 7 8 9 |
<!-- 例）ver.1系の最新版を読み込みたい場合 --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <!-- 例）ver.1.9系の最新版を読み込みたい場合 --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9/jquery-ui.min.js"></script> <!-- 例）ver.1.9.1を読み込みたい場合 --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> |
jQuery Mobileとテーマ
Code jQuery CDNを使用する
|
1 2 3 4 5 6 |
<!-- 非圧縮版 --> <script src="https://code.jquery.com/mobile/xxx/jquery.mobile-xxx.js"></script> <!-- 圧縮版 --> <script src="https://code.jquery.com/mobile/xxx/jquery.mobile-xxx.min.js"></script> <!-- テーマ --> <link rel="stylesheet" href="https://code.jquery.com/mobile/xxx/jquery.mobile-xxx.min.css"> |
xxxの箇所には詳細なバージョンナンバーを入れる必要があり、それが二箇所ありますので、ご注意ください。
Code jQuery CDNに用意されているjQuery Mobile全バージョンはこちらのページで確認可能です。
2015年9月現在の最新版は1.4.5ですので、指定例としてはこうなります。
|
1 2 3 4 5 6 |
<!-- 非圧縮版 --> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> <!-- 圧縮版 --> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <!-- テーマ --> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> |
Google Libraries CDNを使用する
|
1 2 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/xxx/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/xxx/jquery.mobile.min.js"></script> |
xxxの箇所にはバージョンナンバーを入れる必要がありますが、jQuery本体と同じバージョン指定方法が使用可能です。
|
1 2 3 4 5 6 7 8 9 |
<!-- 例）ver.1系の最新版を読み込みたい場合 --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1/jquery.mobile.min.js"></script> <!-- 例）ver.1.4系の最新版を読み込みたい場合 --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4/jquery.mobile.min.js"></script> <!-- 例）ver.1.4.5を読み込みたい場合 --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> |
jQueryプラグイン
様々なjQueryプラグインがありますが、その全てを毎回ウェブ制作時にjsディレクトリなどに格納したりするのは面倒ですよね。そこで便利なのが、全てというわけではありませんが、かなりの種類のプラグインをCDNで配信しているJSdelivrです。
使い方は簡単で、JSdelivrにアクセスし、使用したいプラグインを検索します。
表示された検索結果から、CDN filesをAddするとコピーすべきURLが表示されますので、それをコピーして使用します。
プラグインによっては、JSやCSS、さらには画像が複数同梱されている場合がありますが、この場合でも簡単に導入可能なのが、JSdelivrの特徴です。
なおJSとCSSは同時にAddできませんが、JS同士またはCSS同士であれば、複数Addが可能で、複数指定されたURLをコピーして使用します。残念ながら、画像の複数指定はできませんのでご注意ください。
例として、”gallery”で検索してみましょう。
ここではblueimp-galleryを使用するとして、複数のJSを選択します。すると、選択した複数JS用のURLが表示されますので、それをコピーします。
それをscriptタグでソースとして貼り付ければ完了です。
|
1 |
<script src="https://cdn.jsdelivr.net/g/blueimp-gallery@2.15.0(js/jquery.blueimp-gallery.min.js+js/blueimp-gallery-fullscreen.js+js/blueimp-gallery-indicator.js)"></script> |
なお、画像内右上にある黄色いボタン”3 IN COLLECTION”をクリックすると、scriptタグ付きでコピーが可能です。
まとめ
ここで紹介した
の三つを知っていれば、おおよその場合においてCDNを利用したjQuery読み込みが可能になります。
それぞれの容量はそれほど大きくないにしても、塵も積もれば山となるじゃないですが、結果的に大きな効果をもたらしますので、何かの時に使えるように頭の片隅に入れておいていただくと良いかもしれません。
![シャンパーニュのwikiより詳しい簡単なまとめ[2]](http://www.hirok-k.com/wp/wp-content/uploads/wordpress-popular-posts/562-featured-120x120.jpg)
