クイックスタート: UI リソースの翻訳 (HTML)

[アーティクル]
01/29/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

UI の文字列リソースをリソースファイルに格納します。その後、これらの文字列をコードやマークアップから参照できます。

手順

文字列を、コードまたはマークアップに直接含める代わりに、リソースファイルに格納します。
1. Visual Studio で package.appxmanifest を開き、[アプリケーション] タブに移動して、既定の言語を "en-US" に設定します。これがユニバーサルアプリである場合は、ソリューションの各 package.appxmanifest に対してこの手順を実行します。注これにより、プロジェクトの既定の言語を指定します。既定の言語リソースは、ユーザーが優先する言語または表示言語がアプリケーションで提供される言語リソースに一致しない場合に使われます。プロパティページ、JavaScript に関するページをご覧ください。
2. リソースファイルを格納するためのフォルダーを作ります。
  1. ソリューションエクスプローラーで、プロジェクト (ユニバーサルアプリの場合は共有プロジェクト) を右クリックし、[追加]、[新しいフォルダー] を順に選びます。
  2. 新しいフォルダーに "strings" という名前を付けます。
  3. ソリューションエクスプローラーに新しいフォルダーが表示されない場合は、プロジェクトが選ばれている状態で Microsoft Visual Studio のメニューの [プロジェクト]、[すべてのファイルを表示] を順に選びます。
3. 英語 (米国) 用のサブフォルダーとリソースファイルを作ります。
  1. strings フォルダーを右クリックし、その下に新しいフォルダーを追加します。新しいフォルダーに "en-US" という名前を付けます。リソースファイルは、BCP-47 言語タグの名前を持つフォルダーに格納されています。言語修飾子の詳しい情報と共通の言語タグの一覧は、「修飾子を使ってリソースに名前を付ける方法」をご覧ください。
  2. en-US フォルダーを右クリックし、[追加]、[新しい項目]… の順に選びます。
  3. "[リソースファイル (.resjson)]" を選びます。
  4. [追加] をクリックします。resources.rejson という既定の名前の付いたリソースファイルが追加されます。この既定のファイル名を使うことをお勧めします。アプリはそのリソースを他のファイルに分割できますが、そのファイルを正しく参照するように注意する必要があります (「文字列リソースを読み込む方法」をご覧ください)。
  5. 新しいファイルには既定のコンテンツが含まれます。このコンテンツを次のものと置き換えます (既定と類似している場合もあります)。
    
    strings/en-US/resources.resjson
```
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}
```
    これは厳密な JavaScript Object Notation (JSON) 構文で、最後のペアを除く各名前と値のペアの後にコンマが必要です。この例では、"greeting" と "farewell" が表示される文字列を特定しています。他方のペア ("_greeting.comment" と "_farewell.comment") は文字列を説明するコメントです。コメントは、文字列を他の言語にローカライズする翻訳者に特別な指示を伝えるのに便利です。
コードとマークアップに文字列リソース識別子を追加します。
1. JavaScript 用 Windows ライブラリへの参照を HTML ファイルに追加していない場合は追加します。
  
  注次のコードは、Visual Studio で新しい [空のアプリケーション (ユニバーサルアプリ)] プロジェクトを作ると生成される Windows プロジェクトの default.html ファイルの HTML を示しています。ファイルには WinJS への参照が既に含まれていることに注意してください。
```

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
```
  注次のコードは、Visual Studio で新しい [空のアプリケーション (ユニバーサルアプリ)] プロジェクトを作ると生成される WindowsPhone プロジェクトの default.html ファイルの HTML を示しています。ファイルには WinJS への参照が既に含まれていることに注意してください。
```

<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
```
2. HTML ファイルに付随する JavaScript コードで、HTML が読み込まれるときに WinJS.Resources.processAll 関数を呼び出します。
```
WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}
```
  追加の HTML が WinJS.UI.Pages.PageControl オブジェクトに読み込まれると、ページコントロールの IPageControlMembers.ready メソッドで WinJS.Resources.processAll (element) を呼び出します。ここでは、element は、読み込まれる HTML 要素 (およびその子要素) です。この例は、「アプリリソースとローカライズのサンプル」のシナリオ 6 に基づいています。
```
var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});
```
3. HTML でリソース識別子 ('greeting' と 'farewell') を使ってリソースファイルから文字列リソースを参照します。
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```
4. 属性の文字列リソースを参照します。
```
<div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
```
5. JavaScript で文字列リソースを参照します。
```
var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);
```
HTML の置き換えの data-win-res 属性の標準パターンは data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}" です。

注文字列にマークアップが含まれていない場合は、可能な限り、リソースを innerHTML ではなく textContent プロパティにバインドします。textContent プロパティの方が、innerHTML よりも高速で置き換えることができます。
他の 2 つの言語用にフォルダーとリソースファイルを追加します。
1. [strings] フォルダーの下にドイツ語用の別のフォルダーを追加します。フォルダーに Deutsch (Deutschland) を表す "de-DE" という名前を付けます。
2. de-DE フォルダー内に別の Resources.rejson ファイルを作成し、その内容を次のコードで置き換えます。
  
  strings/de-DE/resources.resjson
```
{
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}
```
3. フォルダーをもう 1 つ作り、français (France) を表す "fr-FR" という名前を付けます。新しい Resources.rejson ファイルを作成し、その内容を次のコードで置き換えます。
  
  strings/fr-FR/resources.resjson
```
{
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}
```
アプリをビルドして実行する

既定の表示言語に対してアプリをテストします。
1. F5 キーを押して、アプリをビルドし、実行します。
2. "greeting" と "farewell" がユーザーが優先する言語で表示されることを確かめます。
3. アプリを終了します。
注 Windows ストアアプリのみ。他の言語に対してアプリをテストします。
1. コントロールパネルを開き、[時計、言語、および地域]、[言語] を順に選びます。
2. 前回アプリを実行したときに表示された言語は、一覧の中で最上位にリストされている言語 (英語、ドイツ語、またはフランス語) です。最上位にリストされている言語がこれらのいずれでもない場合、アプリでサポートされているリスト内の次の言語にフォールバックされます。
3. これらの 3 つの言語のいずれかがコンピューターにインストールされていない場合は、[言語の追加] をクリックして、言語を一覧に追加します。
4. 別の言語でアプリをテストするには、一覧内で言語を選び、[上へ移動] をクリックして一覧の最上位に移動します。その後、アプリを実行します。
注 Windows Phone ストアアプリのみ。他の言語に対してアプリをテストします。
1. 電話 (または電話エミュレーター) で [設定] を起動します。
2. [言語] を選びます。
3. 前回アプリを実行したときに表示された言語は、一覧の中で最上位にリストされている言語 (英語、ドイツ語、またはフランス語) です。最上位にリストされている言語がこれらのいずれでもない場合、アプリでサポートされているリスト内の次の言語にフォールバックされます。
4. これらの 3 つの言語のいずれかが電話にインストールされていない場合は、[言語を追加] をタップして、言語を一覧に追加します。
5. 別の言語でアプリをテストするには、一覧内で言語をタップしたまま押さえ、[上へ移動] をタップして一覧の最上位に移動します。次に、電話をリセットして、アプリを実行します。

クイックスタート: UI リソースの翻訳 (HTML)

手順

関連トピック

その他のリソース

クイック スタート: UI リソースの翻訳 (HTML)

手順

関連トピック

その他のリソース

クイックスタート: UI リソースの翻訳 (HTML)