jQuery UI のファイル読込みを CDN のライブラリから参照する方法

更新日: 公開日:2014/01/06
jQuery UI CDN 外部ファイル読み込み

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の3ファイルを利用します。

jQuery UI に必要なファイル
  • jQuery の JavaScript ライブラリ
  • jQuery UI の JavaScript ライブラリ
  • jQuery UI 用の CSS テーマファイル

jQuery のライブラリを含め、これらのファイルは CDN として各社から提供されています。大元の jQuery ファイルの読み込みに関しては、次のページを参考にしてください。

CDN は外部のサイトを参照するため、オフライン環境下で利用することはできません。外部ネットワークにアクセスできないような制限の掛かった環境下においては、jQuery UI のサイトからファイルをダンロードして利用してください。

Download Builder | jQuery UI

それでは、各社が提供する CDN から、jQuery UI 関連ファイルを参照する方法について説明していきます。

jQuery UI を利用するための準備

Google の CDN よりファイルのリンク先を取得

Hosted Libraries | Google Developers

jQuery ライブラリはバージョンが1~3まで存在しています。意図的に古いバージョンを利用する理由がない限りは、最新のものを利用してください。一方で jQuery UI はメジャーバージョンは1のみなので、jQuery のバージョンに関係なく最新のものを選びます。

Google CDN からファイルを読み込む
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

jQuery UI の JavaScript ファイルは、必ず jQuery ライブラリの後に読み込んでください。記述する順番が逆になると、定義なしのエラーが発生して処理が動かなくなります。

なお jQuery UI は CSS を変更することで、様々なテーマカラーを適用することができます。今回紹介するリンク先は一律「smoothness」のテーマを参照していますが、この部分を別の名前に変更することができます。

テーマの一覧をページの最後に掲載しておくので、好みのカラーを選んで差し替えるようにしてください。

Microsoft の CDN よりファイルのリンク先を取得

jQuery UI | Microsoft Docs

バージョンに関しては Google と同様です。参照方法は次の通り。

Microsoft CDN からファイルを読み込む
<!-- jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/smoothness/jquery-ui.css">

Microsoft のサイトでは http で記されていますが https にリダイレクトされるので、事前に書き換えるようにしましょう。

jQuery の CDN よりファイルのリンク先を取得

jQuery CDN

以下のサンプルではリンク先の minified を選択して、圧縮された .min ファイルを参照しています。

jQuery CDN からファイルを読み込む
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

jQuery の公式サイトが提供する CDN には、integrity と crossorigin の属性が追加されています。integrity 属性の値は、参照するファイルが意図せず改ざんされていないかブラウザ側でチェックするための情報です。

上記で紹介した Google や Microsoft が提供する CDN が改ざんされるリスクは低いですが、その確率は 0% ではありません。セキュリティ面を意識するのであれば integrity が実装された jQuery の CDN を使うのが望ましいです。

おそらく Google や Microsoft もブラウザの対応状況によって integrity 属性が追加される可能性があるので、思い出した時にでも改めて CDN のパスをチェックしてみると良いでしょう。

jQuery UI テーマ一覧

上記で紹介した CDN 上では、全てのテーマが提供されています。全部で25種類のテーマがあるので、サイトのデザインに合ったテーマを適用してください。下記ページの左側にあるタブから [Gallary] を選択することで、テーマイメージを確認できます。

ThemeRoller | jQuery UI

css の参照パス […/themes/smoothness/jquery-ui.css] の smoothness を以下のパスへ書き換えることで、テーマを反映することができます。

テーマ参照パス
Basebase
Black Tieblack-tie
Blitzerblitzer
Cupertinocupertino
Dark Hivedark-hive
Dot Luvdot-luv
Eggplanteggplant
Excite Bikeexcite-bike
Flickflick
Hot Sneakshot-sneaks
Humanityhumanity
Le Frogle-frog
Mint Chocmint-choc
Overcastovercast
Pepper Grinderpepper-grinder
Redmondredmond
Smoothnesssmoothness
South Streetsouth-street
Startstart
Sunnysunny
Swanky Purseswanky-purse
Trontastictrontastic
UI Darknessui-darkness
UI Lightnessui-lightness
Vadervader

以上、jQuery UI を CDN から参照する方法でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。