ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本（後篇）

ASP.NET AJAX Controlの作成方法を学習する

付録：ASP.NET AJAX Control Toolkit最新動向

　6月18日にASP.NET AJAX Control Toolkit（以下Control Toolkit）の最新版がリリースされました（バージョンは1.0.10618.0）。今回のリリースは、最新版リリースから2週間程前の6月6日にリリースされたバージョン（バージョンは1.0.10606.0）のバグフィックスになっているのですが、6月6日に行われたバージョンアップでは、新しいコントロールの追加こそありませんが、その前のリリースから3か月ほど時間が経っていることもあり、さまざまな変更がありました。ここで現在のControl Toolkitの最新の動向について大まかにですが記述します。

全体のバージョンアップ情報

デザインモードのサポート

Tabsコントロールのデザイナー

　HTMLデザイナ画面上でTabsコントロール（TabContainerコントロールとその入れ子のTabPanelコントロール）のデザイン描画が可能になりました。TabPanelコントロールが複数ある場合に、HTMLデザイナ画面上でTabPanel名の書いてあるタブをクリックすることでTabPanelの切り替えが行えます。また、プロパティウィンドウとスマートタグからTabPanelコントロールの追加と削除が行えるようになっています。

PageMethodをコードビハインドに追加する

　ASP.NET AJAXではstatic pageメソッドをASP.NET Webページに加えてWebメソッドとして利用することができます。そして別の.asmxファイルを作成することなく、WebServiceの一部のようにしてScriptから静的メソッドを呼び出すこともできます。今までは、Webメソッドを作成するためにすべて自分の手でPageMethodを書いていましたが、今回のバージョンアップからコードビハインドを利用しているWebページに限って、PageMethodを利用するExtenderコントロールのスマートタグからPageMethodのテンプレートを自動生成できるようになりました。PageMethodを利用できるのは次のExtenerコントロールです。

• AutoCompleteExtenderコントロール
• CascadingDropDownコントロール
• NumericUpDownExtenderコントロール
• ModalPopupExtenderコントロール
• HoverMenuExtenderコントロール
• PopupControlExtenderコントロール
• DynamicPopulateExtenderコントロール
• SlideShowExtenderコントロール
• DropDownExtenderコントロール

Control Toolkitのアイコン付加

　各コントロールにアイコンが付加されました。アイコンからどのような効果を持ったコントロールかが分かりやすくなったので、ちょっとした嬉しい変更点です。

DynamicContextの追加

　AutoCompleteExtenderコントロールや、CascadingDropDownコントロールなどWebサービスを扱うコントロールに付加されたContextKeyプロパティのことです。今まで、Webメソッドに渡していた引数にContextKeyプロパティに設定された値を追加して渡すことができます。これを利用する場合にはWebService側でContextKeyプロパティを受け取るためのWebメソッドのパラメータの追加記述などが必要になります。実際にContextKeyプロパティに値を設定した場合、UseContextKeyも既定のFalseからTrueへと変更されます（ContextKeyが使用される場合にTrueへと設定されるプロパティ）。

検証コントロールの利用

　TextBoxコントロールをTargetControlとして設定するExtenderに関してはASP.NETの検証コントロールの動作不具合が起きなくなりました。以前は検証コントロールが動作しないなどの不具合があったのでControl Toolkitを使い検証機能を自作するか、検証コントロールを利用し、Ajaxの機能を自作するかどちらかを選択する必要がありました。

アニメーションのサポート

　今回のバージョンアップにより次のExtenderコントロールがアニメーション対応されることになりました。

• AutoCompleteExtenderコントロール
• DropDownExtenderコントロール
• HoverMenuExtenderコントロール
• ListSearchExtenderコントロール
• ModalPopupExtenderコントロール
• PopupControlExtenderコントロール
• ValidatorCalloutExtenderコントロール

　これらのコントロールは次のような記述を行うことでアニメーションを付加させることができます。

アニメーションの追加

<ajaxToolkit:AutoCompleteExtender （中略） >
    <Animations>
        <OnShow>
            <Sequence>
                <OpacityAction Opacity="0" />
                <HideAction Visible="true" />
                <FadeIn />
            </Sequence>
        </OnShow>
        <OnHide>
                <FadeOut />
        </OnHide>
    </Animations>
</ajaxToolkit:AutoCompleteExtender>

