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）。
それでは非常に簡単にですが、サンプルを作成して見ましょう。
Webページ上に以下の要領でコントロールを配置します（図4）。
ScriptReferenceProfilerコントロールは、外観を持たないコントロールですが、フォームデザイナ上に配置した場合、エラーが発生してしまいます。しかし、動作に影響が出る問題でもなく、実行もできます。
| コントロール | プロパティ設定 | 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のファイル数が格段に減って軽量化されていることが確認できます。
非常に便利な機能なので、ASP.NET AJAXの機能を活用している場合は、活用しましょう。
