2019/10のReactive Web Appの発表に伴い、従来のWebアプリケーション開発はTraditonal Webに改称されました。
OutSystemsの従来のWebアプリケーション開発では、Reactive Web Appより使いやすい多言語化対応機能が提供されていました。その機能を試してみます。
組み込みのスクリーンテンプレートを使って、言語設定(ロケール)を変更することで、同じスクリーンを英語と日本語で表示します。
なお、Reactive Web App版は以前Qiitaに書きました。
OutSystemsのReactive Web Appで多言語化対応する
サンプル
Forgeコンポーネント：https://www.outsystems.com/forge/component-overview/7064/housesoftsampletraditional
Multilingual Screenを参照してください。
環境
Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.14)
概要
Traditional Webにおける多言語機能は、
- eSpaceにロケールを追加する
- 翻訳可能なリソースに翻訳後の文言を設定する(ダイアログとExcelインポート/エクスポートの方法があります)
- 実行時に使用するロケールを設定するActionを呼ぶ
で実現します。
事前準備
翻訳対象となる画面を用意しておきます。
新しいWeb ScreenをDirectory Listテンプレートを使って作成し、Multilingualという名前を付けました。
またスクリーンショットが見やすいように、Table Recordsの表示件数を3に減らしてあります。
赤い枠を付けた部分を翻訳対象とします。
eSpaceのロケール
多言語の対応をしたい場合は、Service Studioで、eSpaceに翻訳先ロケール(言語と地域の組み合わせ)を追加します。
Data > Multilingual Localesを右クリックし、Add Localeを選択します。
ロケールを選択するダイアログが表示されるので、「ja-JP - Japanese (Japan)」を追加します。
翻訳後の文言を設定
この機能で翻訳可能な要素は以下になります。Entityから取得してくる情報は対象外で別途自分で翻訳を実装することになりますね。
- テキスト
- タイトル
- ラベル(Button, Process, Process Activity)
- Instruction(Human Activity)
- リンク
- Special List(Combo Box)
- メッセージ
- リテラル(EscapeしてなければJavaScriptも)
- 画像(画像は別途用意する)
- Static Entity(設定必要)
追加した「ja - JP」のロケールを右クリックし、Edit Translations...を選択してください。
これで、指定したロケールの場合の翻訳語の文言を設定するダイアログが表示されます。
Translation in の後のダイアログで翻訳文言を設定したいロケールが選択されていることを確認してください。
翻訳文言は、真ん中のテーブルで設定します。
Text列に表示される文言は、Service StudioでWidgetに設定したものです。実行時にロケールが設定されないときのデフォルト表示になります。
Location列で、翻訳したいテキストが実際にどこに配置されているかを確認できます(どの画面に配置されているか、画面内のWidget Treeのどこにあるかなど)。
翻訳文言を設定したい行では、Translation in の列に翻訳後の文言を設定します。このとき、Behavior列をTranslateにしないと、翻訳が機能しません。
なお、翻訳担当者が別にいる場合、Excelとして設定をエクスポートし、設定済みのExcelファイルをインポートする機能もあります。
ロジックの設定
画面のActions Placeholder内にロケール切り替え用のボタンを配置します。
Screen Actionは以下のように実装しました。
SetCurrentLocaleは今リクエストを受け付けているユーザーのセッションのロケールを切り替えるActionです。ロケールを切り替えることによって、画面上ではそのロケールに設定しておいた翻訳文言が表示される仕組み。(System)モジュールから参照を追加してください。
ボタンをクリックするたびに、デフォルトロケール(ロケール="")と日本語("ja-JP")を切り替えるようにしています。GetCurrentLocaleは現在のセッションのロケールを取得。組み込みFunctionなので参照は不要。
なお、ロケールとして設定する値は、Service StudioでMultilingual Localesに追加した設定の先頭部分(「ja-JP - Japanese (Japan)」なら「ja-JP」)です。
実行例