　<OnShow><OnHide>は今回からアニメーションのイベントとして追加されました。<OnShow>イベントは非同期通信が行われ、その結果が表示される時に開始されるアニメーションイベントで、<OnHide>イベントは非同期通信が終了し、結果が消失する時に開始されるアニメーションイベントです。

　今まで<ajaxToolkit:AutoCompleteExtender （中略） />と記述していた方もいるかとは思いますが、今後アニメーションを付加させる際の記述には気を付けてください。なお、プロパティウィンドウからもAnimationプロパティの編集が可能ですが、ウィンドウが小さく編集しづらいので、コードエディタから編集することをおすすめします。

図10 プロパティウィンドウ上のAnimationプロパティ

　なお、アニメーションについてですが、「Ajax対応コントロールでJavaScriptレスアニメーションを実装する」でアニメーション効果の情報をまとめていますのでアニメーションに興味がある方は参照ください。

ToolkitScriptManagerコントロールの登場

　今までASP.NET 2.0 AJAX ExtensionsやControl Toolkitを利用する際にはScriptManagerコントロールを利用していましたが、ScriptManagerコントロールを継承した、ToolkitScriptManagerコントロールが登場しました。ToolkitScriptManagerコントロールの特徴は、実行時にクライアント（ブラウザ）にダウンロードされる複数のJavaScriptを小さくまとめられることです。クライアントがダウンロードするJavaScriptnのサイズとファイル数を軽減することでパフォーマンスが向上しました。その差は、CalendarExtenderコントロールなど、JavaScriptを多用するコントロールの場合に大きく表れてきます。以下は、Web Development Helperを利用してログを取った画像です。

図11 ScriptManagerを利用した場合のログ

図12 ToolkitScriptManagerを利用した場合のログ

　実際にログを見てみると、ダウンロードサイズ、レスポンス時間共に、ScriptManagerコントロール利用時よりもパフォーマンスが向上していることが確認できるかと思います。また、UpdatePanelなどを利用しているページにToolkitScriptManagerを配置した場合は、非同期ポストバックの一部として追加のスクリプトが送られてくる時に、ブラウザがダウンロードしなかったスクリプトを含んだ複合スクリプトファイルを自動的に生成します。これからControl Toolkitを利用する際にはToolkitScriptManagerを利用しましょう。

既存のバグの修正

　CodePlex上で報告されたバグの中で、特に修正希望が多かったバグ120種類の修正が含まれています（バージョンは1.0.10606.0）。バージョン1.0.10618.0では、バージョン1.0.10606.0で追加された機能のバグの修正が含まれました。

アクセシビリティの修正

　SilderExtenderコントロールとAutoCompleteExtenderコントロールは視覚障害者の方でも利用しやすいように、コントロールに特殊なプロパティを持たせました。SliderExtenderコントロールには、現在のスライダーのハンドルの値をツールチップで表示するためのTooltipTextプロパティが用意されています。また、AutoCompleteExtenderコントロールにはオートコンプリート表示されたリストの中で、フォーカスが当たっている項目に対するCSSを設定するCompletionListHighlightedItemCssClassプロパティが用意されています。

コントロールのアップデート

MaskedEditコントロール

　MaskedEditコントロールで指定しているTextBoxコントロールに対して、Calendar ExtenderコントロールやValidatorCallout Extenderコントロールも指定できるようになりました。これにより、日付入力の補助や、検証コントロールの表示などの幅が1つ広がったと言えます。

AutoCompleteコントロール

　入力後に表示されるドロップダウンがアニメーションのサポートにより流れるような表現が可能になりました。従来よりもグラフィカルな表示が可能になります。

ModalPopupExtenderコントロール

　絶対・相対配置を含んでいる場合の動作が修正されました。

NumericUpDownExtenderコントロール

　許容範囲を制限するために、MinimumプロパティとMaximumプロパティを持っています。これにより、Stepプロパティもうまく活用しやすくなりました。

Visual Studio 2008β対応

　今回のバージョンから問題無く使えるようになりました。

　以上、簡単ですが現在のControl Toolkitの最新の動向です。詳細な情報を知りたい方は実際にASP.NET AJAX Control Toolkit公式ページを確認してみてください。

参考資料

1. ASP.NET AJAX（公式ページ：英語）
2. ASP.NET AJAX Control Toolkit（ドキュメント：英語）
3. ASP.NET AJAX > Client Reference
4. Shawn Burke's Blog
5. Delay's Blog