RIAの登場
そこで登場したのが、リッチインターネットアプリケーション（Rich Internet Application、RIA）という考えです。RIAとはJavaScriptやCSSを使った動的ページ変更、もしくはSilverlight、FlashなどのWebブラウザ拡張を活用し、従来のWebアプリケーションの弱点であった操作性、表現力を向上させ、ユーザーエクスペリエンスを高めたWebアプリケーションの総称です。
そして、RIAの中でも重要なテクノロジーがAJAX（Asynchronous JavaScript+Xml、エイジャックス）です。簡単に言えば、ページの一部の情報をサーバーに送信し、サーバーからの応答を非同期に待ち、サーバーから返されたデータを元に、クライアントではページ内の限られた範囲だけをJavaScriptを使って動的に書き換える技術です。当初はサーバーから返すデータ形式がXML形式だったので、XMLとなっていますが、現在ではプレーンテキストやJSON形式など、あらゆる形式が使われています。
従来のWebアプリケーションと同様にサンプルで説明しましょう。
会議室予約検索画面の「場所」ドロップダウンリストを変更したら、選択した場所だけをサーバーに送信し、サーバーは送られた場所に所属する会議室のリストのデータを返します。そして、クライアントでは返ってきた会議室のリストのデータから、ページ内の「会議室」ドロップダウンリストだけ再構成して表示しなおす、といった動作になります。
以上が狭義のAJAXですが、JavaScriptを用いてページ内の要素を動的に変更することも、広義のAJAXとして、よく活用されます。例えば、図2のようにカレンダーを表示して選択された日付をテキストボックスに設定する、などがよく見られます。
こういったRIAは、少し前は自分ですべてのJavaScriptのコードを書く必要があり、比較的ハードルの高いものでした。
しかし、最近はjQueryを初めとしたサポートライブラリが充実したこともあり、ショッピングサイトなどのB2Cアプリケーションでは広く一般的になっています。そのため、業務アプリケーションでもRIAが求められることがほとんどになっています。
jQueryの導入
それでは、まずは動的なWebアプリケーションを作成するための手段の一つである、jQueryの導入方法を説明しましょう。
jQueryとは
jQueryとは従来は少し面倒だったDOM操作やCSS適用などを、よりシンプルな記法で行えるように補助するJavaScriptのライブラリーです。非常に使い勝手が良いため、現在Web開発ではデファクトスタンダードといってもよいライブラリーです。その証拠に、ASP.NETのテンプレートには自動的に組み込まれるようにもなっています。
jQueryの最大の特徴は、なんといっても次の例のように「セレクター」をもとに対象要素を特定し、その後はメソッドチェインでさまざまな動作を紡いでいけることです。
$("div") // div要素を取り出し
.filter(function(i) {
return (i+1) % 2 == 0;
}) // 偶数番目だけフィルタリングして
.text("even") // テキストを"even"に変更
「セレクター」には、HTML要素のid、name、要素の種類などさまざまなものが使えます。
| 書式 | 対象 | 例 |
|---|---|---|
| element_name | HTML要素名 | div |
| #id | HTML要素のid | #header |
| .class_name | CSSクラス名 | .title |
また、紡いでいく動作も、前述のDOM操作、CSS適用だけでなく、イベントハンドラーの設定、アニメーション、Ajax操作など、多岐に渡ります。
詳細はjQueryのリファレンスを参照ください。
その他、jQueryは「プラグイン」という形で処理を拡張できるのも特徴です。
その代表的なプラグインの一つが「jQuery UI」です。jQuery UIは便利なウィジェット（コンポーネント）のライブラリーで、jQueryの記法に沿った記述でカレンダーやスライダーなどの便利なウィジェットが簡単に使えます。
今回のサンプルでは、このjQuery UIのウィジェットの一つである、「DatePicker」を利用します。
jQueryの参照方法
jQueryおよびjQuery UIを使うにはjQuery、jQuery UIのjsファイルをWebページに読み込ませなくてはなりません。jQuery自体はASP.NET Webフォームアプリケーションの「ASP.NET Webサイト」テンプレートを使えば、最初からWebサイトに含まれていますので、このファイルへの参照をWebページに追加するだけでよいでしょう。
ただ、今回はjQuery UIを使用することもありますし、できれば最新のものが使いたいです。
最新のものを使うには、jQueryのサイトからダウンロードしてWebサイトに配置したり、NuGetでインストールしたり、各種CDN（コンテンツデリバリーネットワーク、Contents Delivery Network）から参照したりと、好きな方法を使えばよいでしょう。
本連載のサンプルでは、jQuery公式のCDNから、jQueryとjQuery UIのjsファイルへの参照を追加します。また、jQuery UIで使用するCSSファイルへの参照も追加します。
jQueryをはじめとしたJavaScript、CSSの参照は複数のページで使用することが多いので、マスターページ（Site.master）ファイルに追加するのが一般的です。
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <!-- jQuery UIのテーマ用css --> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> <!-- jQuery本体 --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <!-- jQuery UI --> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head>
