vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

jQueryとjQuery UIをCDNでサイトに導入する手順

      2017/01/31

LINEで送る
Pocket

jquery-jqueryui-cdn
こんにちは、okutani(@okutani_t)です。JavaScriptを使う時は、大抵導入するであろう『jQuery』。カレンダーや便利な機能を使えることができる『jQuery UI』も利用頻度が多いのではないかと思います。

jQueryとjQuery UIの導入方法はそれぞれ2通りあり、「本体をダウンロードして使う」もしくは「CDNを使ってネットからCSSファイルを参照して使う」のいずれかで導入することができます。

今回はCDNを使って楽に導入する方法を、本記事で紹介しています。

CDNのコードは、jQuery公式サイトや、Googleなどが提供しています。どのサイトから使っても大体OKですが、本記事では公式サイトのCDNコードを使った導入法を解説していきます。

ではさっそく、設置作業を行っていきましょう。

スポンサーリンク

CDNを使ったjQueryの導入方法

下記公式サイトからjQuery本体のリンクを取得します。

LINKDownload jQuery | jQuery

少し下にスクロールすると、CDNのコードを見つけることができます。コピーしておきましょう。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

jquery-jqueryui-cdn2

コードがふたつありますが、下の『〜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を右クリック」→「リンクアドレスをコピー」を選択します。

jquery-jqueryui-cdn3

リンクアドレスをコピーをおこなうことで、次のようにURLが取得できました。メモしておきましょう。

http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

さらに、jQuery UIでは見た目を変更するテーマを扱うことができるため、すぐ下にあるThemesの中から適当にひとつテーマを選んでみます。

同じように「右クリック」→「リンクアドレスをコピー」。今回は『black-tie』を選択しました。

jquery-jqueryui-cdn4

次のような形で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ボタン』を押すことで確認できます。

LINKThemeRoller | jQuery UI

jquery-jqueryui-cdn5

お好きなテーマを選んでみてください。

話を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-jqueryui-cdn6

このように、テキストフィールドをクリックするとカレンダーが表示されます。カレンダーの日付を選択すると、入力フォームに選択した日付が自動的に入力されました。

なんの実装もせず、かんたんにカレンダーが利用できて便利ですね。また、見た目もテーマを変更することで、お手軽に変更できて使いやすいです。

おまけ: 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-jqueryui-cdn7

日本語を使いたいときに利用してみてください。参考になれば幸いです。

まとめ

jQueryとjQuery UIは、CDNを使うことでかんたんに導入することができました。

また、CDNを使うことでユーザーのブラウザにキャッシュされるので、2回目以降のアクセスが高速になります。お手軽、かつサイト高速化にも繋がっていいですね。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
jQueryとjQuery UIは仕事でちょこちょこ使うので備忘録としてまとめておきました。CDNって本当に便利ですよねー。Goodです。

 - jQuery

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「fakeLoader.js」でローディング画面を実装してみよう!

こんにちは、okutani(@okutani_t)です。コンテンツの読み込みが多 …

レスポンシブ対応のカルーセル「OWL Carousel」を使ってみる

こんにちは、okutani(@okutani_t)です。レスポンシブ対応のカルー …

Lazy Line PainterでSVGアニメーションを実装してみよう

こんにちは、okutani(@okutani_t)です。「Lazy Line P …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。