SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

付録: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プロパティ
図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を利用した場合のログ
図11 ScriptManagerを利用した場合のログ
図12 ToolkitScriptManagerを利用した場合のログ
図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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本連載記事一覧
この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1545 2007/08/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング