jQuery UIをCDNから読み込んで利用する方法を解説！
jQuery UIをCDNから読み込んで利用する方法を解説します。jQuery UIをCDNから読み込んで利用することで、さまざまな機能を簡単なコードで実装することができるようになります。ここでは簡単にサンプルコードを用いて解説します。
jQuery UIをCDNから利用したい
jQuery UIをCDNから利用してすぐに簡単なコードで実装したいという時がよくあります。
ここでは様々なCDNの読み込み方法から、jQuery UIの簡単な利用方法まで解説しますが、ダウンロードして用いる方法もあります。
ちなみにjQuery UIのダウンロードは以下のサイトにてできます。
今回はjQuery UIをCDN利用する方法の紹介です。
jQuery UIをCDNから読み込んで利用する方法
jQuery UIをCDNから読み込む方法について紹介しますが、注意点としてjQuery UIのJavaScriptファイルは、必ずjQuery本体の後に読み込む必要があります。
各ライブラリは最新のものを使用するようにしてください。jQuery UIだとメジャーのバージョンでバージョン1、jQueryはバージョン3が最新となります。
またCDNで提供しているサービスは複数あるため、今回複数のご紹介となります。紹介したどのサービスを利用しても同じように動作しますので、好きなサービスからCDNを利用するようにしましょう。
Google の CDNを利用
Google の CDNは以下となります。
Google CDM
<!-- 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">Microsoft の CDNを利用
MicrosoftのCDNは以下となります。
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">jQuery の CDNを利用
jQueryのCDNは以下となります。
jQuery CDN
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></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属性とは、参照するファイルが意図せず改ざんされていないかブラウザ側でチェックするための情報です。
ですのでGoogleやMicrosoftのCDNよりもセキュリティ面を考慮すると、jQueryのCDNを利用する方が望ましいです。
jQuery UIの使い方
jQuery UIの使い方を、jQuery UIのデザインの１つであるプログレスバー（progressbar）を作成しながら簡単に説明します。
ではサンプルコードを用いて挙動を見てみましょう。
このように自前の実装部分は簡単なコードで50%のプログレスバーが作成できます。
コードとしては、プログレスバーを作成したい要素に対してprogressbar()メソッドを用いて、value値に何％かを記述するのみです。
他にもjQuery UIでは様々な機能を作成することができます。詳しくは以下の公式のデモ画面を参照してください。
jQuery UI テーマを変更する方法
jQuery UIではテーマを変更することができます。テーマとは要するに色などのオプションのことです。
テーマを変更する方法はjQuery UIパスの二つ目のlink要素にあるsmoothnessの部分を置き換えます。
実際に置き換えてみるとどのようになるか、挙動を見てみましょう。
今回はsmoothnessをui-lightnessに置き換えました。プレビューを見てみるとプログレスバーの色が明るくなっていることが分かります。
ui-lightness以外にも様々なテーマがあります。
詳しくは以下のサイトで「Gallery」というタブボタンをクリックして確認してください。
まとめ
いかがでしたでしょうか？
jQuery UIを用いることで、実装が複雑そうに見える機能を簡単なコードで実装することができます。
ぜひ試してみてください。
