jQuery、プラグイン、jQuery UI、Web経由のCDNとは：CSSの書き方も分かるjQueryプラグイン実践活用法（1）（3/3 ページ）

» 2009年12月08日 00時00分公開

CDNを利用してWeb経由でjQueryを使うには

　jQueryとjQuery UIのライブラリは、Webサイトからダウンロードして利用する代わりに、CDNを使って利用することもできます。ここでは、jQueryのWebサイトからjQuery 1.3.2とjQuery UI 1.7.2のライブラリをダウンロードして利用する代わりに、グーグルとマイクロフトのCDNを使って利用する方法を紹介します。

　なお、グーグルのCDNには、jQuery UIのテーマ（スタイル）も登録されています。

グーグルのCDN

　グーグルのCDNを利用してjQuery 1.3.2とjQuery UI 1.7.2のライブラリを組み込むには、<head>要素に次のような<script>要素を追加します。異なるバージョンのライブラリを組み込むときは、URLの「バージョン番号」の部分を置換します。

　例えば、jQuery 1.2.6のライブラリを組み込むには「1.3.2」を「1.2.6」に置換します。同様に、jQuery UI 1.6.2のライブラリを組み込むには「1.7.2」を「1.6.2」に置換します。

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
</head>

　jQuery UI 1.7.2のテーマを組み込むには、<head>要素に次のような<link>要素を追加します。ここでは、jQuery UIの「ui-darkness」のテーマを組み込んでいます。jQuery UIには、24種類のテーマが用意されていて、テーマを切り替えるには、<link>要素のhref属性に設定したURLのテーマの部分を置換します。

　例えば、「ui-lightness」のテーマを組み込むには、「ui-darkness」を「ui-lightness」で置換します。

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

　jQuery UIのすべてのテーマのURLは、jQuery UIの「Development Center」に掲載されているので、ご参照ください。

グーグルのCDNを利用してjQuery UIのDatepickerプラグインを使用している例

$(function() {
  $('#txtDate').datepicker();
});
<input id="txtDate" type="text" />

図3　テキストボックスをクリックしたときjQuery UIのDatepickerでカレンダーを表示したところ（グーグルのCDNを利用）

Google AJAX Libraries APIを利用

　また、「Google AJAX Libraries API」を利用すると、jQueryとjQuery UIのライブラリをランタイム時に非同期でダイナミックにロード可能です（参考：Google、新しいAjax APIを披露）。

http://code.google.com/intl/ja/apis/ajaxlibs/

Google AJAX Libraries API - Google Code via kwout

　ここでは、google.load()メソッドでjQuery 1.3.2とjQuery UI 1.7.2のライブラリを、非同期でグーグルのCDNからロードしています。ロードが完了したら、google.setOnLoadCallback()のイベントハンドラが実行されます。jQueryのコードは、このイベントハンドラに記述します。

　Google AJAX Libraries APIを利用すると、ライブラリを非同期でロードできるので、Webページのロード時間を短縮できます。

Google AJAX Libraries APIを利用してjQueryのライブラリを非同期でロードする

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.2');   // jQuery 1.3.2のライブラリを非同期でロード
  google.load('jqueryui', '1.7.2'); // jQuery UI 1.7.2のライブラリを非同期でロード
  google.setOnLoadCallback(function() { // ロードが完了したときに実行されるイベントハンドラ
    $(function() {
      $('#txtDate').datepicker();   // jQuery UIのDatepicker()を実行
    });
  });
</script>

図4　jQuery/jQuery UIのライブラリがグーグルのCDNから非同期でロードされたところ（Firefoxのアドオン「Firebug」Firefoxのアドオン「Firebug」で確認）

jQuery UIの「Theme Switcher」

　また、jQuery UIの「Theme Switcher」を組み込むと、jQuery UIでサポートされている24種類のテーマからお好みのテーマを選択してランタイム時に切り替えることができます。選択したテーマは、Cookieに保存されるので、再訪問したときに自動的に復元されます。

　ちなみに、Theme Switcherプラグインは、グーグルのCDNを利用してjQuery UIのテーマをダイナミックに切り替えています。

<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
  $(function() {
    $('<div style="position: absolute; top: 10px; right: 200px;" />')
      .appendTo('body')
      .themeswitcher();
  }); 
</script>

図5　Theme Switcherを組み込んでjQuery UIのテーマを切り替えているところ（ここで選択したテーマがカレンダーに反映される）

マイクロソフトのCDN

　マイクロソフトのCDNを利用するには、<head>要素に次のような<script>要素を追加します。

マイクロソフトのCDNを利用してjQuery 1.3.2のライブラリを組み込む

<head>
  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
</head>

　マイクロソフトのCDNに登録されているライブラリの一覧は、次のサイトに掲載されているので、参照してください。

図6　Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library

Microsoft Ajax Libraryの「Start.js」ライブラリを利用

　jQueryのライブラリをランタイム時に、非同期でマイクロソフトのCDNからダイナミックにロードするには、「Microsoft Ajax Library」の「Start.js」ライブラリ（本稿執筆時はベータ版）を組み込んでSys.require()メソッドを実行します。

　ライブラリのロードが完了したらSys.onReady()イベントが実行されます。jQueryのコードは、このイベントハンドラに記述します。

Microsoft Ajax Libraryを利用してjQuery 1.3.2のライブラリを組み込む

<head>
<script src="http://ajax.microsoft.com/ajax/beta/0910/Start.js" type="text/javascript"></script>
<script type="text/javascript">
    Sys.require([Sys.scripts.jQuery]); // jQueryのライブラリを非同期でロードする
    Sys.onReady(function() { // ロードが完了したときに実行されるイベントハンドラ
      // ここにjQueryのコードを記述する
    });
  </script>
</head>

　マイクロソフトのCDNに関しては、記事「Microsoft AJAX CDNのお知らせ」も、ご参照ください。