js（ jQueryメイン）で使用できるcdnについて概要、使用方法などまとめてみました。
後半使えそうなcdnリンクも用意しています。
CDNとは
CDNとはコンテンツデリバリネットワーク(content delivery network)の略称です。
CDNのリンク設定をすれば、わざわざjQueryプラグインなどのファイルをダウンロードやアップロードしなくても、ファイルの読み込み設定だけで別サーバから自サイトのデータとして使用できます。
そうすることによりアクセス集中時のサーバーの負荷を軽減することができます。
また、WEB制作者にとっても作業が時短につながります。
CDNのメリット
- 簡単に実装でき、動作を手軽に確認できる
- サーバの負荷を軽減できる
CDNのデメリット
- ファイルのカスタムができない
実装の方法
以下のようなcdnの配布サイトにアクセスします。
cdnjs
https://cdnjs.com/libraries/jquery
jsDelivr
https://www.jsdelivr.com/
今回はcdnjsというサイトを参照します。共通して、配布サイトではバージョンや短縮版などが選択できるので、ファイルのパスをコピーします。
該当サイトにコピペするだけですぐに使えます。
web制作者が良く使いそうなcdnリンクまとめ
あったら便利なプラグインのcdnリンクをまとめてみました。
js、cssをサクッと試したいときにおすすめです。
jQuery
cdnjs
https://cdnjs.com/libraries/jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></scriptGoogle Hosted Libraries
https://developers.google.com/speed/libraries#jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>bxslider
王道のスライド系プラグインです。
https://cdnjs.com/libraries/bxslider
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>slick
スライド系プラグインでカルーセルも対応していて、表示の仕方も多様性があります。
https://cdnjs.com/libraries/slick-carousel
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>Modaal
モーダル系プラグインで画像、inline、動画などをポップアップしてくれます。フルスクリーンモードもあり、アニメーションも対応しています。
https://cdnjs.com/libraries/Modaal
<link href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.js"></script>magnific-popup.js
モーダル系プラグインで画像、inline、動画などをポップアップしてくれます。
https://cdnjs.com/libraries/magnific-popup.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>three.js
3Dアニメーションを作成するためのJavaScriptライブラリです。
https://cdnjs.com/libraries/three.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.js"></script>backgroundBlur
画像にぼかしエフェクトをつけるプラグインです。
cssのblur() が対応していないIE対応用になると思われます。
https://cdnjs.com/libraries/background-blur
<script src="https://cdnjs.cloudflare.com/ajax/libs/background-blur/0.1.3/background-blur.js"></script>jQuery-rwdImageMaps
クリッカブルマップをレスポンシブ対応してくれるプラグインです。
https://cdnjs.com/libraries/jQuery-rwdImageMaps
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js"></script>object-fit-images
画像のアスペクト比を維持したまま要素のコンテンツボックスに調節してトリミングしてくれます。
cssのobject-fitでも同じ効果がありますがIEには対応していないためこのプラグインが必要になります。
https://cdnjs.com/libraries/object-fit-images
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>wow.js/animate.css
jQueryなしで実行できます。
スクロールされたときにanimate.css で設定したアニメーションを実行します。
https://cdnjs.com/libraries/wow
https://cdnjs.com/libraries/animate.css
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>jquery.lazyload
画像の読み込みに遅延を発生させ、読み込み時の負荷を軽減します。
https://cdnjs.com/libraries/jquery.lazyload
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>ScrollReveal.js
スクロールで表示領域に達したらフェードインなどのアニメーションで要素を表示させるプラグインです。
https://cdnjs.com/libraries/scrollReveal.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.7/scrollreveal.min.js"></script>まとめ
実際にCDNを使用してみるとファイルの管理も必要なくjsの動作確認・比較などをするときにとても便利でした。jsの他にもcssやフォントでも使用できるのでとてもおすすめです。
