次の方法で共有

チュートリアル : クライアント スクリプトを使用した日付のグローバライズ

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、ECMAScript (JavaScript) を使用して、日、月、およびその他の日付関連の値をグローバライズされた形式で表示します。ASP.NET の AJAX 機能により、ScriptManager コントロールの設定に基づくクライアントのグローバリゼーションがサポートされます。これらのグローバリゼーション設定を Web アプリケーションに適用すると、クライアント スクリプトを使用して、カルチャ値に基づいて JavaScript の Date オブジェクトまたは Number オブジェクトを書式設定できるようになります。サーバーへのポストバックは必要ありません。

クライアント スクリプトで使用するカルチャ値は、ユーザーのブラウザ設定で指定された既定のカルチャ設定に基づいています。アプリケーションのサーバー設定またはサーバー コードを使用して、特定のカルチャに設定することもできます。

カルチャ値は、個々のカルチャ (ロケール) に関する情報を提供します。カルチャ値は、言語を表す 2 桁の文字と国または地域を表す 2 桁の文字を組み合わせたものです。たとえば、es-MX (スペイン語 - メキシコ)、es-CO (スペイン語 - コロンビア)、fr-CA (フランス語 - カナダ) などがその例です。

ASP.NET AJAX の Date の拡張機能により、JavaScript の Date オブジェクトで localeFormat メソッドが使用できるようになります。このメソッドを使用すると、ブラウザの言語設定、サーバーの設定、またはサーバー コードに基づいて Date オブジェクトを書式設定できます。これらの設定により、サーバーのカルチャ値が影響を受けます。サーバーはこのカルチャ値を解釈して、Sys.CultureInfo.CurrentCulture プロパティで公開されているクライアント オブジェクトを生成します。このオブジェクトを使用して、日付が書式設定されます。

カルチャおよびロケールの詳細については、「ASP.NET のグローバリゼーションおよびローカリゼーション」および CultureInfo クラスの概要を参照してください。

前提条件

独自の開発環境でこの手順を実装するための要件は次のとおりです。

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

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

ブラウザ設定に基づく日付のグローバライズ

まず、ブラウザの言語設定を使用して、日付の書式設定方法を指定します。

ブラウザの言語設定に基づいて日付をグローバライズするには

  1. Microsoft Internet Explorer または既定のブラウザについて、開いているインスタンスがある場合は、すべて閉じます。これにより、すべての新しいインスタンスで新しいロケール設定が使用されるようになります。

  2. Internet Explorer の新しいインスタンスを開きます。

  3. [ツール] メニューの [インターネット オプション] をクリックし、[全般] タブの [言語] をクリックします。

  4. 言語設定を es-MX (スペイン語 - メキシコ) に設定し、他のロケールを一覧から削除します。

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

    別のブラウザを使用している場合は、そのブラウザで同様の言語設定を行います。

  5. ブラウザを閉じます。

  6. Visual Studio で、ASP.NET AJAX 対応の Web ページを作成するか開いて、デザイン ビューに切り替えます。

  7. ScriptManager コントロールを選択し、その EnableScriptGlobalization プロパティを true に設定します。

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

    ページに ScriptManager コントロールが含まれていない場合は、ツールボックスの [AJAX Extensions] タブを使用して、このコントロールを追加します。

  8. ツールボックスの [AJAX Extensions] タブで、UpdatePanel コントロールをダブルクリックして、ページに更新パネルを追加します。

  9. UpdatePanel コントロールの ChildrenAsTriggers プロパティを false に設定します。

  10. UpdatePanel コントロールの UpdateMode プロパティを Conditional に設定します。

  11. UpdatePanel コントロールの内部をクリックし、ツールボックスの [標準] タブから、Button コントロールおよび Label コントロールを UpdatePanel コントロールに追加します。

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

    Label コントロールおよび Button コントロールは、UpdatePanel コントロールの内側に追加されていることを確認します。

  12. ボタンの ID プロパティが Button1 に設定されていることを確認し、Text プロパティを「Display Date」に設定します。

  13. ラベルの ID プロパティが Label1 に設定されていることを確認します。

  14. ソース ビューに切り替えます。

  15. ページの末尾で、script 要素を作成し、この要素に次のクライアント スクリプトを追加します。

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    このコードは、Button1 という名前のボタンに click ハンドラを追加します。コードが formatDate 関数を呼び出し、この関数によって新しい Date オブジェクトが作成され、Label1 要素に書式設定された日付が表示されます。日付の書式設定は、Date オブジェクトに対する Microsoft AJAX Library 拡張機能の一部である localeFormat 関数を使用して行われます。

  16. Web サイトの Web.config ファイルの system.web セクションに、次の globalization 要素を追加します。

    <globalization culture="auto" />

    "auto" 設定は、ブラウザの要求の ACCEPT-LANGUAGE ヘッダー (この中でユーザーの言語設定一覧が指定されている) を使用してカルチャ値が設定されることを表します。

  17. 変更内容を保存し、言語設定を変更したブラウザで Web ページを実行します。

  18. Display Date ボタンをクリックし、ブラウザの言語設定に基づいてグローバライズされた日付値を表示します。

    ブラウザの言語設定に基づいて日付をグローバライズするクライアント スクリプトを含む ASP.NET Web ページの例を次に示します。

    <%@ Page Language="VB" %>

