ステップ 1 - テキストとテクスチャコンテンツをローカライズする¶
このチュートリアルのこのステップでは、ローカライゼーションテーブルにリソースを追加する方法、Kanzi アプリケーション内のテキストコンテンツを翻訳者向けに準備する方法、および翻訳されたテキストコンテンツを Kanzi アプリケーションに追加する方法を学びます。また、ロケールを変更するトリガーを作成する方法や、アプリケーション内のテクスチャをローカライズする方法も学びます。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Localization チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Localization/Start/Tool_projectディレクトリ内のチュートリアルの開始地点プロジェクト。<KanziWorkspace>/Tutorials/Localization/Assetsディレクトリ内のチュートリアルアセット：Fontsディレクトリには、Japanese、Chinese、および Korean グリフを含むフォントが含まれています。Imagesディレクトリには、ロケールで使用する画像が含まれています。Textディレクトリには、プロジェクトの翻訳されたテキストが PO ファイルとして含まれています。
<KanziWorkspace>/Tutorials/Localization/Completedディレクトリ内の完成済みチュートリアル。
開始プロジェクトの内容¶
スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。
このチュートリアルでローカライズするモックアップアプリケーションのレイアウト。
あなたがローカライズするテキストコンテンツ。
ローカライズするテクスチャ。
アプリケーションのロケールを設定するためのトグルボタンを追加する Toggle Button Group ノード。
現在選択されているロケールを表示するために使用するステートマネージャー。
リソースをローカライゼーションテーブルに追加し、翻訳をインポートします。¶
ローカライゼーションテーブルにリソースを追加し、翻訳をインポートするには:
Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Localization チュートリアルの横にある Open をクリックし、Start project を選択します。
Node Tree で、Screen ノードを右クリックし、Add Resources to a Localization Table を選択します。
Add Resources to a Localization Table コマンドを Screen ノードで使用すると、Kanzi Studio によりプロジェクト内のすべてのリソースをローカライゼーションテーブルに追加してローカライズすることができます。
選択したノードとそのツリーにのみリソースをローカライゼーションテーブルに追加するには、ノードを右クリックして Add Resources to a Localization Table を選択します。Kanzi Studio は、そのノードツリーで使用されているリソースのみを Add Resources to a Localization Table ウィンドウに表示します。
Add Resources to a Localization Table ウィンドウで：
Localization Table を追加したいリソースのローカライゼーションテーブルに設定します。まだローカライゼーションテーブルがない場合は、<Create New> を選択します。
ローカライゼーションテーブルは、どのロケールがどのリソースを使用するかに関する情報を含んでいます。
このチュートリアルのこのステップでは、テキストリソースのみをローカライズします。他の種類のリソースは次のステップでローカライズします。
Select All をクリックして、すべてのリストされたリソースを選択します。
各リソースを選択するには、リソースの横にあるチェックボックスを使用します。すべてのリソースを選択または選択解除するには、ウィンドウの左下にあるボタンを使用します。
Add をクリックします。
Kanzi Studio は、選択したすべてのリソースタイプからリソースとリソースIDを作成し、選択したローカライゼーションテーブルにそれらを追加します。ローカライゼーションテーブルは、Library > Localization にあります。これで、リソースをローカライズし、ローカライゼーションテーブルでリソースをロケールに割り当てることができます。
ヒント
ウィンドウの右上部分で、ウィンドウに表示したいリソースの種類を選択できます。
デフォルトで、Kanzi はプロジェクト内のテキストリソース
を表示します。
Library > Localization で、ローカライゼーションテーブル Localization Table (Main) を右クリックし、Export Localization Table を選択します。
Kanzi Studio は、ローカライゼーションテーブルテンプレートをPOTファイル形式で
<ProjectName>/Tool_project/Localization/<LocalizationTableName>ディレクトリにエクスポートします。Kanzi アプリケーションを初めてローカライズする際には、そのPOTファイルを翻訳者に送信してください。これは、ローカライゼーションテーブル内の各テキストリソースの文字列とそのコンテキストを含むテンプレートファイルです。
翻訳者は、各ロケールのテキストコンテンツを翻訳するためにPOTテンプレートファイルを使用します。翻訳の結果として、各ロケールごとに1つのPOファイルが作成されます。このチュートリアルでは、フィンランド語 (fi-FI ロケール) とスペイン語 (es-ES ロケール) の翻訳が含まれたPOファイルを
<KanziWorkspace>/Tutorials/Localization/Assets/Textディレクトリで見つけることができます。また、Japanese、Chinese、Korean ロケールのPOファイルもそこにあり、これらをこのチュートリアルの最後のステップでロケールパックとして追加します。
Library > Localization で、エクスポートしたローカライゼーションテーブルを右クリックし、Import Localization Table Manually を選択します。
<KanziWorkspace>/Tutorials/Localization/Assets/Textディレクトリに移動し、fi-FI と es-ES ロケールの PO ファイルをインポートします。
Kanzi Studio は各 PO ファイルで指定されたロケールを作成し、PO ファイルからの翻訳をローカライゼーションテーブルに追加します。Kanzi はローカライゼーションテーブルを使用して、ローカライズされたテキストリソースと、どのロケールがどのプロジェクトリソースを使用するかに関する情報を保存します。
Library > Localization でローカライゼーションテーブルをダブルクリックして開き、ローカライゼーションテーブル内のリソースを確認します。
（オプション） Kanzi Studio のロケールをプレビューするには、Node Tree で Screen ノードを選択し、Properties で Locale プロパティを Preview に表示したいロケールに設定します。
ロケールを変更するトリガーを作成する¶
Kanzi アプリケーションのロケールを変更するには、Screen ノードの Locale プロパティの値を設定します。このセクションでは、コントロールを作成し、トリガーを使用してアプリケーションのロケールを変更します。また、選択されたロケールをハイライトする選択バーも作成します。
ロケール選択トグルボタンのためのプレハブを作成する
Prefabs で、
をクリックし、Toggle Button 2D を選択して、LocaleButton と名付けます。Toggle Button 2D プレハブで、Text Block 2D ノードを作成します。Toggle Button 2D ノードでトリガーを使用してロケールを設定し、Text Block 2D ノードでアプリケーションインターフェースにロケールの名前を表示します。
LocaleButton プレハブを選択し、Properties で Horizontal Alignment プロパティを追加し、Stretch に設定します。
この方法で、ロケールボタンを親 Stack Layout 2D ノード LocaleSelector の幅に広げることができます。このセクションの後半で、LocaleButton プレハブをインスタンス化することによってロケールボタンを作成します。
Prefabs で、LocaleButton > Text Block 2D ノードを選択し、Properties で追加して設定します。
Horizontal Margin プロパティ Left プロパティフィールドを30に設定
Horizontal Margin プロパティ Right プロパティフィールドを30に設定します。
Vertical Margin プロパティ Top プロパティフィールドを10に設定します。
Vertical Margin プロパティ Bottom プロパティフィールドを10に設定
アプリケーションインターフェースでロケールボタンを配置するために、Text Block 2D ノードのマージンを設定します。
LocaleButton > Text Block 2D ノードを選択し、Text プロパティの隣にある Properties で、
をクリックします。Publish Property ダイアログで、プロパティに Localization.LocaleName と名前を付け、OK をクリックします。これにより、プレハブの各インスタンスに異なるテキストを表示できます。
をクリックすると、Kanzi Studio はそのプロパティからカスタムプロパティを作成し、それをそのプレハブのルートノードに追加し、そのプレハブのルートノード内のプロパティに ##Templateバインディングを作成します。このようにして、プレハブインスタンスのルートに、Text Block 2D ノードに表示させたいテキストを設定できます。
ノードプレハブは、それぞれが独自のプロパティを持つノードのツリーを含むことができます。プロジェクト内でプレハブまたはそのインスタンスのいずれかのノードを編集すると、そのプレハブのすべてのインスタンスでそれらのノードが変更されます。プレハブのプロパティ値をオーバーライドすることで、プレハブの各インスタンスに独自のプロパティ値を持たせることができます。例えば、住所録エントリのプレハブを作成する際には、各住所録エントリに異なる名前、番号、写真を表示したいと考えます。
Prefabs から、LocaleButton プレハブをロケールごとに 1 つずつ、計 3 つ、Node Tree の RootNode > IVI Grid > Locales > LocaleSelector ノードにドラッグします。
Node Tree で、LocaleSelector ノード内の LocaleButton プレハブの各インスタンスを選択し、F2 を押して、そのボタンが設定するロケールにちなんで各ノードに名前を付けます。
アプリケーションを設定して、ユーザーが LocaleButton プレハブの最初のインスタンスを切り替えたときにロケールを変更します。
LocaleSelector ノードの Node Tree で、LocaleButton プレハブの最初のインスタンスを選択します。Properties で Localization.LocaleName プロパティを追加し、その値をこのプレハブのインスタンスが表すロケールに設定します。
ここに入力するロケール名のテキストは、Kanzi アプリケーションに表示されます。
例えば、デフォルトのロケールには値を English に設定します。
Node Components で、Alt を押しながら右クリック Triggers を選択し、Message Trigger > Toggle Button > Toggled On を選択します。
Node Components > Triggers で、Alt を押しながら右クリック Toggle Button: Toggled On トリガーを使用し、Set Property を選択します。Set Property アクションセットで:
Target Item から Screen へ
Target Property から Locale へ
Value From から Fixed value へ
このボタンで設定したいロケールに Fixed Value を設定します。例えば、デフォルトのロケールに設定する場合、このケースでは English、Invariant Language (Invariant Country) () の値を選択します。
ユーザーがボタンをクリックすると、Set Property アクションは Screen ノードの Locale プロパティを、ここで選択したロケールに設定します。
前のステップを LocaleButton プレハブの他の2つのインスタンスに対して繰り返します。
Finnish ロケールの場合:
Localization.LocaleName プロパティを suomi に設定します。
Set Property アクションの Toggle Button: Toggled On トリガーで、Fixed Value を Finnish (Finland) (fi-FI) に設定します。
Spanish ロケールの場合:
Localization.LocaleName プロパティを español に設定します。
Set Property アクションの Toggle Button: Toggled On トリガーで、Fixed Value を Spanish (Spain) (es-ES) に設定します。
ヒント
複数のノードで同じトリガーを作成する必要がある場合、そのトリガーをコピーすることができます。
トリガーをノードにコピーするには:
Node Tree で、コピーしたいトリガーを持つノードを選択します。Node Components で、トリガーを右クリックし、Copy を選択します。
Node Tree で、トリガーをコピーしたいノードを選択します。Node Components で、Triggers を右クリックし、Paste を選択します。
選択されたロケールを表示する選択バーを作成します:
LocaleButton プレハブの Prefabs で、Empty Node 2D ノードを作成し、それに SelectionBar という名前を付け、Properties で追加して設定します。
Background Brush から Color Brush へ
Layout Width から5まで
Layout Height から70まで
Prefabs で、LocaleButton プレハブを選択します。Properties で、State Manager プロパティを追加し、LanguageSelected に設定します。
ロケール間を切り替えるときに、選択バーの表示を制御するためにステートマネージャーを使用します。
Node Tree で、English ロケールを設定する LocaleButton プレハブのインスタンスを選択します。Properties で、Toggle State プロパティを追加し、それを1に設定します。
この方法で、アプリケーションを開始するときに English ロケールボタンがデフォルトで選択されます。
Preview でロケール名をクリックすると、Kanzi Studio はアプリケーション内のテキストをそのロケールに変更し、選択されたボタンの左側に選択バーを表示します。
各ロケールに異なるテクスチャを使用する¶
アプリケーションには、各ロケールごとに異なる画像を使用するようにローカライズするテクスチャが含まれています。
画像をローカライズするには：
Assets で、Import Assets をクリックし、
<KanziWorkspace>/Tutorials/Localization/Assets/Imagesディレクトリに移動して、すべての画像をプロジェクトにインポートします。
Node Tree の RootNode > IVI Grid > LocationInformation で、Image ノードを右クリックし、Add Resources to a Localization Table を選択します。
選択したノードとそのツリーにのみリソースをローカライゼーションテーブルに追加するには、ノードを右クリックして Add Resources to a Localization Table を選択します。Kanzi Studio は、そのノードツリーで使用されているリソースのみを Add Resources to a Localization Table ウィンドウに表示します。
Add Resources to a Localization Table ウィンドウで：
Localization Table を Localization Table に設定します。
このチュートリアルのこのステップで以前に作成した同じローカライゼーションテーブルを選択してください。
を選択して、選択したノードのテクスチャリソースを表示します。Image を選択します。
Add をクリックします。
Library > Localization で、Localization Table (Main) ローカライゼーションテーブルをダブルクリックして、Localization Editor でテーブルを開きます。各ロケールの列で、そのロケールに使用したい画像を選択します。
例えば、Spanish ロケールには Image02 を使用し、Finnish ロケールには Image03 を使用します。
ロケールに対してリソースまたは値を選択しない場合、Kanzi はそのロケールのデフォルトのリソースまたは値を使用します。デフォルト値は Default Value 列に記載されています。
Preview でロケール名をクリックすると、Kanzi Studio はアプリケーション内の画像を、そのロケール用に設定した画像に変更します。
