jQuery/Vanilla Javascript

【cdn】のweb制作的基本的な使い方、初めてでも1分でコピペ実装できるソース付き

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

js( jQueryメイン)で使用できるcdnについて概要、使用方法などまとめてみました。
後半使えそうなcdnリンクも用意しています。

CDNとはコンテンツデリバリネットワーク(content delivery network)の略称です。
CDNのリンク設定をすれば、わざわざjQueryプラグインなどのファイルをダウンロードやアップロードしなくても、ファイルの読み込み設定だけで別サーバから自サイトのデータとして使用できます。
そうすることによりアクセス集中時のサーバーの負荷を軽減することができます。
また、WEB制作者にとっても作業が時短につながります。

  • 簡単に実装でき、動作を手軽に確認できる
  • サーバの負荷を軽減できる
  • ファイルのカスタムができない

以下のようなcdnの配布サイトにアクセスします。

cdnjs
https://cdnjs.com/libraries/jquery

jsDelivr
https://www.jsdelivr.com/

今回はcdnjsというサイトを参照します。共通して、配布サイトではバージョンや短縮版などが選択できるので、ファイルのパスをコピーします。

該当サイトにコピペするだけですぐに使えます。

あったら便利なプラグインのcdnリンクをまとめてみました。
js、cssをサクッと試したいときにおすすめです。

cdnjs
https://cdnjs.com/libraries/jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script

Google 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>

王道のスライド系プラグインです。

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>

スライド系プラグインでカルーセルも対応していて、表示の仕方も多様性があります。

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>

モーダル系プラグインで画像、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>

モーダル系プラグインで画像、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>

3Dアニメーションを作成するためのJavaScriptライブラリです。

https://cdnjs.com/libraries/three.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.js"></script>

画像にぼかしエフェクトをつけるプラグインです。
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>

クリッカブルマップをレスポンシブ対応してくれるプラグインです。

https://cdnjs.com/libraries/jQuery-rwdImageMaps

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.js"></script>

画像のアスペクト比を維持したまま要素のコンテンツボックスに調節してトリミングしてくれます。
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>

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>

画像の読み込みに遅延を発生させ、読み込み時の負荷を軽減します。

https://cdnjs.com/libraries/jquery.lazyload

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>

スクロールで表示領域に達したらフェードインなどのアニメーションで要素を表示させるプラグインです。

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やフォントでも使用できるのでとてもおすすめです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*