<!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>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!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>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

  19. 完了したら、ブラウザの言語設定をリセットします。

構成設定に基づく日付のグローバライズ

書式設定された日付を複数のページで表示する場合は、Web サイトの構成ファイルでカルチャを設定できます。これにより、すべてのページの日付に対して書式の設定が適用されます。

構成ファイルの設定に基づいて日付をグローバライズするには

  1. アプリケーションの Web.config ファイルで、system.web セクションの globalization 要素を次のように変更します。

    <globalization culture="fr-CA" />

    この設定により、ブラウザの言語設定に関係なく、カルチャ値が "fr-CA" (フランス語 - カナダ) に設定されます。

  2. 変更内容を保存し、ブラウザで Web ページを実行します。

  3. Display Date ボタンをクリックし、グローバライズされた日付値を表示します。

    日付の書式設定は、ブラウザの言語設定ではなく、構成ファイルのカルチャ属性に基づいています。

    構成ファイルの設定に基づいて日付をグローバライズするクライアント スクリプトを含む ASP.NET Web ページの例を次に示します。

    <%@ Page Language="VB" %>

<!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>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!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>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

ページ設定に基づく日付のグローバライズ

個々のページでカルチャを設定するには、@ Page ディレクティブの Culture 属性を使用します。@ Page ディレクティブの Culture 属性は、構成ファイルの設定やブラウザの言語設定よりも優先されます。

ページ設定に基づいて日付をグローバライズするには

  1. 作業しているページで、次の例に示すように、カルチャ値が "de-DE" (ドイツ語 - ドイツ) になるように @ Page ディレクティブを変更します。

    <%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>

  2. 変更内容を保存し、ブラウザで Web ページを実行します。

  3. Display Date ボタンをクリックし、グローバライズされた日付値を表示します。

    日付の書式設定は、@ Page ディレクティブの Culture 属性に基づいています。

    ページ設定に基づいて日付をグローバライズするクライアント スクリプトを含む ASP.NET Web ページの例を次に示します。

    <%@ Page Language="VB" Culture="de-DE" %>

<!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>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!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>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

プログラムによる日付のグローバライズ

プログラムによってページのカルチャ値を設定する場合は、サーバー コードでページの InitializeCulture メソッドをオーバーライドします。InitializeCulture メソッドは、@ Page ディレクティブ、構成ファイル、およびブラウザのカルチャ設定よりも優先されます。

プログラムによって日付をグローバライズするには

  1. ページに次のメソッドを追加します。

        Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub

    protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}

    このコードは、基本 Page クラスの InitializeCulture メソッドをオーバーライドし、カルチャ値を "it-IT" (イタリア語 - イタリア) に設定します。これは、ページのライフ サイクルにおいて、プログラムによってカルチャを変更するのに適切な時期です。

  2. 変更内容を保存し、ブラウザで Web ページを実行します。

  3. Display Date ボタンをクリックし、グローバライズされた日付を表示します。

    日付値は、サーバー コードに基づいて書式設定されています。

    プログラムによって日付をグローバライズするクライアント スクリプトを含む ASP.NET Web ページの例を次に示します。

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
        protected override void InitializeCulture()
        {
            this.Culture = "it-IT";
        }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                   <asp:Button ID="Button1" runat="server" Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" runat="server"></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

書式設定のパターン

localeFormat メソッドでは、さまざまな書式設定のパターンを使用できます。日時の文字列書式の詳細については、「Sys.CultureInfo クラス」を参照してください。

参照

処理手順

方法 : ASP.NET Web ページのグローバリゼーション用のカルチャおよび UI カルチャを設定する

その他の技術情報

ASP.NET のグローバリゼーションおよびローカリゼーション