クイックスタート: 文字列リソースの使用 (HTML)

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

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

文字列リソースをリソースファイル内に設定し、これらの文字列を JavaScript コードや HTML マークアップから参照します。

手順

文字列を、コードまたはマークアップに直接含める代わりに、リソースファイルに格納します。
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 ファイルへの参照を HTML ファイルに追加していない場合は追加します (既定のテンプレートによって、これらの参照は必ず生成されます。既定の CSS ファイルの名前は、使うテンプレートによって異なる場合がありますが、この例の目的では重要な問題ではありません)。
```

<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) を使って、リソースファイル内の文字列リソースを参照します。その際、data-win-res attribute を使います。
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```
4. JavaScript で文字列リソースを参照する方法を次に示します。
```
var el = document.getElementById('header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);
```

注意事項とヒント

HTML の置き換えの data-win-res attribute の標準パターンは、data-win-res="{propertyname1**: 'resource ID', propertyname2: 'resource ID2'}"** です。

リソース文字列にマークアップが含まれておらず、プレーンテキストとして挿入できる場合は、リソースを innerHTML ではなく textContent プロパティにバインドします。textContent プロパティの方が、DOM 内では innerHTML よりも高速で置き換えることができます。

attributes: をプロパティ名として使うこともできます。この場合、値は指定したリソース名ではなく、最初の値に属性名が設定され、2 番目の値に必要な特定のリソース名が設定された値のセットになります (例: <div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>)。この例については、アプリリソースとローカライズのサンプルに関するページのシナリオ 9 をご覧ください。

言語の追加、ローカライズについて詳しくは、「クイックスタート: UI リソースの翻訳」をご覧ください。

クイックスタート: 文字列リソースの使用 (HTML)

手順

注意事項とヒント

関連トピック

その他のリソース

クイック スタート: 文字列リソースの使用 (HTML)

手順

注意事項とヒント

関連トピック

その他のリソース

クイックスタート: 文字列リソースの使用 (HTML)