特集：ASP.NET＋jQuery

ASP.NETプログラマーのためのjQuery入門

山田 祥寛（http://www.wings.msn.to/）
2009/02/27

jQueryベースのライブラリ「jQuery UI」を活用しよう

　jQueryは、それ単体で利用しても十分に強力なライブラリであるが、プラグインを利用することで、さまざまな機能を追加することができる。ここでいうプラグインとは、jQueryの機能を拡張した（jQueryをベースに開発した）ライブラリのこと。

　プラグインは自分で一から作成することも可能であるが、「jQuery Plugins」のページには、すでにさまざまなプラグインが2000近くも公開されているので（本稿執筆時点）、一度、どんなプラグインが公開されているのか、目を通してみるとよいだろう。

　また、プラグインとは別に、jQueryをベースとしたUIキットとして「jQuery UI」というライブラリも提供されている*2。jQuery UIには、カレンダーやアコーディオン式のリスト、タブ、ドラッグ＆ドロップ操作のような、主にユーザー・インターフェイスにかかわる部品や効果を実装するための機能が含まれている。

*2 jQuery UIとプラグインとは、本質的には同じもの。両者の違いは名前空間だけで、プラグインが「jQuery.fn.〜」で公開されているのに対して、jQuery UIは「jQuery.ui.〜」で公開されている。

　機能的には、ASP.NET AJAX Control Toolkitに似ているものもあるが、ざっと見た限りは、jQuery UIの方がおおむね高機能であるように思われる。もちろん、Control Toolkitはサーバ・コントロールの配置だけで利用できるというメリットもあるので、開発生産性を考えれば、いずれがよいとは一概にはいえないかもしれない。自分の用途と見比べながら、より適した方を選択していくとよいだろう。

　もっとも、これだけ豊富に提供されているプラグインやjQuery UIの機能の1つ1つを本稿で紹介することはできない。ここでは、取りあえずjQuery UIの利用イメージを理解していただくために、1つだけjQuery UI Tabs（タブ機能）を使った例を挙げてみることにしよう。


図8 jQuery UIで実装したタブ・ページ

　jQuery UIを利用するには、まず本家サイト「jQuery UI」からjQuery UIのアーカイブ（本稿執筆時点での最新バージョンはjquery-ui-personalized-1.6rc6.zip）を入手し、その配下に含まれる以下のフォルダ／ファイルをjquery.jsと同じフォルダにコピーすればよい。

  • jquery-ui-personalized-1.6rc6.min.js（jquery-ui.jsにリネーム）
  • /themeフォルダ

　タブの見栄えは、「ThemeRoller」を利用することで、自分でカスタマイズしたり、ギャラリーからカスタムのテーマを選択したりすることもできるが、本稿では標準的なjQuery UIのパッケージに含まれるスタイルシートを利用するものとする。

　必要なファイルを配置できてしまえば、タブ機能を実装するのはごく簡単だ。具体的なコードは、次のようになる。

<head>

<!--タブ機能の動作に必要なスタイルシートとJavaScriptコードをインポート-->
<link type="text/css" href="theme/ui.all.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

// ページ・ロード時にタブ機能を有効化
 $(function() {
  $('#tabs').tabs({ selected: 1 });
});

</script>
</head>

<body>

<!--タブパネル／タブ全体を<div>タグで定義-->
<div id="tabs">

<!--タブ部分を<ul>リストとして定義-->
<ul>
  <li><a href="#js"><span>JavaScript</span></a></li>
  <li><a href="#ajax"><span>Ajax</span></a></li>
  <li><a href="#db"><span>データベース</span></a></li>
</ul>

<!--個々のタブパネルの内容を<div>タグで定義-->
<div id="js">
  ……中略……
</div>
<div id="ajax">
  ……中略……
</div>
<div id="db">
  ……中略……
</div>

</div>

……以下略……
リスト11 jQuery UIを利用したタブパネルの実装

　まずはHTMLの定義から。 でタブパネル／タブ全体の領域を、 でタブリストを、そして で個々のタブパネルを、それぞれ定義する。ただし で、それぞれのタブのリンク先（href属性）は、タブパネルのid属性（ ）と対応関係にある必要があるので、要注意。

　このようにマークアップ側での準備ができてしまえば、後はtabsメソッドで該当の領域にタブ効果を適用するだけだ（ ）。タブ効果を適用する場合には、まず$()関数により、タブ全体を表す<div>タグを取得しておこう。tabsメソッドの引数には、タブの動作オプションをハッシュ形式で指定すればよい。ここではselectedパラメータで、初期状態で有効にするタブを指定しているだけであるが、そのほかにも多くのオプションを利用できる。詳細については、公式ドキュメントも参照してほしい。

■

　以上、駆け足ではあるが、jQueryの基本的な機能について概観してみた。もちろん、jQueryの機能は実に多岐にわたっており、ここで紹介したことは全体からすればごく一部にすぎない。しかし、まずは本稿で紹介した内容を理解していれば、あとは本家ドキュメントなどを見ながら、理解を深めていくことができるだろう（また、興味のある方は、拙著『JavaScriptマスターブック』（毎日コミュニケーションズ）でもjQueryについて解説しているので、併せて参照いただきたい）。

　なお、最後まで読み進められてきた読者の方で、jQueryではAjax機能はサポートしていないのかと疑問に感じた方もいるかもしれない。

　しかり。ほかのJavaScriptライブラリと同様、jQueryでもAjax通信を効率化するためのさまざまな機能が用意されている。しかし、ことASP.NET環境での利用に限っていうならば、いわゆるjQueryのAjax機能を利用することはほとんどないだろう。

　というのも、ASP.NETにはサーバサイドとの連携、親和性に優れたJavaScriptライブラリとしてMS AJAX Libがすでに用意されているからだ。サーバサイドで公開されているサービスにJavaScript経由でアクセスするならば、MS AJAX Libが提供する「ブリッジ機能」や「Sys.Net.WebServiceProxyクラス」を利用した方が簡便であるし、また、利用するべきだ。

　また、「ADO.NET Data Services」が提供するデータにアクセスするならば、MS AJAX Lib上で動作する「AJAX Client Library for ADO.NET Data Services」を利用するという選択肢もあるだろう。

　つまり、ASP.NET環境ではサーバサイドとの連携はMS AJAX Libで、取得したデータの処理やページへの反映はjQueryで行うのが望ましい。

　今回は扱えなかったが、今後、ASP.NET AJAX 4.0の状況も見つつ、MS AJAX LibとjQueryとの連携、具体的な使い分けなどについても、機会があれば扱っていければと思う。ご期待いただきたい。End of Article

　

　INDEX
　 ASP.NET＋jQuery
　 ASP.NETプログラマーのためのjQuery入門
　   1．Visual Studio 2008でjQueryを利用するための準備
　   2．jQuery 基本のキ／標準的なDOMとの比較／補足：$()関数のさまざまな構文
　   3．メソッド・チェーン
　   4．jQueryにおけるイベント処理
  5．jQueryベースのライブラリ「jQuery UI」を活用しよう

TechTargetジャパン

Insider.NET フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

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

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH