jQuery UI ファイルの読込みを Google の Libraries サイト (CDN) から参照する方法

2017/02/14

※ 2015/9/2 記事内のjQuery UI のバージョンを 1.10.3 から 1.11.4 へ変更しました。

jQuery UI を利用するには、jQuery と同様にライブラリのファイルを読み込む必要があります。jQuery UI を利用するには、jQuery の JavaScript ファイルに加え、jQuery UI 用の CSS ファイルと JavaScript ファイルの合計3ファイルを読み込む必要があります。

しかしこちらも jQuery の場合と同様に、わざわざ jQuery UI のダウンロードサイトからファイルを取得してサーバへアップロードしなくても、利用することができます。

今回も Google Hosted Libraries のファイルを参照するサンプルをご紹介します。こちらも、ネットワークにアクセスできない閉じられた環境下ではアクセスできません。なお、ネットワークが閉じた環境で利用する場合は、jQuery UI のダウンロードサイトからファイルを取得して利用ください。

jQuery UI を利用するための準備

Google の CDN より jQuery UI ファイルのリンク先を取得

Google Hosted Libraries

この「1.11.4」の部分が、jQuery UI のバージョン情報です。jQuery のバージョンではないのでご注意を。通常、jQuery UI ファイルをダウンロードして参照する場合は、ファイル名にバージョン情報がくっついていますので、若干異なります。上記で参照しているファイルは、jQuery UI 用の javascript ファイルだけでなく、CSS ファイルのパスも記載しています。

CSS ファイルを読み込まないと、処理は動いても見た目がおかしくなってしまうので、必ず読み込むようにしてください。

また、バージョン情報は気にせず、常にバージョン 1.x.x 系の最新のライブラリを参照することも可能です。その場合の javascript ファイルの参照方法は以下の通り。

ただ、実際のファイルの中身は最新のバージョンではないので、利用する際は気をつけてください。どのバージョンを使っているか分からなくなると困る場合があれば、前述のバージョンが分かるファイルを利用することをお勧めします。

ダウンロードして利用する場合

前述の通り、jQuery UI のダウンロードサイトよりファイルを取得し、サーバーへアップロードしたパスを参照するようにしてください。

まとめ

これで jQuery だけでなく、jQuery UI の機能も利用することが可能となります。以上まとめると、jQuery ファイルを含め、以下の3つの URL を指定すれば OK です。ここでも注意が必要なのですが、必ず jQuery のライブラリ → jQuery UI のライブラリの順番にファイルを参照するようにしてください。逆にしてしまうと、jQuery UI 側で読み込み時にエラーが発生して正しく動作しません。

jQuery UI の機能は、その名の通りクライアントサイドのユーザインタフェースに関する便利な機能を保有しているので、jQuery とセットで使い方を覚えておくと、非常に役立ちますので、この機会にぜひ取り入れてみてはいかがでしょうか。

PAGE TOP ↑