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

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

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

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

jQuery とは JavaScript のライブラリの一種で、スクリプトファイルを自身のサーバーにアップロードして参照する必要があります。 呼び出し方は、他の...

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

Download Builder | jQuery UI

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

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

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

Hosted Libraries | Google Developers

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

<!-- 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 と同様です。参照方法は次の通り。

<!-- 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 -->
<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　を以下のパスへ書き換えることで、テーマを反映することができます。

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