チュートリアル : JavaScript ファイルのローカライズされたリソースの埋め込み

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、アセンブリ内の埋め込みリソースとして ECMAScript (JavaScript) ファイルを指定する方法、および JavaScript ファイルで使用するローカライズされた文字列を指定する方法について説明します。アセンブリと共に配布する必要があるクライアントスクリプトコンポーネントがある場合、アセンブリ内に JavaScript ファイルを埋め込みます。JavaScript ファイルは、アセンブリを登録する Web アプリケーションから参照できます。さまざまな言語やカルチャの JavaScript ファイルで使用される値を変更する必要がある場合、ローカライズされたリソースを埋め込みます。

前提条件

このチュートリアルの手順を実装するための要件は次のとおりです。

Microsoft Visual Studio 2008.

メモ :
Visual Web Developer Express Edition ではチュートリアルで必要なクラスライブラリプロジェクトを作成できないため、Visual Web Developer Express Edition を使用することはできません。

埋め込まれた JavaScript ファイルを含むアセンブリの作成

まず、リソースとして処理する JavaScript ファイルを含むアセンブリ (.dll ファイル) を作成します。そのためには、出力としてアセンブリが作成される Visual Studio で、クラスライブラリプロジェクトを作成します。

アセンブリにクライアントスクリプトファイルとリソースを埋め込むには

Visual Studio で、LocalizingScriptResources という名前の新しいクラスライブラリプロジェクトを作成します。
System.Web アセンブリと System.Web.Extensions アセンブリへの参照をプロジェクトに追加します。
CheckAnswer.js という名前のプロジェクトに新しい JScript ファイルを追加します。

CheckAnswer.js ファイルに次のコードを追加します。

function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}

function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}

スクリプトは、2 つの数値を加算したユーザーの回答を確認します。alert 関数を使用して、答えが正しいかどうかをユーザーに通知します。alert ダイアログボックスに表示されるメッセージは、サーバーへのポストバックなしでローカライズされたリソースから読み取られます。

ローカライズされた文字列を含むリソースファイルを識別するために、スクリプトでは Answer という名前のプレースホルダが使用されます。Answer プレースホルダは、この手順の後半で定義します。

CheckAnswer.js ファイルの [プロパティ] ウィンドウで、[ビルドアクション] を [埋め込まれたリソース] に設定します。
プロジェクトに ClientVerification という名前のクラスを追加します。

ClientVerification クラスファイルのコードを次のコードに置き換えます。

Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Resources

Public Class ClientVerification
    Inherits Control

    Private _button As Button
    Private _firstLabel As Label
    Private _secondLabel As Label
    Private _answer As TextBox
    Private _firstInt As Int32
    Private _secondInt As Int32


    Protected Overrides Sub CreateChildControls()
        Dim random = New Random()
        _firstInt = random.Next(0, 20)
        _secondInt = random.Next(0, 20)

        Dim rm = New ResourceManager("LocalizingScriptResources.VerificationResources", Me.GetType().Assembly)
        Controls.Clear()

        _firstLabel = New Label()
        _firstLabel.ID = "firstNumber"
        _firstLabel.Text = _firstInt.ToString()

        _secondLabel = New Label()
        _secondLabel.ID = "secondNumber"
        _secondLabel.Text = _secondInt.ToString()

        _answer = New TextBox()
        _answer.ID = "userAnswer"

        _button = New Button()
        _button.ID = "Button"
        _button.Text = rm.GetString("Verify")
        _button.OnClientClick = "return CheckAnswer();"

        Controls.Add(_firstLabel)
        Controls.Add(New LiteralControl(" + "))
        Controls.Add(_secondLabel)
        Controls.Add(New LiteralControl(" = "))
        Controls.Add(_answer)
        Controls.Add(_button)
    End Sub

End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Resources;


namespace LocalizingScriptResources
{
    public class ClientVerification : Control
    {
        private Button _button;
        private Label _firstLabel;
        private Label _secondLabel;
        private TextBox _answer;
        private int _firstInt;
        private int _secondInt;

        protected override void CreateChildControls()
        {
            Random random = new Random();
            _firstInt = random.Next(0, 20);
            _secondInt = random.Next(0, 20);

            ResourceManager rm = new ResourceManager("LocalizingScriptResources.VerificationResources", this.GetType().Assembly);
            Controls.Clear();

            _firstLabel = new Label();
            _firstLabel.ID = "firstNumber";
            _firstLabel.Text = _firstInt.ToString();

            _secondLabel = new Label();
            _secondLabel.ID = "secondNumber";
            _secondLabel.Text = _secondInt.ToString();

            _answer = new TextBox();
            _answer.ID = "userAnswer";

            _button = new Button();
            _button.ID = "Button";
            _button.Text = rm.GetString("Verify");
            _button.OnClientClick = "return CheckAnswer();";

            Controls.Add(_firstLabel);
            Controls.Add(new LiteralControl(" + "));
            Controls.Add(_secondLabel);
            Controls.Add(new LiteralControl(" = "));
            Controls.Add(_answer);
            Controls.Add(_button);
        }
    }
}

