ステップ1 - 右から左へのロケール用にアプリケーションを準備する¶
このチュートリアルのこのステップでは、すでにローカライズされたアプリケーションを右から左へのロケールに対応させる方法を学びます。次のステップでは、レイアウトを設定し、選択されたロケールに基づいて正しいプレハブをインスタンス化するために Kanzi Engine APIを使用します。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Localization RTL チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Localization RTL/Assetsディレクトリ内のチュートリアルアセット：Fontsディレクトリには、Arabic と Hebrew のグリフを含むフォントが含まれています。Imagesディレクトリには、右から左へのロケールで使用する画像が含まれています。Textディレクトリには、開始点プロジェクトの翻訳されたテキストコンテンツを含む po ファイルが含まれています。
<KanziWorkspace>/Tutorials/Localization RTL/Completedディレクトリ内の完成済みチュートリアル。
開始プロジェクトの内容¶
このチュートリアルの開始地点は、<KanziWorkspace>/Tutorials/Localization/Completed/Tool_project/Localization.kzproj Kanzi Studio プロジェクトです。
スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。
Grid Layout 2D ノード名 IVI Grid は、アプリケーションのユーザーインターフェース要素を配置します。右から左へのロケールにレイアウトを調整する際、IVI Grid のグリッドレイアウトは、要素を絶対位置を保ちながら行と列の間でスムーズに移動させることができます。
Grid Layout 2D ノード名 LocationInformation は、アプリケーションコンテンツを含み、配置します。
Grid Layout 2D ノード名 Apps は、アプリケーションユーザーインターフェースの下部に表示されるアプリケーション名を含み、配置します。
Toggle Button Group 2D ノードの名前が Locales で、ロケールを変更するためのボタンノードを含んでいます。
Kanzi Studio で作成されたロケール用のボタンを含む Stack Layout 2D ノードは、LocaleSelector と名付けられています。
Toggle Button 2D プレハブの名前 LocaleButton は、Kanzi Studio で作成された各ロケールボタンインスタンスと、Kanzi Engine API を使用してロードされた追加のロケールを表します。
左から右および右から左のレイアウト用のプレハブを作成する¶
このセクションでは、LocaleSelector ノードと IVI Grid ノードからプレハブを作成します。LocaleSelector プレハブを使用してロケールボタンを配置し、IVI Grid プレハブを使用して選択されたロケールに適したレイアウトを設定します。次のステップでは、これらのプレハブを変更して、左から右または右から左のロケールに対してアプリケーションのユーザーインターフェース要素を正しく配置するようにします。
左から右および右から左のレイアウト用のプレハブを作成するには:
Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。Localization チュートリアルの横にある Open をクリックし、Completed project を選択します。
このチュートリアルの開始地点は、
<KanziWorkspace>/Tutorials/Localization/Completed/Tool_project/Localization.kzprojKanzi Studio プロジェクトです。LocaleSelector ノードをプレハブとして準備し、ロケールボタンを配置します。
Node Tree > IVI Grid > Locales から LocaleSelector ノードを Prefabs にドラッグしてプレハブを作成します。
ノードを Prefabs ウィンドウにドロップすると、Kanzi Studio はそのノードからプレハブテンプレートを作成し、元のノードをプレハブのインスタンスに置き換えます。
Node Tree > IVI Grid > Locales で LocaleSelector ノードを削除します。
Node Tree で Screen を選択し、Dictionaries で LocaleSelector エイリアスを削除します。
このエイリアスはもう必要ありません。なぜなら、各ロケールのレイアウトを設定するために Kanzi Engine API を使用するからです。
左から右および右から左のロケールレイアウト用のプレハブを作成します。
Node Tree から IVI Grid ノードを Prefabs にドラッグし、IVI Grid LeftToRight と名付けます。
IVI Grid LeftToRight プレハブを左から右へのロケールに使用します。
Prefabs で IVI Grid LeftToRight ノードを選択し、Ctrl D を押してノードを複製し、IVI Grid RightToLeft に名前を変更します。
右から左へのロケールには、IVI Grid RightToLeft プレハブを使用します。
Node Tree > RootPage で IVI Grid ノードを削除します。
Node Tree Alt を押しながら右クリック の中で RootPage を作成し、Prefab View 2D ノードを作成して、IVI Grid と名付けます。
ロケール用の IVI Grid LeftToRight および IVI Grid RightToLeft プレハブをインスタンス化するために、Prefab View 2D ノードを使用します。
IVI Grid Prefab View 2D ノードを選択し、Properties で Prefab Template プロパティを追加して IVI Grid LeftToRight に設定します。
プレハブを Prefab View ノードでインスタンス化すると、Kanzi は Prefab Template プロパティの値を読み取り、そのプロパティが指すプレハブを Prefab View ノードの子ノードとして追加します。
Prefabs で、LocaleSelector プレハブを IVI Grid LeftToRight > Locales ノードにドラッグして、プレハブプレースホルダを作成します。
LocaleSelector プレハブプレースホルダを使用して、左から右および右から左のロケール用に LocaleSelector をインスタンス化します。
前のステップを IVI Grid RightToLeft ノードに対して繰り返し、LocaleSelector ノードのプレハブプレースホルダを作成します。
Preview でロケールボタンをクリックしても、まだロケール間の切り替えは見られません。このチュートリアルの最後のステップでアプリケーションを実行すると、ロケールの切り替えが確認できます。
右から左へのロケール用の po ファイルをインポートします。¶
このセクションでは、Arabic および Hebrew ロケールの翻訳されたテキストを含む po ファイルをインポートします。
右から左へのロケール用のpoファイルをインポートするには:
Library > Localization で、Localization Table (Main) ローカライゼーションテーブルを右クリックし、Import Localization Table Manually を選択して、
<KanziWorkspace>/Tutorials/Localization RTL/Assets/Textに移動し、Arabic と Hebrew ロケールのテキスト文字列を含むar-AR.poとhe-HE.poファイルをインポートします。Kanzi Studio は、poファイルで指定されたロケールを作成し、poファイルからの翻訳をローカライゼーションテーブルに追加します。
Library > Localization で Localization Table (Main) をダブルクリックし、Localization Editor で LocaleDisplayName を設定します。
Arabic に العربية を入力します。
Hebrew にעבריתを入力します。
LocaleDisplayName は、アプリケーションユーザーインターフェースに表示されるロケール名を設定するテキストリソースです。
右から左へのロケールで使用される画像を設定します¶
このセクションでは、右から左へのロケールで使用されるアプリケーションの背景画像用のテクスチャブラシを作成し、それらのロケールで使用する画像を設定します。
右から左へのロケールで使用される画像を設定するには:
Assets で Import Assets をクリックし、
<KanziWorkspace>/Tutorials/Localization RTL/Assets/Imagesからすべての画像をインポートします。Arabic および Hebrew ロケールで使用する画像と、右から左へのロケール用のアプリケーション背景画像をインポートします。画像をインポートすると、Kanzi Studio はインポートされた画像からテクスチャを作成します。
Library > Materials and Textures Alt を押しながら右クリック Brushes で、Texture Brush を選択し、Background RightToLeft と名付けます。
Library で Background RightToLeft ブラシを選択し、Properties で Brush Texture を Background RightToLeft テクスチャに設定します。
Prefabs で IVI Grid RightToLeft プレハブを選択し、Properties で Background Brush を Background RightToLeft に設定します。
Background RightToLeft バックグラウンドブラシは、右から左へのロケール用にアプリケーションの背景画像を設定します。
Localization Editor で、Arabic ロケールの Image を Image07 に、Hebrew を Image08 に設定します。
アプリケーションユーザーインターフェースで表示される画像を、Arabic と Hebrew のロケールに設定します。
右から左へのロケール用のスタイルを作成する¶
このセクションでは、Arabic および Hebrew のグリフを含むフォントをインポートし、それらのロケールに対してフォントとテキストの配置を設定するスタイルを作成します。
右から左へのロケール用のスタイルを作成するには:
File > Import > Import Fonts を選択し、Browse をクリックして、
<KanziWorkspace>/Tutorials/Localization RTL/Assets/Fontsディレクトリに移動し、Arabic と Hebrew のグリフを含むフォントをインポートします。Arabic には notonaskharabic-regular.ttf を使用します。
Hebrew には notosanshebrew-regular.ttf を使用します。
使用するフォントが、アプリケーション内のテキストに必要なグリフを備えていることを確認してください。FreeType フォントエンジンを使用する場合は、Unicode の書記体系ごとにフォールバック用のフォントファミリーを設定できます。フォントフォールバックの使用 を参照してください。
Library > Styles で LocaleStyle を選択し、Ctrl D を2回押して2回複製し、各スタイルを使用するロケールにちなんでスタイルに名前を付けます。
たとえば、スタイルに名前を付けます:
Arabic ロケールのための LocaleStyle-ar
Hebrew ロケールのための LocaleStyle-he
LocaleStyle-ar を選択し、Properties に追加して設定します。
Font Family から Noto Naskh Arabic へ
Text Concept > Text Horizontal Alignment から Right へ
このスタイルを Arabic ロケールに使用して、正しいフォントとテキストの配置を設定します。
前のステップを LocaleStyle-he に対して繰り返し、Font Family プロパティを Noto Sans Hebrew に設定します。
Localization Table の各ロケールの列で作成したスタイルを適用したい場所に、LocaleStyle セルをダブルクリックして設定します。
Arabic を LocaleStyle-ar に設定します。
Hebrew を LocaleStyle-he に設定します。
