多言語アプリを作成する

[アーティクル]
03/09/2022

この記事では、ローカライズされたエクスペリエンスを備えた多言語アプリを作成する方法について説明します。この方法では、キャンバスアプリコンポーネントを使用し、統一された数式の構文を使用して、アプリで翻訳を利用することができます。

重要

この記事で説明する方法では、パブリックプレビューにあるキャンバスアプリのコンポーネントを使用します。詳細については、キャンバスアプリ用のコンポーネントを作成するを参照してください

翻訳コンポーネントの作成

多言語アプリを使用する場合、最初のステップは、翻訳用の再利用可能なコンポーネントを作成することです。このコンポーネントには、必要なすべての翻訳の辞書として機能するテーブルを格納します。出力プロパティは、このコンポーネントを使用するアプリを実行しているユーザーの言語に基づいて、この辞書テーブルから出力文字列を提供するために使用されます。

Power Apps にサインインします。
左のペインで、アプリ を選択します。
アプリ で、コンポーネントライブラリ (プレビュー) を選択します。
+ 新規コンポーネントライブラリ (プレビュー) を選択します。
「翻訳コンポーネント」などの名前を入力し、作成を選択して、Power Apps Studio でコンポーネントを開きます。
左側のペインで … を選択して「Component1」の名前を変更し、「翻訳コンポーネント」として 名前の変更 を選択します。
画面右側のプロパティペインから、+ 新しいカスタムプロパティ を選択します。
次のプロパティ値を設定します:

プロパティ名値

表示名です言語

件名言語

内容テキストを翻訳する言語。

プロパティの種類入力

データの種類テキスト
値が変更されたときに OnReset を実行する チェックボックスを選択します。
作成を選択します。

注意

この入力プロパティは、ログインしたユーザーの現在のロケール ID (LCID) を受け取ります。
画面右側のプロパティペインから、+ 新しいカスタムプロパティ を選択します。
次のプロパティ値を設定します:

プロパティ名値

表示名ですラベル

件名ラベル

内容翻訳されたラベル。

プロパティの種類出力

データの種類記録
作成を選択します。

注意

この出力プロパティは、入力ロケール ID に基づいて翻訳されたラベルを公開します。
画面の左上で、プロパティの一覧のドロップダウンを選択し、コンポーネントの OnReset プロパティを選択します。
OnReset プロパティの数式バーに次の数式をコピーして貼り付ます。
```
Set(
 varTranslations,
 Table(
         {
             Language: "en-us",
             Labels: {
                 Title: "UI Tips for building canvas apps",
                 JobTitle: "Power Platform Specialist"
             }
         },
         {
             Language: "pt-br",
             Labels: {
                 Title: "Dicas de UI para construir canvas apps",
                 JobTitle: "Especialista de Power Platform"
             }
         }
     )
    )
```
式では Set() 関数を使用して、さまざまな言語のラベルを辞書として持つテーブルを作成します。このテーブルを翻訳の辞書としてカスタマイズするには、Title、JobTitle、Platform、Close、Open、Cancel などのコントロール名を変更します。ビジネス要件に応じて、コントロール名の翻訳を追加または削除できます。

テーブルには、アプリがサポートする各言語のエントリも含まれている必要があります。各エントリには、アプリで使用可能なすべてのボタン、入力、ラベルの翻訳コンテンツを含む Labels プロパティがあります。
画面の左上で、プロパティの一覧のドロップダウンを選択し、コンポーネントの Labels プロパティを選択します。
次の数式をコピーして、Labels プロパティの数式バーに貼り付けます。
```
   LookUp(
    varTranslations,
    Language = Lower(
        Coalesce(
            Self.Language,
            Language()
        )
    )).Labels
```
この式では、Lookup() 関数を使用して、入力 Language に基づいた適切な翻訳入力を検索します。言語が設定されていない場合、式では、現在のユーザーの言語を Coalesce 関数のフィルターとして使用します。
ファイル -> セーブ を選択して、コンポーネントライブラリを保存します。
公開を選択し、コンポーネントライブラリを公開します。

ヒント

コンポーネントライブラリの作成、保存、公開の詳細については、サンプルコンポーネントライブラリを作成するを参照してください

プロパティ名	値
表示名です	言語
件名	言語
内容	テキストを翻訳する言語。
プロパティの種類	入力
データの種類	テキスト

プロパティ名	値
表示名です	ラベル
件名	ラベル
内容	翻訳されたラベル。
プロパティの種類	出力
データの種類	記録

