AJAXの中身を1つ1つ見ていきたい。クライアントサイドにおけるカスタム処理の開発」以降の内容が役に立つであろう。AJAXのサーバ・コントロール前回、ASP.NETの開発では、可能な限りサーバ・コントロールを使った統一的なデザインを行うことが望ましいと述べた。同様に、外部JavaScriptファイル(.jsファイル)を参照する際には、JavaScriptコードをHTMLコード内に直接記述するのではなく、ScriptManagerというサーバ・コントロールを配置するのが望ましい。AJAXを使ううえでは必須のコントロールである。AJAXを利用したWebページに実際にScriptManagerコントロールが挿入されている例だ。AJAXに欠かせないScriptManagerコントロールページに挿入されたScriptManagerコントロールが、すべての外部JavaScriptファイル(.jsファイル)を管理する。サーバ・コントロールが外部JavaScriptファイルを利用する場合、通常は、ScriptManagerコントロール内部でそのファイルへの参照が自動的に追加される。従ってScriptManagerコントロールに対して特別な設定を行う必要はない。特定の外部JavaScriptファイルへの参照を追加したいという場合には、フォーム・デザイナ上でScriptManagerコントロールのプロパティを編集するか、または以下のコードの(太字部分の)ように、ScriptManagerコントロールのマークアップの記述を直接修正して、開発者が独自にスクリプト・ファイルへの参照を追加しなければならない。/></Scripts></asp:ScriptManager>ScriptManagerコントロールへの外部JavaScriptファイルの指定なお、参照を追加する際にScriptManagerコントロールのScriptPathプロパティを使用すれば、使用する外部JavaScriptファイルの場所を、複数のWebアプリケーション間で集中管理するなど、スクリプトの取り扱いに関する方針をScriptManagerコントロールに指示することが可能である。●UpdatePanelコントロール次に、UpdatePanelコントロールを見ていこう。ASP.NETの開発者にとって、このコントロールは恐らくScriptManagerコントロールの次に重要なコントロールであろう。ファーストルック」を参照していただきたい。この記事で説明されているように、従来のASP.NETのサーバ・コントロール(例えばボタン、テキストボックスなど)をUpdatePanelコントロールの中にドラッグ&ドロップするだけで、コードは何も変更することなく、それらのコントロールをAjax化することができる。この不思議な動きは、一体どのように実現されているのだろうか。●非同期ポストバックの仕組みとメリット従来のASP.NETのポストバックの仕組みでは、例えばボタンのClickイベントなどが発生すると、ページ上のデータがHTTPのPOSTメソッドによってサーバにポストバックされ、ページ全体が再構成されてブラウザ上に表示される。実はUpdatePanelコントロールによるAjaxの非同期ポストバックの仕組みにおいても、コントロール内部で操作イベントが発生すると、従来のポストバック処理とほぼ同じリクエスト・データが、Ajaxの非同期ポストバックを使ってサーバにポストされる。サーバ上では、それがUpdatePanelコントロールによるAjaxの非同期ポストバックであっても、まるで従来のポストバックが発生したかのように処理が行われ、その結果(のレスポンス・データ)がクライアントに返される*1。そのレスポンス・データは、ページ全体のものではなく、UpdatePanelコントロール内部のデータ(HTMLのタグ・データ)のみなので、クライアントはこれを受け取って、UpdatePanelコントロールの中の情報だけを更新するように動作する(部分ページ更新)。厳密には、リクエスト・データのMIMEヘッダにAjaxであることを示す目印が入っているため、「従来のポストバックであるか」「Ajaxの非同期ポストバックであるか」はサーバ上で区別することは可能。以上の仕組みをまとめたのが次の図である。UpdatePanelコントロールにおける非同期ポストバックの動作こうした仕組みにより、前述のように、ASP.NETの従来型のポストバックであろうと、UpdatePanelコントロールによる非同期ポストバックであろうと、開発方法に大きな差異が生じないようになっている。そのため、既存のWebアプリケーションを簡単にAjax化できるのである。●非同期ポストバックの注意点と対策しかし、便利なことばかりではない。した仕組みであるがゆえに開発する側で踏まえておく点がいくつかある。UpdatePanelコントロールによる非同期ポストバックでも、ページのLoadイベント処理は従来のページ・ポストバックと同様に毎回実行される。このため、Loadイベント・ハンドラでその処理が非同期ポストバックであるか否かを判断して処理しなければいけないことがあるだろう。した判断には、ScriptManagerコントロールのIsInAsyncPostBackプロパティが使用できる。非同期ポストバックでは、UpdatePanelコントロール部分しか更新しないので、ページ全体のスクロール状態は非同期ポストバックが発生しても維持される。そのUpdatePanelコントロールの中に配置されたコントロール(マルチラインのテキストボックスなど)のスクロール状態はリフレッシュされてしまう。これを回避するには、UpdatePanelコントロールを更新されるパーツごとに複数に分割して配置するなどして対応すればよい。分割したUpdatePanelコントロールを複数組み合わせた場合には、さらに設計上の配慮が必要になる。UpdatePanelコントロールを複数貼り付けた場合、通常は、どれか1つのUpdatePanelコントロールで非同期ポストバックが発生すると、すべてのUpdatePanelコントロールで更新が行われる。この動きを抑制したい場合には、UpdatePanelコントロールのUpdateModeプロパティを「Conditional」に設定するとよい。このように、ページ構成の複雑さに応じて、いくつかのプロパティ(UpdatePanelコントロールのChildrenAsTriggersプロパティ、ScriptManagerコントロールのEnablePartialRenderingプロパティなど)を設定する必要がある。非常に複雑なページの場合、Triggersプロパティを使ってイベントとそれにひも付くUpdatePanelコントロールを1つずつ設定することもできる。UpdatePanelコントロールの中には、ユーザー・コントロールとしてラッピングして再利用可能にしたいといったケースもあるだろう。この場合には、UpdatePanelコントロールの所定のメンバをユーザー・コントロールとしてエクスポーズしておく必要がある。GridViewコントロールなどを使用した場合にやりとりされる通信量(ペイロード)を考慮すると、内部でどのようなデータがやりとりされるのかを考慮しながら設計する必要もあるだろう。このようにUpdatePanelコントロールは、その動きを理解すればするほど、さまざまな形で使いこなしていくことができるコントロールである。●UpdatePanelコントロールだけで十分?!さて、ここまでの説明を読むと、UpdatePanelコントロールを使って従来のポストバック処理をすべてAjax化すれば何事も良くなるとさえ思ってしまうかもしれない。確かにこのコントロールは重要である。ここで、そもそもAjaxという技術が何を達成しようとしているかをもう一度振り返ってみよう。Ajaxを使う目的が、ページ全体のポストバックを抑制したいとか、ページのロードをパーツごとにコントロールしたいというだけなら、UpdatePanelコントロールを利用すれば十分であろう。エンド・ユーザーの観点から見れば、Ajaxが解決する分野は、こうした一般的なビジネス・ロジックの流れよりも、むしろ「パーツのドラッグ&ドロップができる」「図の拡大・縮小ができる」といったような、“ユーザビリティ(使用性)”の実現にある。このため、実際のAjaxアプリケーションの開発では、その要件定義のころから、(サービス提供業者なども含む)エンド・ユーザーとの間で、ユーザビリティに関する明確な合意を得ておく必要があるだろう。要は、ユーザビリティをどう実装するかという点がAjaxアプリケーションにおける大きなポイントとなるのである。UpdatePanelコントロールは、こうした徹底的なユーザビリティの作り込みを行うには向かない。AJAXでは、よりカスタマイズ性の高い仕組みをクライアントに組み込めるようになっている。このクライアントサイドの仕組みを利用する際には、それと連携するサーバサイドの仕組みも構築する必要がある。そこで以降では、クライアントサイドとサーバサイドに分けて、これらの仕組みをどのように実現していくかを見ていくことにする。7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。TranslatorはPowerPoint用のアドイン。