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

2014/01/06

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

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

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

Google CDN からファイルを読み込む
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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.2.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.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  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 から参照する方法でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