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

2015/09/20 2017/01/31

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

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

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

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

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

1 CDNを使ったjQueryの導入方法
2 CDNを使ったjQuery UIの導入方法
3 まとめ

CDNを使ったjQueryの導入方法

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

LINKDownload 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ボタン』を押すことで確認できます。

LINKThemeRoller | jQuery UI

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

話を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回目以降のアクセスが高速になります。お手軽、かつサイト高速化にも繋がっていいですね。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

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

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- jQuery