
手軽にWebページにアニメーションを導入できるCDNのjQueryとは
Webサイトにさまざまな動きをつけるアニメーションを導入するのにjQueryは欠かせません。そこで、CDNを使うメリットやCDNのjQueryの使い方について解説します。
- SE
- Webページにアニメーションを追加したいけど、どうすればよいのかな?
- PM
- CDNのjQueryを使うことで対応できますので、見ていきましょう。
目次
CDNのjQueryの概要
CDNとは?
CDNは「content delivery network」の略で、ウェブコンテンツをインターネット上で配信するために最適化されたネットワークのことです。
もう少し具体的に説明すると、jQueryのファイルを世界中の高速かつ安定したサーバー上に置いて、みんなで共有して使おうというものです。
CDNのjQueryを使うメリット
- ・サイト表示の高速化
- ・サーバーの負荷軽減
Webサイトを表示するときに読み込むファイルの一部をCDNなどの外部のリソースに分散することで、ページの読み込み速度が速くなります。
サーバーにアクセスが集中してしまうと、サーバーのレスポンスが悪化します。CDNを利用することでサーバーへのアクセスを分散させて、安定化を図ることができます。
主なCDN
国内外にさまざまなCDNがあり、それぞれに特徴があります。
■国内シェアトップ3のCDN (2019年10月時点)
- Amazon CloudFront
- Akamai
- Cloudflare
Amazonが提供するCDNです。AWSの他のサービスと統合されているので、他のAWSサービスを既に使っている場合におすすめです。
世界随一の高速ネットワークを所持していて、世界中の通信量の15〜30%を取り扱っているともいわれています。130カ国以上にサーバーを所持しているので、世界中からアクセスがあるようなサービスを作るときにはおすすめです。
無料プランも用意されているCDNで、WordPressと組み合わせて使用される場合が多いです。サービスとして、DDoS攻撃対策やDNSが用意されています。
■その他のCDN
- ・Google Cloud CDN
- ・Azure CDN
Googleが提供するCDNです。機能がシンプルで、初心者におすすめです。
マイクロソフトが提供するCDNです。Azure上で構築をするときにおすすめです。
CDNのjQueryを設定する方法
jQueryを利用するときは、jQueryファイルをサーバー上にアップロードして読み込みます。
コードは次のようになります。
1 |
<script type="text/javascript" src="common/js/jquery-x.x.x.js"></script> |
これをCDNから読み込むときは、以下の様にURLを設定します。
1 |
<script type="text/javascript" src="https://code.jquery.com/jquery-x.x.x.js"></script> |
- SE
- CDNのjQueryを使うことでアニメーションを追加できて、サーバーへのアクセスが分散できるのですね。
- PM
- CDNにも色々な種類があるので自分にとって使いやすいと思うものを選びましょう。
jQueryを使うときはCDNを導入しよう
CDNを導入することで、サーバーの負荷が軽減され、ページの表示も早くなります。jQueryを使うときはCDNを導入することをおすすめします。
CDNは国内外に様々なものがあるので、導入するサービスや予算に合わせて、最適なものを選びましょう。