翻訳コンポーネントライブラリは、使用するために作成、保存、および公開されます。

アプリでの翻訳コンポーネントの使用

以前は、再利用のために翻訳コンポーネントライブラリを作成していました。このセクションでは、翻訳コンポーネントライブラリを使用するアプリを作成し、選択した言語に基づいた言語翻訳のデモを行います。

電話レイアウト付きの空白のキャンバスアプリを作成することから始めます。
画面の左側にある + (挿入) を選択します。
画面の左下で、その他のコンポーネントを入手する を選択します。
翻訳コンポーネント を選択します。

注意

以前に作成したコンポーネントライブラリを別の名前で保存した場合は、名前が異なることがあります。
インポート を選択します。
画面の左側にある + (挿入) を選択します。
ライブラリコンポーネント で 翻訳コンポーネント を選択し、このアプリにコンポーネントを追加します。
画面の左側にあるツリービューを選択します。
翻訳コンポーネントを選択します。
画面の左上で、プロパティの一覧のドロップダウンを選択し、コンポーネントの Visible プロパティを選択します。
Visible プロパティの値を false に設定し、コンポーネントをアプリで非表示にします。
コントロールの一覧の入力で、切り替え を選択します。
画面の左上で、プロパティの一覧のドロップダウンを選択し、コンポーネントの OnChange プロパティを選択します。
切り替えコントロールの OnCheck プロパティに対する式を、次のように更新します。
```
    Set(varLanguage,"pt-br")
```
この式では、切り替えにより、ポルトガル語 (ブラジル) 言語コードに対して、関数 Set() を使用し、varLanguage という変数を "pt-br" の値に設定します。
切り替えコントロールの OnUncheck プロパティに対する式を、次のように更新します。
```
    Set(varLanguage,"en-us")
```
この式では、切り替えにより、英語 (米国) 言語コードに対して、関数 Set() を使用し、varLanguage という変数を "en-us" の値に設定します。
画面の左側にある翻訳コンポーネントを選択します。
画面の左上で、プロパティの一覧のドロップダウンを選択し、コンポーネントの Language プロパティを選択します。
Language プロパティの式の値を varLanguage に設定します。変数 varLanguage は、前に構成された切り替えによって決まります。切り替えをチェックすると、言語は "pt-br" に設定されます。チェックを外すと、言語は "en-us" に設定されます。
画面の左側にある + (挿入) を選択します。
テキストラベル を選択します。
プロパティペインを使用して画面の右側からラベルコントロール名を Title に更新します。
もう一度 テキストラベル を選択して、もう 1 つラベルを追加します。
ラベルコントロール名を JobTitle に更新します。
切り替えコントロールの下に Title と JobTitle のラベルを設定し、両方のラベルが表示されるようにします。
画面の左上から Title と JobTitle のラベルに対して Text プロパティを次のように設定します。

Label 式

敬称 'Translation component_1'.Labels.Title

JobTitle 'Translation component_1'.Labels.JobTitle

注意

異なる場合は、この式の中の 'Translation component_1' をアプリのコンポーネントの名前に置き換えます。

同様に、前に作成したコンポーネントで定義されているさまざまなラベルとプロパティを使用して、より多くのプロパティ値を渡すことができます。たとえば、Title や JobTitle に加えて、Description あるいは Instructions などのプロパティを、翻訳されたテキストを含むコンポーネントライブラリに作成することができます。次に、それぞれのラベルで 'Translation component_1'.Labels.Description または 'Translation component_1'.Labels.Instructions などのプロパティを使用します。
ファイル -> 保存を選択し、アプリの名前を更新してから、保存を選択して、アプリを保存します。詳細: アプリの保存と公開

Label	式
敬称	`'Translation component_1'.Labels.Title`
JobTitle	`'Translation component_1'.Labels.JobTitle`

言語翻訳でアプリをテスト

これで、アプリは翻訳コンポーネントを使用しています。 Power Apps に移動し、実行するアプリを選択します。

切り替えを選択すると、ラベルの言語がポルトガル語 (ブラジル) に変更されます。チェックを外すと、言語は英語 (米国) に戻ります。

翻訳デモ

この方法により、ビジネス要件に合う翻訳辞書を持つ独自のコンポーネントを作成できるようになりました。次に、コンポーネントを使用して、ビジネスユーザーがさまざまな言語を使用できるようにするキャンバスアプリをさらに作成します。

多言語アプリを作成する

翻訳コンポーネントの作成

アプリでの翻訳コンポーネントの使用

言語翻訳でアプリをテスト

関連項目

フィードバック