jQueryとjQuery UIをCDNでサイトに導入する手順
2017/01/31
こんにちは、okutani(@okutani_t)です。JavaScriptを使う時は、大抵導入するであろう『jQuery』。カレンダーや便利な機能を使えることができる『jQuery UI』も利用頻度が多いのではないかと思います。
jQueryとjQuery UIの導入方法はそれぞれ2通りあり、「本体をダウンロードして使う」もしくは「CDNを使ってネットからCSSファイルを参照して使う」のいずれかで導入することができます。
今回はCDNを使って楽に導入する方法を、本記事で紹介しています。
CDNのコードは、jQuery公式サイトや、Googleなどが提供しています。どのサイトから使っても大体OKですが、本記事では公式サイトのCDNコードを使った導入法を解説していきます。
ではさっそく、設置作業を行っていきましょう。
スポンサーリンク
もくじ
CDNを使ったjQueryの導入方法
下記公式サイトからjQuery本体のリンクを取得します。
少し下にスクロールすると、CDNのコードを見つけることができます。コピーしておきましょう。
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
コードがふたつありますが、下の『〜jquery-migrate-1.2.1〜』とあるコードの方は、新しいjQueryで廃止された機能をデバッグしてくれる機能です。これがなくても普通にjQueryは動作しますので、上のコードだけを導入すればOKです。
ただ、このままだとローカルで動作しません。URLの頭に『http:』をつけておくとローカルでも動作します。その場合は次のとおりです。
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>極力、サーバーに上げる場合は『http:』が無いコードで上げておくと良いです。詳しくは書きませんが、これを省略するとブラウザが自動でhttpかhttpsを自動で読みとって、設定してくれるからです。
これでjQueryを使う準備が整いました。次はjQuery UIのCDNコードを取得していきましょう。
CDNを使ったjQuery UIの導入方法
jQuery UIのCDNも同じく、jQuery公式が提供しています。
jQuery UIでは『.jsファイル』と『.cssファイル』のふたつが必要ですが、どちらのコードも公式から導入することができます。
今回は最新版のjQuery UI 1.11.4を導入してみました。
では、下記リンクからjQuery UIのCDNを取得していきましょう。
LINKjQuery CDN
『jQuery UI x.xx(バージョン)』となっている箇所を探します。その項目内にある『uncompressed』は非圧縮を、『minified』は圧縮済みのファイルを意味します。
利用する際にソースコードを見ることはほとんどないと思いますので、ここでは 『minified』を使っていきましょう。
「minifiedを右クリック」→「リンクアドレスをコピー」を選択します。
リンクアドレスをコピーをおこなうことで、次のようにURLが取得できました。メモしておきましょう。
http://code.jquery.com/ui/1.11.4/jquery-ui.min.jsさらに、jQuery UIでは見た目を変更するテーマを扱うことができるため、すぐ下にあるThemesの中から適当にひとつテーマを選んでみます。
同じように「右クリック」→「リンクアドレスをコピー」。今回は『black-tie』を選択しました。
次のような形でURLが取得できます。同じく、どこかにメモしておきましょう。
http://code.jquery.com/ui/1.11.4/themes/選択したテーマの名前/jquery-ui.css選択したテーマの名前の箇所を変更することで、別テーマのCSSを利用することができます。
下記は利用できるテーマの一覧です。
- black-tie
- blitzer
- cupertino
- dark-hive
- dot-luv
- eggplant
- excite-bike
- flick
- hot-sneaks
- humanity
- le-frog
- mint-choc
- overcast
- pepper-grinder
- redmond
- smoothness
- south-street
- start
- sunny
- swanky-purse
- trontastic
- ui-darkness
- ui-lightness
- vader
また、テーマの見た目は下記の公式リンクの『Galleryボタン』を押すことで確認できます。
お好きなテーマを選んでみてください。
話をUIの設置方法に戻しましょう。取得したURLを、次のような形でHTMLコードに当てはめて読み込むことでjQuery UIを利用することができます。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/選択したテーマの名前/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>なお、「.cssのコードが上」「.jsのコードが下」の順番で読み込むようにしましょう。逆にすると、サイトの読み込み速度が低下してしまうので注意してください。
jQueryとjQuery UIコードの設置場所
.cssのコードは<head></head>内、.jsのコードは</body>のすぐ上か、<head></head>の中に記述してあげればOKです。CSSのテーマはblack-tieを選択してみました。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>実際にjQueryとjQuery UIを使ってみる
では、jQuery UIのデートピッカー機能を使って、入力フォーム選択時にカレンダーを表示してみましょう。
index.htmlを用意し、次のように記述してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery UIでカレンダー</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
</head>
<body>
<input type="text" class="datetimepicker">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$('.datetimepicker').datepicker();
});
</script>
</body>
</html>ブラウザで実行してみます。
このように、テキストフィールドをクリックするとカレンダーが表示されます。カレンダーの日付を選択すると、入力フォームに選択した日付が自動的に入力されました。
なんの実装もせず、かんたんにカレンダーが利用できて便利ですね。また、見た目もテーマを変更することで、お手軽に変更できて使いやすいです。
おまけ: jQuery UIの日本語化
googleが提供しているCDNを利用することで、jQuery UIで使う機能を日本語化することができます。次のコードを使ってみましょう。
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>同じく、ローカルで動作させたい場合は、頭にhttp:をつけてください。
次のようにカレンダーを日本語化することができました。
日本語を使いたいときに利用してみてください。参考になれば幸いです。
まとめ
jQueryとjQuery UIは、CDNを使うことでかんたんに導入することができました。
また、CDNを使うことでユーザーのブラウザにキャッシュされるので、2回目以降のアクセスが高速になります。お手軽、かつサイト高速化にも繋がっていいですね。
スポンサーリンク
PC用AdSense
PC用AdSense
こちらの関連記事もどうぞ
-
-
Lazy Line PainterでSVGアニメーションを実装してみよう
こんにちは、okutani(@okutani_t)です。「Lazy Line P …
-
-
「fakeLoader.js」でローディング画面を実装してみよう！
こんにちは、okutani(@okutani_t)です。コンテンツの読み込みが多 …
-
-
レスポンシブ対応のカルーセル「OWL Carousel」を使ってみる
こんにちは、okutani(@okutani_t)です。レスポンシブ対応のカルー …
