2018年に行われた開発者向けのOutSystemsイベント、ODC(OutSystems Developer Conference)にモバイルアプリケーションで多言語対応をする方法の解説が出ていました。
Multiple Languages and Mobile Apps
この動画に紹介されていた方法を試して見たので、メモをしておきます。
動作確認環境
Platform Version：11.0.212.0
Service Studio Version：11.0.537.0
Multilingual Mobile Component：2.0.1
Mobile Translations：1.0.1
Table of Contents
Webでの多言語との違い
Webアプリケーションにおける多言語対応については、OutSystemsのプラットフォームに機能が組み込まれています。
(実現方法は、このシリーズの以前の記事を参照してください)
それに対して、モバイルアプリケーションでは、プラットフォーム組み込みの方法では多言語対応ができず、Forgeのコンポーネントを利用することになります。
また、多言語対応できる要素も限られていて、Text Widgetと、ExpressionにおけるTextリテラルのみです。
さらに、多言語対応したい要素については、自分でAttributesやFunction呼び出しによって明示的に指定する必要があります。
設定方法の概要
テスト対象として、Screen TemplateのAccount Portalで作成した画面を利用します。
Forgeコンポーネントのインストールと参照追加
Multilingual Mobile Component：部品本体です
Mobile Translations：Multilingual Mobile Componentが必要とする設定を便利に行うためのアプリケーション。必須ではありません
テスト対象モバイルアプリケーションに、MultiLingual Mobile Componentへの参照を追加します(Manage DependenciesのダイアログはショートカットキーCtrl+Qで開きます)。
Mobile Translationsの準備
Mobile Translationsアプリケーションを使った方が設定が楽です。
初期設定をしておきます。
①多言語対応をするモバイルアプリケーションを、ダイアログから選択しておきます(選択済みのアプリケーションは下に一覧表示される)
②モバイルアプリケーションで対応させる言語を選択する画面へのリンク。ja-JP(日本語)を設定しておきます。
③Resource一覧へのリンク。下の設定はこの画面で行うので事前に開いておきます。
多言語対応する要素に設定を行う
Text Widgetに設定する場合
以下の「Available」というText Widgetを多言語対応させます。
多言語対応させるには、Text WidgetsのAttributesにdata-transというPropertyをValueが一意となるように設定する必要があります。一意にするにはGUIDの利用が考えられますが、Mobile Translationsにはこのための支援機能があります。
Resource一覧画面(「Mobile Translationsの準備」③の手順で開きます)を開いたら、Show translations forのコンボボックスが翻訳対象のロケールになっていることを確認。
続いて画面右上の「＋」アイコンで新しい変換対象を追加するダイアログを開きます。Keyに自動で新しいGUIDが設定されています。
Add as Text Widgetをクリックすると、クリップボードにKeyに表示されているGUIDがコピーされるため、Text Widgetに以下のようにdata-transプロパティとして設定してください(開き直してからスクリーンショットとったのでGUIDは変わってしまっています)。
Expressionに設定する場合
以下のようなExpression WidgetのValue部分を多言語対応にしてみます。
(“Welcome back, “の部分を日本語に変換する設定)
まずは、Mobile Translationsアプリケーションで、Resource追加ダイアログを再び開き、今度はDefault Valueに、変換対象文字列を設定します。この状態でAdd As Expressionをクリックすると、対象文字列を多言語変換した結果を取得するFunction呼び出しがクリップボードにコピーされます。
対象のExpressionのValueに以下のように設定します(+の前の部分がクリップボードから設定したもの)。
GetTranslation("772d243a-1ec8-4d30-8ed5-c30a1a05c0e7", "Welcome back, ") + GetAccountById.List.Current.Sample_Employee.FirstName
翻訳文言を設定する
Add as …で追加したResourceは一覧で管理されているため、この一覧をExcel形式でダウンロードし、翻訳担当者に渡し、結果をExcel結果でアップロードします。
ここでは、数が少ないので開発者が自分で翻訳することにします。
Resource一覧画面右上のアイコンの左から2番目がExcelとしてダウンロード、1番左が結果をアップロードするボタンになっています。
Excelファイルは以下のような形式。該当GUIDがKey列に設定されている行の、変換対象ロケール(ja-JP)列に、日本語の文字列を設定してアップロードしてください。
設定完了後JSONファイルをダウンロードします。上の3つのアイコンの左から3番目です。
このJSONファイルをService StudioのData>Resourcesを右クリック→Import Resourceで指定してください。これでアプリケーションに設定のJSONファイルが保持されます。デフォルトではサーバにファイルが配置されないため、ParameterのDeploy ActionをDeploy To Target Directoryに設定する必要があります。
JSONファイルをアプリケーション開始時にロードし、ユーザごとにロケールを設定する機能を実装すれば準備完了です。
アプリケーション開始時に処理を行うためには、Logic>Client Actionsを右クリックし、Add System Event→On Application Readyでイベントハンドラを用意してください。
イベントハンドラ内には、Multilingual/AddTranslationsFromResource Client Actionを配置。Input Parameterには、Resourcesに配置したJSONファイルのRuntime Pathの値を文字列として設定します。
動作確認
テスト用にロケール変更ボタン(SetLocale Actionで変更できます。日本語に変更するときは、パラメータに”ja-JP”を設定してください）を配置してあります。左がデフォルト表示、右が日本語に変更したときの表示。
なお、今回の手順ではResourcesを使っているために、オンラインであることが必要です。
オフラインで動く方法のサポートもあるので別の機会にまとめてみます。