クライアント スクリプトを複合スクリプトに結合

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET AJAX アプリケーションでは、コントロールのクライアント動作は JavaScript ファイルを使用して定義されます。通常は、1 つの JavaScript ファイルで 1 つのコントロールのクライアント動作を定義します。Web ページに複数のコントロールが含まれている場合は、ブラウザで複数の JavaScript ファイルをダウンロードする必要が生じます。1 つのファイルのダウンロードにかかる時間はごくわずかです。ただし、Web ページに多数のコントロールが含まれていると、多くのファイルをダウンロードするために時間がかかり、そのページの体感的なパフォーマンスが低下する可能性があります。

解決策は、複数の JavaScript ファイルを結合して、複合スクリプトと呼ばれる 1 つのファイルにすることです。これにより、ブラウザ要求の数が低減されます。結果として、ユーザーのダウンロード時間が短縮され、Web サーバーへの負荷が少なくなります。

ASP.NET AJAX では、ScriptManager コントロールまたは ScriptManagerProxy コントロールの複合スクリプト参照を使用することにより、複数の JavaScript ファイルを 1 つの複合スクリプトに結合できます。あるスクリプトから他のスクリプト内の関数を呼び出す場合など、スクリプトに依存関係が含まれている場合は、各スクリプトが適切な順序で登録されるように管理する必要があります。

ブラウザでスクリプトの圧縮がサポートされていれば、複合スクリプトはブラウザに送信される前に自動的に圧縮されます。ただし、Microsoft Internet Explorer 6.0 は例外です。Microsoft Internet Explorer 6.0 には、ASP.NET から常に未圧縮のスクリプトが送信されます。

複合スクリプトの作成

ASP.NET AJAX アプリケーションでは、ScriptManager コントロールを使用することにより、複合スクリプトを自動的に作成できます。スクリプトを結合するには、CompositeScript 要素を追加し、複合スクリプトに含める順序でスクリプト参照を指定します。

ScriptManager コントロールの ComposteScript 要素を使用してクライアント スクリプトを結合する方法を次の例に示します。ユーザーがいずれかのボタンをクリックすると、複合スクリプト内の関数が呼び出され、対応する span 要素が更新されます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Combining Scripts</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    <h2>Combining Scripts</h2>
    <p>This example shows how to combine multiple client scripts into
    a single composite script.</p>
    <div>
        <input id="Button1" type="button" value="Button 1" onclick="buttonClick1()" />
        <span id="Span1"></span><br /><br />
        <input id="Button2" type="button" value="Button 2" onclick="buttonClick2()" />
        <span id="Span2"></span><br /><br />
        <input id="Button3" type="button" value="Button 3" onclick="buttonClick3()" />
        <span id="Span3"></span>
    </div>
    </form>
</body>
</html>

例をわかりやすくするために、次に示すスクリプトの内容はほとんど同じになっています。それぞれのスクリプトは、span 要素を検索し、短いメッセージを出力します。

function buttonClick1()
{
    var text = Sys.UI.DomElement.getElementById("Span1");
    text.innerHTML = "You clicked Button 1. (Script1)";
}

function buttonClick2()
{
    var text = Sys.UI.DomElement.getElementById("Span2");
    text.innerHTML = "You clicked Button 2. (Script2)";
}

function buttonClick3()
{
    var text = Sys.UI.DomElement.getElementById("Span3");
    text.innerHTML = "You clicked Button 3. (Script3)";
}

複合スクリプトのソース

複合スクリプトには、ローカル パスに基づくスクリプト参照、またはアセンブリを参照するスクリプト参照を含めることができます。ローカル パスに基づくスクリプト参照は、ScriptReference 要素の Path 属性によって識別されます。アセンブリに基づく参照は、Name 属性によって識別されます。サーバー上に存在しないスクリプトを参照する (つまり、ネットワーク パスを参照する) ローカル スクリプト参照は使用できません。

複合スクリプトに他の複合スクリプトを含めることはできません。Web ページで使用されるスクリプトをすべて含める必要はありません。ただし、MicrosoftAjax.js などの ASP.NET AJAX フレームワークのスクリプトを含めることはできます。

フレームワーク スクリプト、ローカル パスに基づくスクリプト、および複数のアセンブリに基づくエクステンダ スクリプトを結合する複合スクリプトを次の例に示します。

<asp:ScriptManager id="SM1" runat="server">
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

前の例の ScriptManager コントロールは、次の各スクリプトがこの順序で含まれている複合スクリプトをダウンロードします。

  • MicrosoftAjax.js

  • Custom.Extender.1.js

  • Custom2.js

  • Custom.Extender.2.js

  • Custom.Extender.3.js

ScriptManager コントロールの ScriptPath 属性は、グループに含まれている各スクリプトに適用されますが、結果の複合スクリプトには適用されません。複合スクリプトのスクリプト パスは、CompositeScript 要素の Path 属性を使用して定義されます。

複合スクリプトへのファイル名の割り当て

次の例に示すように、CompositeScript 要素に Path 属性を追加することにより、必要に応じて複合スクリプトにファイル名を割り当てることができます。

<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">
Cc488552.alert_note(ja-jp,VS.90).gifメモ :

スクリプト名には、コンマ (,) やパイプ文字 (|) を使用しないでください。

スクリプト参照の動的な変更

スクリプトの結合は、ResolveScriptReference イベントの発生後に行われます。したがって、イベント ハンドラを記述することでスクリプト参照を変更できます。ただし、スクリプトが登録される順序は変更できません。

ページ間での複合スクリプトの共有

何度もダウンロードが行われるのを避けるために、複数のページで複合スクリプトを共有するには、マスタ ページに複合スクリプトを追加します。同様に、テーマを使用してスクリプトの結合を定義できます。

ローカライズされたスクリプトの結合

EnableScriptLocalization プロパティが true (既定値) に設定されている場合、ローカライズされたバージョンのスクリプトが使用可能であれば、それらがフレームワークによって結合されます。ローカライズされたスクリプトは、元のバージョンと同じ順序で結合され、元のバージョンと同じモデルを使用します。

UpdatePanel コントロールでの複合スクリプトの使用

UpdatePanel コントロール内のコントロールやカスタム コンポーネントからのスクリプトを含む複合スクリプトを作成できます。UpdatePanel コントロールの非同期ポストバックの間に、コントロールでは、複合スクリプトの一部として既にダウンロードされているスクリプトの登録が試行されることがあります。この場合、その単独のスクリプト参照はフレームワークによって削除され、ダウンロード済みの複合スクリプトへの参照に置き換えられます。

UpdatePanel コントロールに定義されたカスタム コンポーネントをサポートする、複合スクリプト参照の例を次に示します。

<asp:ScriptManager id="SM1" runat="server">
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="~/Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.4.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

<asp:UpdatePanel runat="server"...>
  <ContentTemplate>
    ...
    <cc:custom4 runat="server" id="cc4"... />
    ...
  </ContentTemplate>
</asp:UpdatePanel>

参照

概念

AJAX およびクライアント機能の追加