jQueryでWeb Formsアプリケーションのフィルタリングユーザーインターフェイスを作成する（前編）

ユーザーごとに折りたたみ／展開の状態を記憶させる方法

　フィルタリングユーザーインターフェースを実装する際、jQueryとCSSと数行のJavaScriptを使うと、フィルタを展開したり折りたたんだりするクライアントサイド機能を実装できます。本シリーズでは、jQueryを使用したフィルタリングユーザーインターフェースの実装方法を2回に分けて解説します。

はじめに

　jQueryは軽量のクロスブラウザJavaScriptライブラリであり、JavaScriptでよく行われる処理、例えばDOM（Document Object Model）の取得や操作、AJAX機能をサポートするための帯域外HTTP要求の作成などの処理を簡略化することを目的としています。jQueryを利用すると、クライアントサイドでよく行う、DOMの要素に属性やCSSクラスを追加／削除したり、ボタンクリックなどのユーザーアクションへの応答としてページ上の要素の表示／非表示を切り替えたりする処理を簡単に実装できます。jQueryは人気のある多くのWeb 2.0サイトで使われており、リッチでインタラクティブな機能を実装するのに貢献しています。jQueryはASP.NETアプリケーションでも使用できますが、クライアントサイドのスクリプトをWeb Formsアプリケーションに統合するのは少々手間がかかることもあります。JavaScript開発はどちらかと言えばASP.NET MVCアプリケーションに適しています。実際、ASP.NET MVCフレームワークにはjQueryライブラリが含まれています。しかも、MicrosoftはVisual Studio 2010とそれ以降のバージョンにはjQueryを組み込むことを公表しています。

　最近、筆者はイントラネットベースの基幹業務用Web FormsアプリケーションでjQueryを使う機会がありました。このアプリケーションには、GridViewコントロールを使ってレポート結果を表示するレポート画面がいくつかあります。レポート結果のうち、ユーザーが特に興味のある部分のデータをフィルタで絞り込んで表示できるようにするために、これらのレポートにはフィルタリングユーザーインターフェースが含まれています。このユーザーインターフェースはいくつかのドロップダウンとチェックボックスとテキストボックスから成り、これによりユーザーはさまざまなフィルタ条件を設定できる仕様になっていました。

　問題は、このフィルタリングユーザーインターフェースはかなり「かさばる」ということです。ものによっては、画面上で占める面積があまりに広すぎて、それだけでほとんど画面全体が埋まってしまうこともありました。そのため、このフィルタリングユーザーインターフェースを折りたたみ、ユーザーの要求があったときにだけ展開するための方法が必要でした。最終的には、jQueryとCSSと数行のJavaScriptを使うことで、フィルタリングインターフェースを展開したり折りたたんだりするクライアントサイド機能を実装することができました。本稿では、このフィルタリングインターフェースの実装について2回に分けて解説します。前編にある今回は、この機能の基礎を説明します。後編では、この折りたたみ式のフィルタリングユーザーインターフェース機能を拡張して、ユーザーごとに折りたたみ／展開の状態が記憶されるようにする方法を説明します。

jQueryの概要

　jQueryは、DOM操作やクライアントサイドのイベント処理といった、一般的なJavaScriptタスクを簡単に行えるようにするJavaScriptライブラリです。jQueryでは、セレクタを使ってHTML DOMの要素にアクセスできます。構文は少し慣れが必要ですが、セレクタを使用すればHTML要素のアクセスと変更が容易になります。例えば、filterUIというidを持つHTML要素がある場合、この要素は次の方法でアクセスできます。

$('#filterUI')

　この要素を隠すには、hide()関数を次のように使用します。

$('#filterUI').hide();

　この要素を表示するには、show()関数を次のように使用します。

$('#filterUI').show();

　また、toggle()関数を使用すると、現在隠されている要素を表示し、逆に現在表示されている要素を隠すことができます。属性やCSSクラスを追加／削除するための関数や、フェードイン／フェードアウトやスライドイン／スライドアウトによって要素を表示したり消したりするなど、アニメーションを実行するための関数もあります。

　jQueryでは、クライアントサイドのイベントハンドラも簡単に作成できます。例えば、AとBというidを持つ2つの要素を含んだページがあって、Aがクリックされたときに、Bが隠されていればそれを表示し、表示されていれば隠すようにしたいとします。これを実現するには、Aのclickイベントに対応するイベントハンドラを作成し、その中で、Bに対してtoggle()関数を呼び出すだけでよいのです。そのためのjQueryコードは次のとおりです。

$('#A').click(function() {
   $('#B').toggle();
});

　上記のJavaScriptでは、Aのクライアントサイドのclickイベントに対応するイベントハンドラを定義しています。このイベントハンドラに含まれるコードは、$('#B').toggle();という1行だけです。

　同様の構文を使って、WebページがロードされたらJavaScriptコードを実行するという動作を実装できます。ブラウザにページとjQueryライブラリがロードされると、documentオブジェクトのreadyイベントが発生します。この時点でコードを実行するには、次のようなJavaScriptを書きます。

$(document).reader(function() {
   // ここにスタートアップコードを記述...
}

　このスタートアップコードには、$('#A').show()のような一般のステートメントも、$('#A').click(function() { ... }などのイベントハンドラ定義も含めることができます。