ステップ2 - 追加のロケール用にロケールパックを作成する

ロケールパックは、特定のロケール用のリソースのみを含むkzbファイルです。Kanzi Engine APIを使用すると、そのロケールを設定したときに特定のロケールで使用されるアプリケーションリソースをロードできます。これにより、アプリケーション内のkzbファイルのサイズを削減できます。

このチュートリアルのこのステップでは、まず Kanzi Studio プロジェクトを追加のロケールを読み込む準備をし、その後、Japanese、Chinese、および Korean ロケール用のスタイルとロケールパックを作成します。

Kanzi Studio プロジェクトを追加のロケールをロードする準備をする

このセクションでは、チュートリアルの最初のステップで作成した Kanzi Studio プロジェクトを修正します。

  • 追加のロケール用のリソースを含むPOファイルをインポートします。

  • プロジェクトを準備して、LocaleSelector ノード内の LocaleButton プレハブのインスタンスが、アプリケーションのロケールを制御するカスタムプロパティを使用するようにします。

追加のロケールをロードするためにプロジェクトを準備するには:

  1. Library > Localization で、Localization Table (Main) ローカライゼーションテーブルを右クリックし、Import Localization Table Manually を選択します。<KanziWorkspace>/Tutorials/Localization/Assets/Text ディレクトリに移動し、Japanese、Korean、および Chinese ロケールのテキスト文字列を含む ja-JP.po、ko-KR.po、および zh-ZH.po ファイルをインポートします。

    Kanzi Studio は、POファイルで指定されたロケールを作成し、これらのPOファイルからの翻訳をローカライゼーションテーブルに追加します。

    ../../_images/import-localization-table-manually.png ../../_images/localization-table-step-2.png
  2. アプリケーションのロケールを制御するために使用するカスタムプロパティタイプを作成します。

    1. Library で、Alt を押しながら右クリック Property Types を選択し、Property Type を選択します。

      ../../_images/create-property-type2.png
    2. New Property Type ウィンドウで、次を設定します。

      • Name から Localization.LocaleID へ

      • Category から LocaleButton へ

      • Data Type から Text へ

      • Editor から Locale selector へ

      Save をクリックします。

      このカスタムプロパティタイプを使用して、LocaleSelector ノード内のボタンを使用してロケールを設定します。

      ../../_images/localeid-property-type.png
  3. Prefabs で、LocaleButton プレハブを選択します。Properties で、Localization.LocaleID プロパティを追加します。

    ../../_images/localebutton-in-prefabs-2.png ../../_images/localeid-added-property.png
  4. Prefabs で、LocaleButton プレハブを選択します。Toggle Button: Toggled On トリガー内の Node Components で、Alt を押しながら右クリック Actions を選択し、Set Property アクションを選択して、次のように設定します。

    • Target Item から Screen へ

    • Target Property から Locale へ

    • Value From から Property へ

    • Source Item から <Relative> へ 。

      この方法で、ロケールを設定するために使用されるプレハブインスタンスから、Screen ノードの Locale プロパティの値を取得します。

    • Source Property から Localization.LocaleID へ

    この Set Property アクションを使用すると、ユーザーが LocaleButton プレハブのインスタンスを切り替えたときに、アプリケーションがロケールを切り替えるように設定します。アクションは、プレハブインスタンスの Localization.LocaleID プロパティからロケールの値を取得します。

    ../../_images/create-set-property-action.png ../../_images/localebutton-trigger.png
  5. 最初の LocaleButton プレハブインスタンスの LocaleSelector ノード内の Node Tree で:

    1. Properties で、Localization.LocaleID プロパティを追加し、このボタンで設定したいロケールに設定します。

      例えば、デフォルトのロケールを設定するには、この場合 English、Invariant Language (Invariant Country) () の値を選択します。

      ../../_images/localeid-add-property.png ../../_images/localeid-added-property.png
    2. Node Components で、Toggle Button: Toggled On トリガーを選択し、Delete キーを押します。

      プレハブの各インスタンスでトリガーが切り替えるロケールを定義していたトリガーを、LocaleButton プレハブで定義されたトリガーに置き換えます。新しいトリガーは、各プレハブインスタンスの Localization.LocaleID プロパティからロケールの値を取得します。

      ../../_images/toggled-on-trigger-selected.png ../../_images/toggled-on-trigger-deleted.png
  6. LocaleSelector ノード内の各 LocaleButton のインスタンスに対して、前のステップを繰り返します。

    • Finnish のロケールを設定する LocaleButton プレハブインスタンスに対して、Localization.LocaleID プロパティを Finnish (Finland) (fi-FI) に設定します。

    • Spanish のロケールを設定する LocaleButton プレハブインスタンスに対して、Localization.LocaleID プロパティを Spanish (Spain) (es-ES) に設定します。

  7. Node Tree で、Alt を押しながら右クリック の LocaleSelector ノードを選択し、Alias を選択します。

    Kanzi Studio は、Screen ノードのリソースディクショナリ内で LocaleSelector ノードへのエイリアスを作成します。

    このエイリアスを使用して、Kanzi Engine APIを使用して LocaleSelector ノードにアクセスし、ロケールパックからロケールをロードするためのボタンをノードに追加します。次のセクションでロケールパックを準備します。

    ../../_images/create-alias3.png ../../_images/localeselector-alias.png

