OutSystemsにおける多言語アプリの実装

はじめに

OutSystemsで構築するアプリについて、英語など日本語以外でWebページを作成したいが可能か、というご質問をお客様からいただくことがあります。

OutSystemsは多言語対応しており、さまざまな言語でWebページの作成が可能です。本記事では、実際のコードを使用してOutSystemsの多言語の実装方法を説明します。

ただし、多言語対応が可能な項目は、画面に表示する表題や項目名を表すラベルやボタン、OutSystemsがあらかじめ用意しているメッセージなどとなり、実データ（マスタデータやトランザクションデータ）は対応できません。

詳細は以下公式の参考URLをご確認ください。

参考URL：https://success.outsystems.com/ja-jp/documentation/11/building_apps/user_interface/translating_the_app_ui/multilingual_web_applications/

多言語対応した画面の確認

最初に多言語対応した実際の画面を確認しておきます。画面は日本語と英語の２つの言語に対応したものとなっています。

※多言語対応した項目は、図1 従業員一覧（日本語表示）のオレンジ枠部になります。

画面上部にある言語選択コンボボックス（図1 、図2）により言語切り替えができるよう画面を構築しています。

図1 　従業員一覧（日本語表示）

図2　従業員一覧（英語表示）

多言語対応の実装

多言語対応の実装方法を見ていきます。手順は以下（図3）のようになります。

図3　実装手順

1. 画面の作成

最初に画面を作成します。作成にあたっては、OutSystemsの標準機能であるスキャフォールディングを利用します。スキャフォールディングの操作方法がわからない方は以下の記事を参考にしてみてください。

参考記事：超高速開発基盤OutSystemsで従業員管理システムをつくってみた

画面の初期表示時に表示する言語は日本語とします。そのため、画面の生成が完了したら画面名や項目名などを日本語に修正していきます。項目の日本語設定方法は、一覧のヘッダに配置している「従業員氏名」項目を例に見てみましょう。Service StudioのInterfaceタブを選択して、従業員一覧画面を選択して画面を開きます。画面の構成はWidgetTreeで見るとわかりやすいので、WidgetTreeタブを選択してTable > Header Row > （一番上の）Header Cellを選び、Textを “Employee Name” から”従業員氏名”に変更します。（図4）。

図4　画面テキスト項目の編集

他の項目も同じように他のTextWidgetを日本語に修正します。

2. Localeの設定

OutSystemsの多言語対応は、Localeの設定を行います。Dataタブを開いて右ペインの下部にあるMultilingal Localesを右クリックしショートカットメニューを表示させ、”Add Locale”を選択します（図5）。選択後、OutSystemsで対応可能なLocale一覧が表示されます。今回は英語の対応を行いますので、一覧から”en-US”を選択します（図6)。

図5　Dataタブにおける多言語設定メニュー

図6　Locale選択画面

対象Localeを選択すると、次に言語設定を行うための項目一覧「Translations for LocaleTest」が表示されます。この一覧は作成した画面で定義されたWidget、Elementや、メッセージが含まれます。画面で定義されていない項目はこの一覧には現れないので、先に画面を作成する理由はここにあります。なお、この一覧は開発者が行う項目の追加・更新・削除に対応していますので、画面を修正した後でも画面項目のLocale設定、変更を行うことが可能です。

「1.画面の作成」で設定した日本語の値は一覧上の「Original text」に表示されます。英語表記の値は「Translation in en-US」に値をセットします。値をセットすると、以下のLocale設定のようになります（図7）。

図7　Locale設定

なお、このLocale設定、いわゆる翻訳の作業においては、登録内容のExport、および、一括Importの機能もあります。翻訳する単語が多い場合は、Export ＆ Importの機能を使う方が簡単でしょう。

3. 言語切り替え機能の作成

次に言語選択する機能を実装します。今回はコンボボックスで切り替えができるよう設定していきます。言語切り替えを行うためには、切り替える言語を認識するためのデータが必要です。言語切り替え用のデータはStatic Entityとします。

ただし、切り替える言語（中国語やフランス語など）がさらに増える可能性がある場合や、動的に対応する必要がある場合は、切り替える言語データに関しては通常のEntityを使用して管理した方がよいでしょう。

Static Entityを利用した言語切り替えの機能設定内容は以下のようになります（図8）。上記記載のように、通常のEntityで切り替え言語を管理する場合は、以下（図9）の部分においてデータ取得する部分の取得先を該当のEntityに置き換えてお読みください。

図8　Static Entity

次に言語選択を行うためのコンボボックスを画面に配置します。コンボボックスのデータは、言語選択用に作成したStatic Entityをマッピングします（図9）。

図9　コンボボックス

最後にロジックを実装します。コンボボックスのOn changeイベントにClient Actionを紐づけ、紐づけしたClient Actionにロジックを実装します。このときセキュリティの観点からClient Actionに直接データ取得のActionを実装しないようにします（実装した場合、True Changeにワーニングが表示されます）。データは、Server Actionを作成して値を取得します。

それぞれのコードは以下（図10）のようになります。

図10　多言語表示のためのロジック

実装は以上となります。モジュールをPublishして動作を確認すると本記事の最初にあるように画面の多言語対応ができるようになります。

以上がOutSystemsでの多言語対応の方法となります。

最後に

OutSystemsの多言語対応の実装方法を説明いたしました。OutSystemsは、簡単に多言語対応ができることがご理解いただけたのではないでしょうか。本記事が多言語対応のお役に立てれば幸いです。

tdiはローコード開発に力を入れていますので、こちらにお気軽にお問い合わせください。

OutSystems

https://www.tdi.co.jp/outsystems/

ローコード開発基盤「OutSystems」で経営にかなうスピードをシステム開発に。OutSystemsは、豊富な導入、開発、運用・保守の実績と、国内トップクラスのOutSystems資格保有者数を誇るtdiにおまかせください。

tdi ソリューションサイト

 

2 Pockets

※OutSystems® とロゴはOutSystems-Software Em Rede S.A.の登録商標です。