WinJS コントロールをローカライズする方法 (HTML)

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

WinJS コントロールのラベルとアイコンを、アプリの残りのコンテンツと共にローカライズします。

必要条件

• 言語と地域を管理する方法 (手順 1. ユーザー言語の優先順位を設定します)
• クイック スタート: 文字列リソースの使用
• クイック スタート: コマンドを表示するアプリ バーの追加
• クイック スタート: メニューの追加
• クイック スタート: WinJS コントロールとスタイルの追加

プロパティをローカライズする

WinJS コントロールはローカライズが必要な属性を含む場合があります。たとえば、次のような属性です。

• アプリ バー コマンドのラベルとアイコン
• メニュー項目ラベル
• 設定ポップアップのトグル スイッチ ラベル
• アクセシビリティのための ARIA ラベル

ローカライズされた文字列を参照するために、リソース識別子を WinJS コントロールのマークアップに追加します。

下のアプリ バーの例では、data-win-res 属性が次のパターンで各アプリ バー コマンドに追加されています。

data-win-res="{winControl: {propertyName1:'resourceID1',propertyName2:'resourceID2'}}"

各 propertyName は、コントロールのいずれかのプロパティ (アベルやタイトルなど) に対応しています。resourceID は、リソース ファイルから読み込まれる文字列のリソース識別子を表します。下の strings/en-US/resources.resjson の例をご覧ください。

このマークアップに付随する JavaScript コードでは、各 data-win-res 属性の属性とプロパティをリソース文字列に置き換えるために、HTML を読み込むときに WinJS.Resources.processAll 関数が呼び出される必要があります。

アプリ バーの例

この例は、アプリ バーのコマンド文字列をローカライズする方法を示しています。

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" 
     data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
     data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
     data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
     data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
</button>
</div>

(function () {

    "use strict";
    var page = WinJS.UI.Pages.define("/html/localize-appbar.html", {
    ready: function (element, options) {
        // Load resources.
        loadResources();
        // Enable listener so they get updated when user changes language selection.
        WinJS.Resources.addEventListener("contextchanged", loadResources);
    }
});

// Handle loading of resources.
function loadResources() {
    WinJS.Resources.processAll();
}

})();

リソース ファイル

strings/en-US/resources.resjson

{
    "command1Label"            : "en-US Command1",
    "command1Tooltip"          : "en-US Command1 Tooltip",

    "command2Label"            : "en-US Command2",
    "command2Tooltip"          : "en-US Command2 Tooltip"
}

strings/fr-FR/resources.resjson

{
    "command1Label"            : "fr-FR Command1",
    "command1Tooltip"          : "fr-FR Command1 Tooltip",

    "command2Label"            : "fr-FR Command2",
    "command2Tooltip"          : "fr-FR Command2 Tooltip"
}

strings/de-DE/resources.resjson

{
    "command1Label"            : "de-DE Command1",
    "command1Tooltip"          : "de-DE Command1 Tooltip",

    "command2Label"            : "de-DE Command2",
    "command2Tooltip"          : "de-DE Command2 Tooltip"
}

メニューの例

このマークアップは、メニュー コントロールをローカライズする方法を示しています。アプリ バーの例と同様に、JavaScript とリソース ファイルも必要です。

<div id="headerMenu" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item1Label'}}" 
        data-win-options="{id:'firstMenuItem'}">
    </button>
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item2Label'}}" 
        data-win-options="{id:'secondMenuItem'}">
    </button>
    <hr data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{id:'separator',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'itemNLabel'}}" 
        data-win-options="{id:'lastMenuItem'}">
    </button>
</div>

トグル スイッチの例

このマークアップは、ToggleSwitch コントロールをローカライズする方法を示しています。アプリ バーの例と同様に、JavaScript とリソース ファイルも必要です。

<div data-win-control="WinJS.UI.ToggleSwitch" 
    data-win-res="{winControl: {labelOn:'switch1LabelOn',labelOff:'switch1LabelOff',
    title:'switch1Title'}}"
    data-win-options="">
</div>

関連トピック

HTML AppBar コントロールのサンプルに関するページ

HTML ポップアップ コントロールに関するページ

HTML ToggleSwitch コントロールのサンプルに関するページ