追加のロケール用のスタイルを作成する

このセクションでは、Japanese、Chinese、および Korean グリフを含むフォントを使用する追加のロケールのスタイルを作成します。

追加のロケール用のスタイルを作成するには、以下のようにします。

  1. Kanzi Studio メインメニューで、File > Import > Import Fonts を選択します。Import Fonts ダイアログで、Browse をクリックし、<KanziWorkspace>/Tutorials/Localization/Assets/Fonts フォルダを選択して、Japanese、Korean、および Chinese グリフを含むフォントをインポートします。

    • Japanese には、Noto Sans CJK JP を使用します。

    • Korean には、Noto Sans CJK KR を使用します。

    • Chinese には、Noto Sans CJK SC を使用します。

    使用するフォントが、アプリケーション内のテキストに必要なグリフを備えていることを確認してください。FreeType フォントエンジンを使用する場合は、Unicode の書記体系ごとにフォールバック用のフォントファミリーを設定できます。フォントフォールバックの使用 を参照してください。

    ../../_images/import-the-fonts.png ../../_images/library-fonts1.png
  2. 各ロケールのフォントを設定するスタイルを作成します。

    1. Localization Editor で、+ Add Resource をクリックし、Create > Named Style を選択して、LocaleStyle と名付けます。

      ../../_images/create-named-style1.png
    2. Library > Styles で、LocaleStyle を右クリックし、Duplicate を選択して、使用するロケールにちなんでスタイルに名前を付けます。

      たとえば、スタイルに名前を付けます:

      • Japanese ロケールのための LocaleStyle-jp

      • Korean ロケールのための LocaleStyle-kr

      • Chinese ロケール LocaleStyle-zh の場合

      ../../_images/duplicate-localestyle.png ../../_images/name-the-localestyles.png
    3. Library でスタイルを選択し、Properties で Font Family プロパティを追加して、そのロケールのスタイルで使用されるグリフを含むフォントに設定します。

      例:

      • English、Finnish、および Spanish のローカルスタイル LocaleStyle に対して、Font Family プロパティを Noto Sans に設定します。

      • Japanese ロケールスタイル LocaleStyle-jp の場合、Font Family プロパティを Noto Sans CJK JP に設定します。

      • Korean ローカルスタイル LocaleStyle-kr の場合、Font Family プロパティを Noto Sans CJK KR に設定します。

      • Chinese ローカルスタイル LocaleStyle-zh の場合、Font Family プロパティを Noto Sans CJK SC に設定します。

      ../../_images/locale-font-korean.png
  3. 各ロケールの列にある Localization Table で、作成したスタイルを適用したいロケールの LocaleStyle セルをダブルクリックし、そのロケールに適用したいスタイルを選択します。

    例えば、Japanese ロケールでは LocaleStyle-jp を選択します。Finnish と Spanish のロケールは、デフォルトのフォントを使用する LocaleStyle を使用します。

    ../../_images/set-styles-in-localization-editor.png
  4. Node Tree で、RootPage ノードを選択します。Properties で、Font Family プロパティを削除し、Style プロパティを追加し、それを <ResourceID> に設定し、リソースIDを LocaleStyle に設定します。

    現在選択されているロケールのローカライゼーションテーブルからのリソースで、RootPage の Font Family プロパティの設定を置き換えます。

    ../../_images/rootpage-in-project2.png ../../_images/set-style-resourceid-localstyle.png
  5. LocaleSelector ノードの Node Tree で、LocaleButton プレハブのすべてのインスタンスを選択します。Properties で、Style プロパティを追加し、LocaleStyle スタイルに設定します。

    この方法で、English、Finnish、および Spanish ロケールのロケール名に対してフォントファミリーを設定します。

    ../../_images/node-tree-localeselector-en-fi-sp.png ../../_images/properties-style-localestyle.png

