ASP.NET 3.5 Extensions + ASP.NET MVCフレームワーク

ASP.NET AJAXの開発をさらにサポート「ASP.NET 3.5 SP1」

ASP.NET 3.5 Extensions + ASP.NET MVCフレームワーク（5）

2009/03/18 14:00

ポスト

ASP.NET 3.5 SP1におけるScriptManagerの機能強化の概要と利用

　ASP.NET 3.5 SP1では、ASP.NET AJAXのScriptManagerに2つの機能追加が行われています。1つは「Scriptを束ねるCompositeScript要素」、もう1つは「UpdatePanelの更新履歴を管理するHistory機能」です。

　1つずつ確認していきましょう。

スクリプトを束ねるCompositeScript要素

　CompositeScript要素は、複数のJavaScriptファイルをまとめて1つのファイルとしてクライアントに送信します。対象となるのは、ASP.NET AJAXと、ASP.NET AJAX Control ToolkitのJavaScriptファイルです。

　通常はクライアントからの要求時に個別送信されるスクリプトファイルですが、スクリプトファイルの数が多くなればなるほど、要求の数が増えダウンロード時間がかかり、Webページにアクセスした際のパフォーマンスが悪く感じることになります。特にWebアプリケーションの場合、ユーザーはパフォーマンスが「ミリ秒」改善されたとしても影響は感じにくいかもしれません。しかし、サーバーからするとミリ秒の改善が利用者分の恩恵として受けられるようになります。

　今回実装されたCompositeScript要素は、複数のJavaScriptファイルを結合して、1つの複合スクリプトとしてクライアントに送信します。これによりブラウザへの要求数が減り、結果としてパフォーマンス向上につながり、サーバーへの負荷も軽減されます。

　CompositeScript要素の利用方法は、CompositeScriptプロパティのScriptsコレクションに結合するスクリプトを記述するだけです。次のような記述になります。

<asp:ScriptManager ID="ScriptManager1" runat="server" >
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference name="MicrosoftAjax.js"    />
            <asp:ScriptReference name="MicrosoftAjaxWebForms.js"    />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

　シンプルに設定ができるCompositeScript要素ですが、注意点もあります。例えば、スクリプト間の依存関係や呼び出し順序などが関係している場合、適切な順序で結合されるように管理する必要があります。また、IE 6はJavaScriptの圧縮に対応していないため、CompositeScript要素のScriptsコレクションにスクリプトを登録していても結合されずに個別のスクリプトが送信されます。

　ここで気になる点は、スクリプトの結合設定をする際にJavaScriptファイル名、アセンブリ名などを事前に調べ、CompositeScript要素のScriptsコレクションに記述する必要があるという点です。UpdatePanelコントロールやAJAX Control Toolkitなどのサーバーコントロールは、普通に利用する上でどのようなスクリプトか、どのようなアセンブリを使っているのか知ることは難しいです。そんな時に役立つのがScriptReferenceProfilerコントロールです。

ScriptReferenceProfilerコントロールを使用したスクリプト参照の取得

　ScriptReferenceProfilerコントロールは、CodePlex上で公開されているスクリプト参照を取得できるサーバーコントロールです。

　CodePlexからバイナリをダウンロードできます。Script Reference Profiler Binariesを選択してDLLをダウンロードした後、ASP.NET AJAX Control Toolkitの手順同様に、ツールボックスにアイテムを追加します。アイテムに追加されたScriptReferenceProfilerコントロールをページ上に配置した後は、デバッグ実行するだけです。ページ上に使用されているJavaScriptファイルが表示されます（図3）。

図3 ScriptReferenceProfiler実行画面

　それでは非常に簡単にですが、サンプルを作成して見ましょう。

　Webページ上に以下の要領でコントロールを配置します（図4）。

　ScriptReferenceProfilerコントロールは、外観を持たないコントロールですが、フォームデザイナ上に配置した場合、エラーが発生してしまいます。しかし、動作に影響が出る問題でもなく、実行もできます。

図4 配置完了後のフォームデザイナ画面

aspxページ上に配置するコントロール

コントロール	プロパティ設定	AJAX Control Extender
ScriptManager	特になし	特になし
TextBox	特になし	CalendarExtender
Button	特になし	ConfirmButtonExtender
ScriptReferenceProfiler	特になし	特になし

　CalendarExtender/ConfirmButtonExtenderコントロールは、特にプロパティを設定しなくともデバッグ実行できるので、今回は特に設定しません（重要なのは生成するScriptの確認）。また、ScriptReferenceProfilerコントロールは、配置するだけでページ上のスクリプトリソースを表示してくれます（図3）。

　ページ上に表示されたスクリプトの詳細をコピーし、デバッグ終了後、ScriptManagerコントロールのCompositeScript要素のScriptsコレクションにペーストします。

<asp:ScriptManager ID="ScriptManager1" runat="server" >
  <CompositeScript>
    <Scripts>
      <asp:ScriptReference name="MicrosoftAjax.js"    />
      <asp:ScriptReference name="MicrosoftAjaxWebForms.js"    />
      <asp:ScriptReference name="AjaxControlToolkit.Common.Common.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.Common.DateTime.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.Compat.Timer.Timer.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.Animation.Animations.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.Animation.AnimationBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.PopupExtender.PopupBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.Common.Threading.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.Calendar.CalendarBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
      <asp:ScriptReference name="AjaxControlToolkit.ConfirmButton.confirmButtonBehavior.js" assembly="AjaxControlToolkit, Version=3.0.20820.17594, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"    />
    </Scripts>
  </CompositeScript>
</asp:ScriptManager>

　以上で、CopositeScript要素とScriptsコレクションの設定は完了です。実行すると以下の図5のようになります。図3と見比べるとJavaScriptのファイル数が格段に減って軽量化されていることが確認できます。

図5 複合スクリプト設定後の実行画面

　非常に便利な機能なので、ASP.NET AJAXの機能を活用している場合は、活用しましょう。

次のページ
UpdatePanelの更新履歴を管理するHistory機能

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

印刷用を表示

ポスト

ASP.NET 3.5 Extensions + ASP.NET MVCフレームワーク連載記事一覧: ASP.NET AJAXの開発をさらにサポート「ASP.NET 3.5 SP1」

ADO.NET Data ServicesでRESTfulなサービスを実現する

簡単なデータ編集はお任せ！　ASP.NET Dynamic Dataアプリケーション

もっと読む

この記事の著者: 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、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

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

この著者の最近の執筆記事