ウェブ制作でよく使うjQuery関連のCDNまとめ


所要時間: 7

ウェブ制作でよく使うjQuery関連のCDNまとめ
こん**は。CDNがないとウェブ制作がまったくはかどらない@hirok-kです。

静的なHTMLファイルにしろ、phpを使った動的なサイトにしろ、またWordPressなどのテーマを作るときも、ウェブ制作にはなくてはならないjQueryですが、CDN (Contents Delivery Network)で読み込みを行うとバージョン指定も楽に行えますし、最新版も常に使用することができます。そこでjQueryとそれに関わるJSファイルを利用できるCDNをまとめました。

jQuery本体

Code jQuery CDNを使用する

Code jQuery CDNは、jQueryを配布しているjQuery.comが開設しているCDNで、本家本元のCDNと考えても間違いないCDNです。
Code jQuery CDNからjQuery本体を読み込む場合は、次の形式が基本形です。

xxxの箇所には詳細なバージョンナンバーを入れる必要がありますので、ご注意ください。

Code jQuery CDNに用意されているjQuery本体全バージョンはこちらのページで確認可能です。
2015年9月現在の最新版は2.1.4ですので、指定例としてはこうなります。

Google Libraries CDNを使用する

Google Libraries CDNは、Googleによるデベロッパー向けサービスの1つで、本家のCDNではないものの最新版がリリースされてもこちらもすぐに更新されるなど、使い勝手に優れるCDNです。
Google Libraries CDNからjQuery本体を読み込む場合は、次の形式が基本形です。

xxxの箇所にはバージョンナンバーを入れる必要がありますが、Code jQuery CDNとは指定方法が異なるため、注意が必要です。

jQuery UIとテーマ

Code jQuery CDNを使用する

Code jQuery CDNからjQuery本体を読み込む場合とは異なり、指定方法がGoogle Libraries CDNと一部似ている次の形式が基本形です。

xxxの箇所には詳細なバージョンナンバーを入れる必要がありますので、ご注意ください。

Code jQuery CDNに用意されているjQuery UI全バージョンはこちらのページで確認可能です。
2015年9月現在の最新版は1.11.4ですので、指定例としてはこうなります。

Google Libraries CDNを使用する

Google Libraries CDNからjQuery UIを読み込む場合は、次の形式が基本形です。

xxxの箇所にはバージョンナンバーを入れる必要がありますが、jQuery本体と同じバージョン指定方法が使用可能です。

jQuery Mobileとテーマ

Code jQuery CDNを使用する

Code jQuery CDNからjQuery本体を読み込む場合とは異なり、指定方法がGoogle Libraries CDNと一部似ている次の形式が基本形です。

xxxの箇所には詳細なバージョンナンバーを入れる必要があり、それが二箇所ありますので、ご注意ください。

Code jQuery CDNに用意されているjQuery Mobile全バージョンはこちらのページで確認可能です。
2015年9月現在の最新版は1.4.5ですので、指定例としてはこうなります。

Google Libraries CDNを使用する

Google Libraries CDNからjQuery Mobileを読み込む場合は、次の形式が基本形です。

xxxの箇所にはバージョンナンバーを入れる必要がありますが、jQuery本体と同じバージョン指定方法が使用可能です。

jQueryプラグイン

様々なjQueryプラグインがありますが、その全てを毎回ウェブ制作時にjsディレクトリなどに格納したりするのは面倒ですよね。そこで便利なのが、全てというわけではありませんが、かなりの種類のプラグインをCDNで配信しているJSdelivrです。

使い方は簡単で、JSdelivrにアクセスし、使用したいプラグインを検索します。
JSdelivrのトップ画面

表示された検索結果から、CDN filesをAddするとコピーすべきURLが表示されますので、それをコピーして使用します。
JSdelivrの検索結果表示画面

プラグインによっては、JSやCSS、さらには画像が複数同梱されている場合がありますが、この場合でも簡単に導入可能なのが、JSdelivrの特徴です。

なおJSとCSSは同時にAddできませんが、JS同士またはCSS同士であれば、複数Addが可能で、複数指定されたURLをコピーして使用します。残念ながら、画像の複数指定はできませんのでご注意ください。

例として、”gallery”で検索してみましょう。
JSdelivrでgalleryを検索

ここではblueimp-galleryを使用するとして、複数のJSを選択します。すると、選択した複数JS用のURLが表示されますので、それをコピーします。
JSdelivrでgalleryを検索し、複数のJSを選択

それをscriptタグでソースとして貼り付ければ完了です。

なお、画像内右上にある黄色いボタン”3 IN COLLECTION”をクリックすると、scriptタグ付きでコピーが可能です。
JSdelivrでの複数JS選択時のコピーオプション

まとめ

ここで紹介した

の三つを知っていれば、おおよその場合においてCDNを利用したjQuery読み込みが可能になります。

それぞれの容量はそれほど大きくないにしても、塵も積もれば山となるじゃないですが、結果的に大きな効果をもたらしますので、何かの時に使えるように頭の片隅に入れておいていただくと良いかもしれません。

コメントを書いてみませんか?