ロケールパックを作成する

ロケールパックは、特定のロケール用のリソースのみを含むkzbファイルです。

このセクションでは、Japanese、Korean、および Chinese ロケールのローカライズされたリソースをプロジェクトに追加し、ロケールパックを作成します。次のセクションでは、Kanzi Engine API を使用してロケールパックをロードします。

<KanziWorkspace>/Tutorials/Localization/Assets/Text ディレクトリには、このチュートリアルの Kanzi Studio プロジェクトで使用されているすべてのテキスト文字列が Japanese、Korean、および Chinese にローカライズされた PO ファイルがあります。

ロケールパックを作成するには:

  1. LocaleButton ノードでロケールの名前を表示するために使用するテキストリソースを作成します。

    1. Library > Localization で、Localization Table (Main) ローカライゼーションテーブルをダブルクリックして、Localization Editor で開きます。

    2. + Add Resource をクリックし、Create > Text を選択し、新しいテキストリソースに LocaleDisplayName と名前を付けます。

      次のステップでは、Kanzi Engine APIを使用して、このテキストリソースを設定し、そのロケールをロードするために使用する LocaleButton でロケールの名前を表示します。

      ../../_images/create-new-text.png
    3. ロケールパックからリソースをロードする各ロケールの列で、LocaleDisplayName セルをクリックし、各ロケールの LocaleButton に表示したいテキストを入力します。

      このロケールのユーザーが自分のロケールを見つけられるように、各ロケールにはネイティブ名を使用してください。例えば:

      • Japanese に「日本語」と入力してください。

      • Korean には、한국어と入力してください。

      • Chinese には、中文 を入力してください。

      ../../_images/korean-and-japanese-localization-editor.png
  2. Localization Table で、Japanese、Korean、および Chinese のロケールで使用したい画像を設定します。

    例:

    • Japanese ロケールには、Image04 を使用します。

    • Korean ロケールには、Image05 を使用します。

    • Chinese ロケールには、Image06 を使用します。

    ../../_images/set-images-for-additional-locales.png
  3. Localization Table で、Japanese、Chinese、および Korean のロケール名の横にある image1 をクリックします。

    この方法で、特定のロケールで使用されるリソースのみを含むロケールパックkzbファイルを作成したいロケールをマークします。Kanzi Studio は、ローカライゼーションテーブルでロケールパックとしてマークされたロケールのリソースをメインkzbファイルにエクスポートしません。

    ../../_images/export-locale-in-localilzation-editor.png
  4. Kanzi Studio で、File > Export > Export KZB を選択します。このコマンド:

    • ローカライゼーションテーブルでロケールパックとしてマークした各ロケールに対して、1つのkzbファイルを作成します。Kanzi Studio がロケールパックをエクスポートする際、kzbファイルはそのリソースを含むロケールの名前が付けられます。各ロケールパックファイルには、そのロケールで使用されるリソースのみが含まれています。

    • Kanzi Studio プロジェクト全体を含むメインの kzb ファイルを作成します。ただし、ローカライゼーションテーブルでロケールパックとしてマークしたロケールのリソースは除きます。

    • ロケールパックのkzbファイルを <ProjectName>/Application/bin/Locale_packs ディレクトリ、または Project > Properties の Binary Export Directory プロパティで指定した場所にある Locale_packs ディレクトリに保存します。

    ../../_images/export-kzb-binary.png

関連項目

アプリケーションのローカライズ

ロケールの使用

エイリアスの使用

スタイルを使用する

フォントのインポート

プロパティタイプ (Property Types)