コードによりカスタム ASP.NET コントロールが作成されます。このコントロールには、2 つの Label コントロール、TextBox コントロール、および Button コントロールが含まれています。コードは、ランダムに生成された 2 つの整数と答えを入力するテキストボックスを表示します。ボタンをクリックすると、CheckAnswer 関数が呼び出されます。

プロジェクトにリソースファイルを追加し、VerificationResources.resx という名前を付けます。
値が "Yes, your answer is correct" の Correct という名前の文字列リソースを追加します。
値が "No, your answer is incorrect" の Incorrect という名前の文字列リソースを追加します。
値が "Verify Answer" の Verify という名前の文字列リソースを追加します。

このリソースは、クライアントスクリプトを使用して取得されるのではなく、ボタンを作成したときに、Button コントロールの Text プロパティを設定するために使用されます。
VerificationResources.resx ファイルを保存して閉じます。
プロジェクトに VerificationResources.it.resx という名前のリソースファイルを追加します。

このファイルには、イタリア語のリソース文字列が含まれます。
値が "Si, la risposta e’ corretta" の Correct という名前の文字列リソースを追加します。
値が "No, la risposta e’ sbagliata" の Incorrect という名前の文字列リソースを追加します。
値が "Verificare la risposta" の Verify という名前の文字列リソースを追加します。

英語で作成した "Verify" リソースと同様に、このリソースはクライアントスクリプトを使用して取得されるのではなく、ボタンを作成したときに、Button コントロールの Text プロパティを設定するために使用されます。
VerificationResources.it.resx ファイルを保存して閉じます。

次の行を AssemblyInfo ファイルに追加します。ScriptResourceAttribute 属性で型名に任意の名前を指定できますが、クライアントスクリプトで使用される型名と一致している必要があります。この例では、Answer に設定されます。

<Assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")> 
<Assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")>

[assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")]
[assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")]

メモ :
AssemblyInfo.vb ファイルは、ソリューションエクスプローラの [My Project] ノードにあります。[My Project] ノードにファイルが表示されない場合は、[プロジェクト] メニューの [すべてのファイルを表示] をクリックします。AssemblyInfo.cs ファイルは、ソリューションエクスプローラの [プロパティ] ノードにあります。

AssemblyInfo.vb ファイルは、ソリューションエクスプローラの [My Project] ノードにあります。[My Project] ノードにファイルが表示されない場合は、[プロジェクト] メニューの [すべてのファイルを表示] をクリックします。AssemblyInfo.cs ファイルは、ソリューションエクスプローラの [プロパティ] ノードにあります。

WebResource 定義には、アセンブリの既定の名前空間と .js ファイルの名前を含める必要があります。ScriptResource 定義には、ファイル名拡張子やローカライズされた .resx ファイルは含まれません。

プロジェクトをビルドします。

コンパイルが完了すると、LocalizingScriptResources.dll という名前のアセンブリが生成されます。CheckAnswer.js ファイル内の JavaScript コードと 2 つの .resx ファイル内のリソースは、このアセンブリにリソースとして埋め込まれます。

サーバーコードのイタリア語のリソースを含む LocalizingScriptResources.resources.dll (サテライトアセンブリ) という名前のアセンブリも生成されます。

埋め込まれたスクリプトとリソースの参照

これで、AJAX 対応の ASP.NET Web サイトでアセンブリを使用できます。.js ファイルとクライアントスクリプト内のリソース値を読み取ることができるようになります。

メモ :
同じ Visual Studio ソリューション内でクラスライブラリプロジェクトと Web サイトを作成できますが、このチュートリアルでは、これらの作成は想定していません。個別のソリューション内にプロジェクトを含めることで、コントロール開発者とページ開発者が個別に作業する状況をエミュレートできます。ただし、便宜上このチュートリアルでは、同じソリューション内で両方のプロジェクトを作成して、手順を微調整します。

同じ Visual Studio ソリューション内でクラスライブラリプロジェクトと Web サイトを作成できますが、このチュートリアルでは、これらの作成は想定していません。個別のソリューション内にプロジェクトを含めることで、コントロール開発者とページ開発者が個別に作業する状況をエミュレートできます。ただし、便宜上このチュートリアルでは、同じソリューション内で両方のプロジェクトを作成して、手順を微調整します。

埋め込まれたスクリプトとリソースを参照するには

Visual Studio で、AJAX 対応の新しい Web サイトを作成します。
Web サイトのルートに Bin フォルダを追加します。

クラスライブラリプロジェクトから Bin フォルダに LocalizingScriptResources.dll アセンブリを追加します。

メモ :
同じ Visual Studio ソリューション内にクラスライブラリプロジェクトと Web サイトを作成した場合は、クラスライブラリプロジェクトから Web サイトに参照を追加できます。詳細については、「方法 : Web サイトに Visual Studio プロジェクトへの参照を追加する」を参照してください。

Bin フォルダ内にフォルダを作成し、it (イタリア語を表します) という名前を付けます。
LocalizingScriptResources プロジェクト内の it フォルダから Web サイト内の it フォルダに、LocalizingScriptResources.resources.dll サテライトアセンブリを追加します。
新しい ASP.NET Web ページをプロジェクトに追加します。

ページ内のコードを次のコードに置き換えます。

<%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If (IsPostBack) Then
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
        Else
            selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = True
        End If
    End Sub

    Protected Sub selectLanguage_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
    End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList runat="server" AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
            <asp:ListItem Text="English" Value="en"></asp:ListItem>
            <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
        </asp:DropDownList>
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification ID="ClientVerification1" runat="server" ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
        }
        else
        {
            selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = true;
        }
    }

    protected void selectLanguage_SelectedIndexChanged(object sender, EventArgs e)
    {
        System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList runat="server" AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
            <asp:ListItem Text="English" Value="en"></asp:ListItem>
            <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
        </asp:DropDownList>
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification runat="server" ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

LocalizingScriptResources プロジェクトで作成したコントロールがページに追加されます。このコントロールには、ユーザーが加算する 2 つの数値、およびユーザーが答えを入力する TextBox コントロールが表示されます。ボタンをクリックしたときに CheckAnswer 関数でスクリプトを呼び出すボタンも表示されます。CheckAnswer 関数はブラウザで実行され、答えが正しいかどうかを示すローカライズされたメッセージを表示します。

ScriptManager コントロールがローカライズされたリソースを取得できるように、ScriptManager オブジェクトの EnableScriptLocalization プロパティを true に設定する必要があります。また、ブラウザの設定に基づく文字列を表示するために、カルチャと UI カルチャを "auto" に設定する必要もあります。

ページには、ブラウザ内の設定を変更せずに言語設定を変更するために使用できる、DropDownList コントロールが含まれます。DropDownList コントロールの SelectedIndex プロパティを変更すると、CurrentThread インスタンスの CurrentUICulture プロパティが選択した値に設定されます。

プロジェクトを実行します。

ランダムに生成された 2 つの数値、および答えを入力するための TextBox コントロールによって、加算の問題が表示されます。答えを入力し、[Verify Answer] ボタンをクリックすると、答えが正しいかどうかを通知するメッセージウィンドウに回答が表示されます。既定では、回答は英語で返されます。

ただし、ブラウザの優先言語としてイタリア語を設定した場合、回答はイタリア語になります。DropDownList コントロールで言語を選択するか、ブラウザの優先言語を変更することで、回答の言語を変更できます。

レビュー

このチュートリアルでは、アセンブリ内のリソースとして JavaScript ファイルを埋め込み、ローカライズされた文字列を指定する場合の概念について説明しました。埋め込まれたスクリプトファイルは、アセンブリを含む Web アプリケーションで参照しアクセスできます。ローカライズされた文字列は、ブラウザの言語設定、またはユーザーが指定した言語に基づいて表示されます。

参照

処理手順

コンポーネントライブラリのリソースのローカライズの概要

チュートリアル : JavaScript ファイルへのローカライズされたリソースの追加

次の方法で共有

チュートリアル : JavaScript ファイルのローカライズされたリソースの埋め込み

前提条件

埋め込まれた JavaScript ファイルを含むアセンブリの作成

アセンブリにクライアントスクリプトファイルとリソースを埋め込むには

埋め込まれたスクリプトとリソースの参照

埋め込まれたスクリプトとリソースを参照するには

レビュー

参照

処理手順

その他のリソース

次の方法で共有

チュートリアル : JavaScript ファイルのローカライズされたリソースの埋め込み

前提条件

埋め込まれた JavaScript ファイルを含むアセンブリの作成

アセンブリにクライアント スクリプト ファイルとリソースを埋め込むには

埋め込まれたスクリプトとリソースの参照

埋め込まれたスクリプトとリソースを参照するには

レビュー

参照

処理手順

その他のリソース

アセンブリにクライアントスクリプトファイルとリソースを埋め込むには