OutSystemsで多言語対応をする方法とは？（vol.17）
- 公開日：2023年08月14日（月）
グローバル化の加速や外国人労働者の受け入れ増加などを背景に、昨今ではWebアプリケーションに（社内外の利用を問わず）多言語化対応が求められるようになりました。
OutSystemsでは、アプリケーション開発中に（または開発後であっても）容易に多言語化の設定 及び 言語の表示切り替えを実装することができます。
本ブログ記事では、OutSystemsを用いて日本語で開発したアプリケーションの画面を多国語対応する方法や注意点を解説します。
OutSystemsにおける多言語化の設定方法
まずは、データベースに登録されたコードデータを表示する画面を例に、多言語対応の方法を解説します。
＊画面表示名やラベルなどのテキストはすべて日本語で表記しています。
日本語で表示されている内容は次の項目となります。
① 画面表示名
② 画面タイトル
③ リンク
④ フィードバックメッセージ
⑤ ラベル
⑥ テキストボックス内の説明（プレースホルダー）
⑦ ボタン
⑧ データテーブルのヘッダ項目名
⑨ データベースデータ
このうち、⑨のデータベースデータについては、OutSystems標準機能での翻訳はできません。
データベースデータを翻訳する対応方法については、次章で解説します。
①～⑧の項目について、多言語設定を実現するための手順は次の通りです。
- アプリケーションで利用する「ロケール」を登録する
OutSystemsでは、アプリケーションに設定された「ロケール」単位で翻訳した言語を登録します。
「ロケール」は言語コードという形で管理されており、OutSystemsのデフォルトロケールは英語（言語コード：en-US）です。
今回のように日英対応のアプリケーションを構築する場合は、日本語（言語コード：ja-JP）と、英語の「ロケール」をそれぞれ登録しておく必要があります。
右図が「ロケール」の設定画面です。
言語コードはここで確認することができます。 - 翻訳登録を実施する
翻訳の登録方法は2つあります。
1つ目は、開発ツールに用意されている翻訳エディタを使う方法です。
2つ目は、Excelで翻訳対象データをエクスポートし、編集してインポートする方法です。1つ目の翻訳エディタは下図のツールです。
翻訳エディタ上に、アプリケーション開発時に設定した文言（Original text）が表示されるので、各ロケールで表示させたい翻訳後の文言を赤枠部分に登録していきます。
もう１つの方法は、Excelを使ったエクスポート/インポートの方法です。
下図は日本語表記で実装した画面をエクスポートしたExcelファイルです。
Excelファイルに翻訳対象一覧がエクスポートされるため、翻訳対象の項目に対して、翻訳後の文言を記載していきます。記載完了後、本ファイルをOutSystemsにインポートすることで、一度に翻訳を登録することができます。また、このファイルはアプリケーションに設定されたすべてのロケールが出力されるため、一度にまとめて翻訳登録をする場合はこの方法を利用すると良いでしょう。
注意点としては、インポート時に、ファイルに登録されている内容ですべて上書きされるため、変更箇所以外の修正/削除は行わないように気を付ける必要があります。
さて、いったん下図のように登録（日本語を英語へ変換）してみました。
言語表示を確認してみましょう。
＊未登録の部分（Englishの項目）は言語切り替え時に変更不要のため、空欄としています。
①～⑧の項目が、登録した翻訳（英語）で画面表示されていますね。
言語の切り替え方法については次の章でご説明します。
OutSystemsにおける言語の切替方法
OutSystemsでは、ユーザーセッションに紐づけられているロケールを切り替えることで、言語の切り替えを実現します。
具体的には、リンクやボタン、ドロップボックスなどのウィジェットに対して、「SetCurrentLocale」アクションを設定することで言語切り替え機能を作成することができます。
また、ユーザーセッションに紐づけられているロケールは、「GetCurrentLocale()」ファンクションを利用することで取得できます。ロケールごとに処理を変更する、表示を変えるなどの対応が必要となる場合は、このアクションを使うことになります。
下記の画面では紐づけられているロケールの表示と、ロケールを切り替えるリンクを作成しております。それぞれ作成方法をご紹介します。
【ユーザー設定ロケールの表示方法】
画面上、「現在の言語設定」として表示している言語コードは、Expressionにて、ビルトインファンクションとなっている「GetCurrentLocale()」を利用して表示しております。
【ロケール切り替えリンクの作成】
ロケール切り替えのリンクの作成は、リンクウィジェットの「OnClick」イベントに対してロケールを切り替えるためのクライアントアクションを設定します。クライアントアクションの作成方法は次の通りです。
《ロケール切り替えのクライアントアクション》
- Logicタブに移動して「Client Actions」の「(System)」セクションを展開します。「SetCurrentLocale」クライアントアクションを見つけ、ロジックフローにドラッグします。
- 「SetCurrentLocale」クライアントアクションの「Locale」プロパティに言語コードを入力します。
※言語コードは大文字小文字が厳密に区別されるため、設定する際には間違えないようにしてください。
- 補足：データベースデータの言語切り替え対応について
前章で、データベースデータは翻訳対象とならないと述べましたが、データベースにそれぞれのロケールごとのデータが登録されている場合は、右図のようにロケールによって条件分岐を実施し、データ取得の「Aggregate」を変更することで、画面に出力する情報を切り替えることが可能となります。
＊より詳細な情報は、OutSystemsオンラインヘルプ「アプリを翻訳する」を参照ください。
OutSystemsで多言語対応をする際の注意点
ここまで、多言語対応の方法について解説して参りました。
最後に、多言語対応したアプリケーションを開発/運用する際の注意点について触れておきます。
- ユーザーの初期ロケール設定
OutSystemsのデフォルトの言語コードは「en-US」であり、言語設定はユーザーセッションに紐付けられます。
そのため、ユーザーがログアウトすると、言語コードはデフォルトの言語コード「en-US」に自動的に変更されます。
もし次回ログイン時に、ユーザーが設定した別の言語で画面表示させたい場合は、ユーザーのロケール情報をデータベース等に保持させ、ログイン直後に言語コード切り替えを実施する必要があります。 - アプリケーションのレイアウト設計
日本語のサイズやテキストの長さに合わせてレイアウトが作られていると、他の言語に切り替えた際、文字数の違いによって自動改行や表示領域の重複等が発生し、レイアウトが崩れる場合があります。
多言語対応を想定したアプリケーションを開発する際には次のような考慮が必要となります。・ボタンの大きさに余裕を持たせる
・項目間の余白を多めにとる
・表示領域に対して文字列が長すぎる場合は、文字列の一部のみを表示させ、全体を確認するためのツールチップ等を使う
・他言語の省略形などを用いて、日本語と同程度の文字列の長さに整える - 言語切り替え機能の配置場所/デザイン
今回説明に用いたサンプル画面では、画面内にリンクを作成しておりましたが、メニューバー等は画面切り替え前後で常に表示させる、ユーザーがわかりやすい場所に表示させることが重要です。また、言語切り替えの機能であることを直観的に理解できるようなデザインにすることも心がけるとよいでしょう。
まとめ
本ブログ記事では、OutSystemsにおける多言語対応の方法と注意点を解説して参りました。
OutSystemsで作成したアプリケーションは開発後も容易に多言語対応が可能なので、まずは日本語でアプリケーションを作成し、その後にグローバル展開を検討するといった対応が可能です。
なお、多言語対応にあたっては、翻訳だけでなく、UIや運用等の検討も一緒に実施する必要があります。
弊社は、OutSystemsの導入/活用を支援する様々なサービスメニューだけでなく、OutSystemsを用いた開発において、最適なUXの実現を支援可能な「UXデザインセンター」も一緒に対応することが可能です。OutSystemsを用いた開発でお悩みの場合は、是非、弊社電通総研にお声掛けください。
電通総研のOutSystems関連サービスページ：https://itsol.dentsusoken.com/outsystems/service/
本ブログは、2023年7月1日時点の情報をもとに作成しています。
OutSystemsに関する詳しいお問い合わせは、弊社Webサイトからお問い合わせください。
https://itsol.dentsusoken.com/outsystems/inquiry/