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

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、ローカライズされたリソースを ECMAScript (JavaScript) ファイルに含める方法を示します。このチュートリアルでは、リソースは文字列です。ローカライズされたリソースを JavaScript ファイルに含めるのは、スタンドアロンの JavaScript ファイルを作成したとき、およびアプリケーションで言語およびカルチャによって異なる値を表示する必要があるときです。

スタンドアロンの JavaScript は、アセンブリにリソースとして埋め込まれていないため、リソース ファイルの値にアクセスできません。代わりに、ローカライズされた文字列値をスクリプト ファイル内に直接含めます。ローカライズされた値は、スクリプトがブラウザで実行されるときに取得されます。

スクリプト ファイルは、サポート対象の言語およびカルチャごとに個別に作成します。各スクリプト ファイルには、その言語およびカルチャ用のローカライズされたリソース値を含む JSON 形式のオブジェクトを含めます。

前提条件

このチュートリアルの手順を実行するには、以下が必要です。

  • Microsoft Visual Studio 2005 または Microsoft Visual Web Developer Express Edition。

  • AJAX 対応の ASP.NET Web サイト。

ローカライズされたリソース値を含む JavaScript ファイルの作成

リソース値を JavaScript ファイルに追加するには

  1. Web サイトのルート ディレクトリに、Scripts という名前のフォルダを追加します。

  2. Scripts フォルダに CheckAnswer.js という名前の JScript ファイルを追加し、そのファイルに次のコードを追加します。

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}

Answer={
"Verify":"Verify Answer",
"Correct":"Yes, your answer is correct.",
"Incorrect":"No, your answer is incorrect."
};

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}

Answer={
"Verify":"Verify Answer",
"Correct":"Yes, your answer is correct.",
"Incorrect":"No, your answer is incorrect."
};

    このスクリプト コードは、Sys.Application クラスの load イベントのハンドラを追加します。このハンドラは、ボタン テキストを設定します。ボタン テキストは、文字列ではなく、Answer.Verify というクラスで定義されている値に設定されます。これにより、ローカライズされた値を使用できるようになります。

    このスクリプトには、2 つの数値の加算問題に対するユーザーの答えを確認する関数も含まれています。alert 関数を使用して、答えが正しいかどうかをユーザーに通知します。ボタン テキストと同様に、alert ダイアログ ボックスに表示されるメッセージも、サーバーにポストバックされることなく、ローカライズされた文字列値に設定されます。

    スクリプトでは、Answer という型を使用して、ファイル内で使用するローカライズされた値のコレクションが定義されています。Answer 型は、CheckAnswer.js ファイルの末尾で JSON 形式で定義されています。

  3. Scripts フォルダに、CheckAnswer.it-IT.js という名前の JScript ファイルを追加します。次のコードをファイルに追加します。

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}
Answer={
"Verify":"Verificare la risposta",
"Correct":"Si, la risposta e’ corretta.",
"Incorrect":"No, la risposta e’ sbagliata."
};

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}
Answer={
"Verify":"Verificare la risposta",
"Correct":"Si, la risposta e’ corretta.",
"Incorrect":"No, la risposta e’ sbagliata."
};

    このファイルは CheckAnswer.js ファイルと同じものですが、イタリア語の値を使用した Answer 型が定義されている点が異なります。

    別の言語でローカライズされたテキストを使用するには、別の JavaScript ファイルを作成します。JavaScript のコードは常に同じですが、Answer 型で定義されている値の言語は異なります。各 JavaScript ファイルの名前には、該当する言語およびロケールを含める必要があります。

ASP.NET ページでの JavaScript のリソース値の使用

これで、作成したスクリプト コードを使用する ASP.NET Web ページを作成できるようになりました。このページで、言語の変更による効果をテストできます。

ASP.NET Web ページで JavaScript のリソース値を使用するには

  1. ASP.NET Web ページを作成します。

  2. Web ページのコンテンツを、次のマークアップおよびコードに置き換えます。

    <%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>

<script runat="server">


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim _firstInt As Int32
        Dim _secondInt As Int32

        Dim _random As New Random()
        _firstInt = _random.Next(0, 20)
        _secondInt = _random.Next(0, 20)

        firstNumber.Text = _firstInt.ToString()
        secondNumber.Text = _secondInt.ToString()

        If (IsPostBack) Then
            userAnswer.Text = ""
            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 Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" runat="server"></asp:Label>
        +
        <asp:Label ID="secondNumber" runat="server"></asp:Label>
        =
        <asp:TextBox ID="userAnswer" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<script runat="server">


    protected void Page_Load(object sender, EventArgs e)
    {   
        int _firstInt;
        int _secondInt;

        Random random = new Random();
        _firstInt = random.Next(0, 20);
        _secondInt = random.Next(0, 20);

        firstNumber.Text = _firstInt.ToString();
        secondNumber.Text = _secondInt.ToString();

        if (IsPostBack)
        {
            userAnswer.Text = "";
            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 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 Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" runat="server"></asp:Label>
        +
        <asp:Label ID="secondNumber" runat="server"></asp:Label>
        =
        <asp:TextBox ID="userAnswer" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

    このマークアップは、DropDownList、2 つの Label、TextBox、および Button の各コントロールを作成します。ページは、2 つのランダムに生成された整数を表示して、これらの整数を加算するようユーザーに要求し、答えを入力するためのテキスト ボックスを表示します。ボタンをクリックすると、JavaScript の CheckAnswer 関数が呼び出されます。

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

    Bb398935.alert_note(ja-jp,VS.90).gifメモ :

    スレッドのカルチャ情報の設定方法については、「方法 : ASP.NET Web ページのグローバリゼーション用のカルチャおよび UI カルチャを設定する」を参照してください。

    ScriptManager コントロールには、CheckAnswer.js スクリプト ファイルへの参照が含まれます。これにより、ページの実行時に CheckAnswer.js ファイルが取得されます。

    Web サイトにイタリア語バージョンのスクリプトを含めるように指定する場合、参照の ResourceUICultures プロパティは "it-IT" に設定されます。その結果、ScriptManager オブジェクトは、DropDownList コントロールで "Italian" を選択したとき、またはブラウザの既定の言語を "Italian" に設定したときに、イタリア語バージョンを取得します。

  3. ページを実行します。

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

    既定では、回答は英語で表示されます。

  4. ドロップダウン リストで [Italian] をクリックして、言語をイタリア語に変更します。

  5. 問題をもう一度解いて答えを入力します。

    今度は、回答がイタリア語で表示されます。

レビュー

このチュートリアルでは、ローカライズされたリソース値をスタンドアロンの JavaScript ファイルに追加する方法を説明しました。ローカライズされた値は、個別のローカライズされた JavaScript ファイルに含まれる JSON 形式のオブジェクトとして作成されます。ローカライズされた値は、ハードコーディングされた文字列を使用する代わりに、JSON オブジェクトを参照することによって表示されます。ローカライズされた文字列は、ブラウザの言語設定、またはユーザーが指定した言語設定に基づいて表示されます。

参照

処理手順

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

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