【JS】jQuery / jQuery UI の読込みを Google の Libraries サイト(CDN)から参照する方法
2018/02/06
jQuery 及び jQuery UI をCDNから参照する方法を、ほぼ自分用のメモとしてポストします。
jQuery 及び jQuery UI をCDNから参照する方法
CDNとは
CDNとは、Content Delivery Network（コンテンツ・デリバリ・ネットワーク）の略で、世界中に張り巡らされたサーバ（CDN配信プラットフォーム）を通して、コンテンツにアクセスしようとするエンドユーザに最も近いサーバから効率的に配信する仕組みのことです。
CDN（コンテンツ・デリバリ・ネットワーク）とは｜CDNでウェブサイトを高速化・負荷分散｜CDNetworks
http://www.cdnetworks.co.jp/about/
最新版の書き方は Google Developpers サイトに載っています。
詳細は以下を参照。
https://developers.google.com/speed/libraries/?hl=ja#jquery
jQuery について
2015.11.04 現在の jQuery の読み込ませ方は以下のとおり。
1.x系統
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
2.x系統
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
最新版を使用する場合
常に 1.x.x系統の最新版を使用したい場合は、以下のように記述
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
同様に2.x.x系統の最新版は以下のように。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
なお、最新版でない可能性もあるようなので、バージョンを指定して使用する方が良いとのこと。
jQuery UI について
- jQuery の Javascript ファイル本体
- jQuery UI の CSS ファイル
- jQuery UI の Javascript ファイル本体
を読みこませる必要あり。
順番は先に、jQuery 本体を読み込ませる必要があります。
jQuery UI を先に読み込ませると、そもそも動きません。
jQuery UI の読み込み
|
1 2 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> |
2015.11.04 時点での jQuery UI のバージョンは 1.11.4 となり、参照するURLにある数値がバージョンを表している。
jQuery 本体のバージョンとは違うことに注意。
コチラには 2系統はありません。
常にバージョン 1.x.x 系統を使いたい場合は jQuery と同様、以下のように。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> |
ダウンロードする場合
ダウンロードして使用する場合は、jQuery UI サイトより任意のバージョンのファイル群を取得し、サイトへ設置すること。
古い情報ですが、過去にまとめたもの。