CSSの書き方も分かるjQueryプラグイン実践活用法（1）

jQuery、プラグイン、jQuery UI、Web経由のCDNとは

葛西秋雄
2009/12/8

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

- PR -

　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ページのロード時間を短縮できます。

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

<script type="text/javascript" src="http://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 Toolを組み込んでjQuery UIのテーマを切り替えているところ（ここで選択したテーマがカレンダーに反映される）

図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のお知らせ」も、ご参照ください。

次回以降は、jQueryプラグインをイロイロ紹介

　連載第1回では、jQueryとjQuery UI、CDNについて解説し、jQueryの拡張機能であるプラグインを作成する方法についても説明しましたが、いかがでしたでしょうか。

　jQuery、jQuery UIのプラグインを使用するには、jQuery 1.3.2とjQuery UI 1.7.2のライブラリが必要になりますが、本連載ではグーグルやマイクロソフトが提供するCDNを利用してリモートサイトから直接取り込みます。

　次回以降は、jQuery UIのプラグインを利用してさまざまなUI効果（エフェクト）を得る方法やサンプルを紹介していきます。また、プラグインを使用せずに、jQueryのAPIを使用して自作のエフェクトを作成する方法についても解説します。

　今回使ったサンプルは、こちらよりダウンロードできます。

■ ＠IT関連記事

jQuery逆引きリファレンス
やりたいことからコードが見つかるjQuery辞典。まずはセレクタ構文に関する「ＸＸするには？」を24本一挙公開。jQueryは.NETでも公式サポート

「Insider.NET」フォーラム

Google Labsさん、Ajaxライブラリ標準化はありますか
Google Developer Day 2008特集（3）　Google Labs、OpenSocial、Gearsの担当者にそれぞれ話を聞いた。社内プログラミングで利用している、おすすめの開発環境とは？

「リッチクライアント＆帳票」フォーラム 2008/7/14

ようこそJavaScriptの世界へ
初心者のためのJavaScript入門（1）　JavaScriptで本格的なプログラミングの世界へ。実用的なアプリケーションを作れるようになるまで

「Coding Edge」フォーラム 2009/11/18

DOMの基本を学ぼう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある

自分戦略研究所 > スキル創造研究室

いまさら聞けないCSS／スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？

「デザインハック」コーナー

著者プロフィール
葛西秋雄

中小企業などの情報化推進の相談を受けるかたわら、Access、SQL Server、OracleなどのデータベースとWebアプリケーションの書籍執筆を手掛ける。
マイクロソフトのVisual Developer - ASP/ASP.NETのMVPとして著者Webサイトで活躍中。
主な著者：「CSS + jQuery Webデザインテクニック」（ビー・エヌ・エヌ新社）
「jQuery+JavaScript実践リファレンス―Webデザインを強化するための」（ソシム）
「ASP.NET 3.5+jQuery Ajax実践サンプル集」（秀和システム）

3/3

INDEX
CSSの書き方も分かるjQueryプラグイン実践活用法（1）　 jQuery、プラグイン、jQuery UI、Web経由のCDNとは
	Page1 CSSの書き方も分かる、jQueryプラグイン紹介連載これぐらい知ってますよね？「jQuery」基礎講座
	Page2 jQueryプラグインとは、jQuery UIとは
	Page3 CDNを利用してWeb経由でjQueryを使うには次回以降は、jQueryプラグインをイロイロ紹介

CSSの書き方も分かるjQueryプラグイン実践活用法バックナンバー連載インデックスへ»

「デザインハック」コーナーへ

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

デザインハック

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）