MoreBeerMorePower

Power Platform中心だけど、ノーコード/ローコード系を書いてます。

モデル駆動型アプリのカスタムページでお手軽多言語対応

For non-Japanese readers : https://mofumofupower.hatenablog.com/entry/localize_custompage_en

キャンバスアプリで多言語対応のアプリを作成する場合、その多くは各言語用のテキストを収めた静的データ (Excelテーブルのインポートなど) を利用し、キャンバスアプリのLanguage()関数により得られるブラウザ/OSの設定言語でLookUpするような仕組みになります。

Localize sample apps (contains video) - Power Apps | Microsoft Docs

または、MicrosoftTranslatorのコネクターを利用して自動翻訳ということも可能ですが、毎回アプリ利用時にAPIを実行する必要があります。(通信が発生する分、静的データの方法より少しラグがあります)

一方でモデル駆動型アプリでは、キャンバスアプリと異なり翻訳ファイルをソリューションに追加し、モデル駆動型アプリの個人用言語設定に基づいて翻訳されたテキストが自動で読み込まれます。

モデル駆動型アプリのローカライズ可能なテキストの変換 - Power Apps | Microsoft Docs

今回はキャンバスとモデル駆動型の中間にあたるような、モデル駆動型アプリのカスタムページにおける多言語対応に関する、新しい機能を紹介します。

カスタムページへの翻訳リソース追加

ずばり、カスタムページの多言語対応にはRESX Webリソースを利用します。

RESX Webリソースは、平たく言えばXMLファイルです。その中にキーとローカライズされたテキストが含まれています。

Power Appsのカスタムページの多言語対応では、このリソースを読み込んで、各コントロールに割り当てることで、あとはユーザーの言語設定を自動で読み込んで対応する言語のテキストを表示してくれます。

f:id:mofumofu_dance:20220112165134p:plain
カスタムページの多言語対応の設定概要

設定方法

例として2つの言語 - 英語と日本語- に対応させることを考えます。

以下のような2つのXMLファイル (拡張子は.resx)を用意します。

LocSample.1033.resx

<root>
    <data name="label1">
        <value>Hello</value>
    </data>
    <data name="label2">
        <value>This is a text for Label2</value>
    </data>
</root>

LocSample.1041.resx

<root>
    <data name="label1">
        <value>こんにちは</value>
    </data>
    <data name="label2">
        <value>これはLabel2用のテキストです</value>
    </data>
</root>

Power Appsのモデル駆動型アプリでカスタムページの新規作成/編集をモダンデザイナーで行います。

左側のメニューに「リソース (Resources)」のタブがあるので、ここをクリック。ここが新しい機能です。

リソースの追加ボタンを押します。

f:id:mofumofu_dance:20220112165634p:plain

ソリューションの中にあるリソース一覧が表示されます。今回は新規でリソースのアップロードを行います。

アップロード時の注意点ですが、表示名は言語によらず1つにしておいてください。あとでこの名前でPower Appsから参照を行います。

また、"名前" は 必ず テキスト.言語コード.resx という形式にしてください。こうしておかないとPower Appsで読み込みできなくなります。

f:id:mofumofu_dance:20220112170252p:plain
RESX Webリソースの追加

2つのファイルのアップロードが終わったら、Studioで利用している方の言語のリソースをチェックして、Power Appsに追加します。

すると最初のリソース一覧に今登録した"LocSample"というリソースが追加されました。

f:id:mofumofu_dance:20220112170852p:plain

Power Apps からのリソース読み込み

リソースの追加が完了したら、あとはラベルやテキストインプットなどで リソース名.キー名 で読み込むだけです。

f:id:mofumofu_dance:20220112171155p:plain
ラベルに翻訳リソースを適用する

これだけで実行時に個人用設定を反映して翻訳リソースが表示されます。If文やLanguage関数を利用する必要はありませんし、OS/ブラウザー言語を利用しないので、モデル駆動型アプリ側と整合的に翻訳を提供できます。

f:id:mofumofu_dance:20220112171408p:plain
日本語での実行時

まとめ

今回はモデル駆動型アプリのカスタムページで多言語対応を容易に実現してくれる新機能をご紹介しました。

これまでキャンバスで行っていたようなちょっと複雑な言語対応ではなく、リソースを追加するだけで多言語対応ができる、しかもモデル駆動型アプリ側の設定を参照するという点で非常に優れた機能だと思います。

もし複数の言語対応が必要だという場合には、この方法で対応してみてください。

Docsは公開されたらURLを追記します。