ASP.NETプログラマーのためのjQuery入門（5/5）

特集：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 id="tabs">

 <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 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との連携、具体的な使い分けなどについても、機会があれば扱っていければと思う。ご期待いただきたい。

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

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

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

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

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT

特集：ASP.NET＋jQuery