OutSystemsのReactive Web Appで多言語化対応する
2021/5/12追記:正式な多言語対応機能の発表に伴い、下記Forgeコンポーネントは2021/6/5でdiscontinuedになります。今後は正式な多言語機能の方を使ったほうがいいです。
2019/10に追加されたReactive Web Appでは、これまでのWebアプリケーション(Traditional Web)にあったMultilingual Localesによる多言語対応機能が使えません。
OutSystemsのProduct DesignerによるForumの投稿によると、やがて対応されそうですが、少なくとも2019/11/2時点では未対応です。
Regarding multilingual, you are right, this is similar to mobile. We might improve this in the future.
モバイルでも同様の問題があって、モバイルアプリケーションを多言語化対応させるForgeコンポーネントが作られています。最近、そのコンポーネントがバReactive Web Appでも使えるようになったので動作確認してみます。
以前ブログの方に書いた以下の記事は、モバイルアプリケーション対象で同じコンポーネントを用いて多言語化対応する手順を確認しています。
複数言語対応(3)モバイル
サンプル
Forgeコンポーネント:https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7086
Multilingual Screenを参照してください。
環境
Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.6)
Multilingual Component(Version 2.0.3)
Multilingual Component
ForgeのVersionsの記述によると、Version2.0.2から、Reactive Web Appに対応したとのこと。
モジュールの種類が、新たに作成されたLibraryになっています。
よってこのモジュールはこれまでのモバイルからだけでなく、Reactive Web Appからも参照できることになります。
参照追加もしておきます。Manage Dependenciesから、MultiLingualの全要素を選択しておきます。
テスト画面用意
「Bulk Actions」Screen Templateを使ってScreenを用意します。
Screen Templateをベースに作った画面はテキストが全部英語です。これを日本語に変換できるようにします。ロケールを日本語と英語で切り替えるため、画面上にSwitch Widgetを配置しておきます。
翻訳データを用意する
データはJSONで用意。
翻訳先のロケールごとに翻訳データをオブジェクトにし、その配列として作成します。
localeプロパティに翻訳先のロケール、translationsには、キーに対する翻訳後の文言をオブジェクトとして設定。キーはアプリケーション内で一意でなければいけません。
[
{
"locale": "ja-JP",
"isRightToLeft": false,
"translations": {
"A001": "製品リスト",
"A002": "選択した製品を削除",
"A003": "製品を追加",
"A004": "名前",
"A005": "カテゴリー",
"A006": "価格",
"A007": "最大在庫",
"A008": "在庫閾値"
}
}
]
これを.jsonファイルにし、Resourcesに配置します。
Deploy ActionをDeploy to Target Directoryに。
翻訳処理を追加
まずはResourceをロード
翻訳Functionを呼び出す前にMultiLingual Componentに含まれるAddTranslatinonsFromResourceを呼び出しておきます。
翻訳処理はScreen内で呼び出すので、確実にScreen処理より早く動くタイミングにします。
ここでは、Client Actionsを右クリック => Add System EventからOnApplicationReadyのイベントハンドラーを作成し、その中にAddTranslationsFromResourceを配置することにします。
このActionはResourceに翻訳データ(JSONファイル)があることを前提に、そのパスをResourceUrlに要求します。
配置したResourceのJSONファイルのRuntime Pathをコピーして設定すればいいですね。
Screenに翻訳処理を設定
翻訳処理は、Functionとして定義されています。
翻訳処理を行いたい場所に、MultiLingualのGetTranslation呼び出しを設定してください。
Function呼び出しなのでText WidgetはExpression WidgetにConvertしてから。
GetTranslationの第一引数は、用意しておいた翻訳データのキーを指定。第二引数はデフォルト文言。該当なしの場合にこの値が返ってきます。デフォルトロケール用の文言を設定しておくといいと思います。
ロケール設定
画面に追加したスイッチがオンになったとき、ロケールを日本語(ja-JP)にします。
Switch WidgetのOn Change Eventに以下のScreen Actionを設定しておきます。
これで、スイッチがオンになったら日本語、オフになったらデフォルトロケールに。
SetLocaleに渡しているInput Paramete:
If(BooleanVar, "ja-JP", "")
切り替えたあと、新しいロケールで翻訳文言を再取得するため、同じ画面を開き直しています(Destination)。
そこで、画面のOn Initialize Event(画面遷移直前に発生するイベント)でMultiLingualのGetLocaleで現在のロケールを判定してスイッチを適切に設定しないといけません。
動作確認
スイッチをオンにした状態。
Screen Templateで固定テキストだった部分を翻訳対応してあります。
Author And Source
この問題について(OutSystemsのReactive Web Appで多言語化対応する), 我々は、より多くの情報をここで見つけました https://qiita.com/jyunji_watanabe/items/9c666e7883fa73e0a11f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .