画面の文言を用途に合わせて変数に置き換えたい

公開日: 2024-09-30 / カテゴリ: IM-BloomMaker

この記事では、IM-BloomMakerで画面に表示する文言を、用途に合わせて変数・定数・多言語変数に設定する方法を紹介します。

ボタンやラベルに表示する文言は、画面上に直接設定することもできます。一方、複数の画面で同じ文言を使用する場合や、アプリケーションの規模が大きくなる場合は、文言をまとめて管理すると、変更や修正を行いやすくなります。また、複数の言語に対応する場合は、ユーザのロケールに応じて表示する文言を切り替える必要があります。

ここでは、画面で使用する文言を変数・定数・多言語変数に設定し、用途に合わせて使い分ける方法について説明します。

画面の文言を整理する

アプリケーションの画面には、ボタンやラベル、メッセージ、説明文など、さまざまな文言が表示されます。

たとえば、以下のように分類できます。

  • UIテキスト:ボタン、メニュー、ラベルなど、画面の操作や内容を示す文言
  • メッセージ:ユーザへの通知、警告、エラーなどを伝える文言
  • 説明文:ツールチップやガイドなど、画面や機能の使い方を説明する文言

アプリケーションの規模が大きくなると、同じ文言を複数の画面で使用したり、後から文言を変更したりするケースが増えてきます。そのため、画面に表示する文言を整理し、どの文言を共通化するか、どの文言を変更可能にするか、多言語に対応するかをあらかじめ考えておくことが重要です。

アプリケーション内での用途を考える

通常、画面の文言は、IM-BloomMakerのデザイナ画面でエレメントのプロパティに固定値として設定します。

固定値として設定した文言は、そのエレメントに直接表示できます。一方、文言を変数・定数・多言語変数として設定すると、複数の画面で同じ文言を使用したり、ユーザの入力内容を別の画面に表示したり、ロケールに応じて表示する言語を切り替えたりできます。どの設定を使用するかは、文言の用途に応じて判断します。

用途に合わせて変数を使い分ける

IM-BloomMakerでは、画面で使用する値を変数・定数・多言語変数として設定できます。それぞれの特徴を理解し、文言の用途に合わせて使い分けます。

設定項目   説明
変数
アプリケーションの実行中に値を変更できる値です。ユーザが入力した値など、画面の操作に応じて変化する値を扱う場合に使用します。
定数
アプリケーションの実行中に値を変更しない値です。複数の画面で共通して使用する文言など、常に同じ値を使用する場合に適しています。
多言語変数ロケールごとに異なる値を設定できる値です。ユーザのロケールに応じて表示する文言を切り替える場合に使用します。

画面変数の種類と概要

画面変数の種類と概要について確認できます。画面変数には、変数・定数・多言語変数以外にも、入力変数や環境情報変数があります。

ローコード操作マニュアル - 画面変数と環境情報の設定

それでは、設定項目ごとに具体的な例を見ていきましょう。

Case 1 入力した文言を別の画面に表示したい

変数を使用すると、ある画面で入力した文言を、別の画面に表示できます。ユーザが入力した内容など、アプリケーションの実行中に変化する値を扱う場合に適しています。


IM-BloomMakerでは、以下のように変数を設定します。

  1. 変数を定義する(例:input_text)
  2. Page #1で、エレメントに変数を設定する(例:$variable.input_text)
  3. Page #2で、エレメントに同じ変数を設定する(例:$variable.input_text)

変数の設定方法

画面変数(変数・定数・入力変数)の設定に関する基本的な操作を確認できます。変数を設定した後、変数を利用するエレメントを選択し、プロパティに設定されている値を変数値に変更してください。

ローコード操作マニュアル - 画面変数の設定 - 基本操作

IM-Repositoryから変数をインポートする

変数は、IM-BloomMakerで一つずつ定義するだけでなく、IM-Repositoryの辞書項目やエンティティをインポートして定義することもできます。

ローコード操作マニュアル - 画面変数の設定 - 応用操作 > IM-Repositoryのデータ定義を利用する

Case 2 アプリケーション内で画面の文言を統一したい

定数を使用すると、複数の画面で同じ文言を使用できます。たとえば、複数の画面に同じタイトルや固定のメッセージを表示する場合に適しています。定数はアプリケーションの実行中に値を変更できないため、ユーザの操作によって値が変わらない文言に使用します。


IM-BloomMakerでは、以下のように定数を設定します。

  1. 定数を定義する(例:title)
  2. Page #1で、エレメントに定数を設定する(例:$constant.title)
  3. Page #2で、エレメントに同じ定数を設定する(例:$constant.title)

定数の設定方法

画面変数(変数・定数・入力変数)の設定に関する基本的な操作を確認できます。定数も、変数と同じ手順で設定できます。

ローコード操作マニュアル - 画面変数の設定 - 基本操作

IM-Repositoryから定数をインポートする

IM-Repositoryで定義した列挙型をインポートして、定数として利用することもできます。定数も、変数と同じ手順で設定できます。

ローコード操作マニュアル - 画面変数の設定 - 応用操作 > IM-Repositoryのデータ定義を利用する

Case 3 複数のアプリケーションで文言を統一したい

複数のアプリケーションで同じ文言を使用する場合は、Accel Studioの共通定数を利用できます。共通定数を各アプリケーションに取り込むことで、アプリケーション間で共通の文言を利用できます。


IM-BloomMakerでは、以下のように定数を設定します。

  1. Accel Studioから共通定数を定数としてインポートする(例:sample-1)
  2. Application #1で、エレメントに定数を設定する(例:$constant.sample-1)
  3. Application #2で、エレメントに同じ定数を設定する(例:$constant.sample-1)

Accel Studioから共通定数を利用する

Accel Studioの共通定数は、IM-BloomMakerだけでなく、IM-LogicDesignerの処理でも利用できます。

ローコード操作マニュアル - 画面変数の設定 - 応用操作 > Accel Studioの共通定数を利用する

Case 4 アプリケーション内で複数の言語に切り替えたい

多言語変数を使用すると、ユーザが設定しているロケールに応じて、画面に表示する文言を切り替えることができます。intra-martがサポートしている言語は、日本語(ja)、英語(en)、簡体字中国語(zh-CN)の3言語です。CSVファイルから多言語をインポートすることも可能なので、決められたフォーマットに従って翻訳した文言を準備しておきましょう。


IM-BloomMakerでは、以下のように多言語変数を設定します。

  1. 多言語変数をロケールごとに定義する(例:open_dialog)
  2. Application #1で、エレメントに多言語変数を設定する(例:$i18n.open_dialog)

多言語変数の設定方法

多言語変数の設定に関する基本的な操作を確認できます。多言語変数を設定した後、変数を利用するエレメントを選択し、プロパティに設定されている値を変数値に変更してください。

ローコード操作マニュアル - 画面変数の設定 - 応用操作 > 多言語変数を設定する

多言語をCSVファイルからインポートする

翻訳した言語をCSVファイルからインポートできます。ヘッダ情報の定義や文字コードなどを確認してください。

ローコード操作マニュアル - 画面変数の設定 - 応用操作 > CSVファイルを利用する

Case 5 アプリケーション間で文言を統一し、言語を切り替えたい

複数のアプリケーションで共通の文言を使用し、さらにユーザのロケールに応じて表示する言語を切り替える場合は、Accel Studioの多言語メッセージ定義を利用できます。


IM-BloomMakerでは、以下のように多言語メッセージを設定します。

  1. Accel Studioから取り込みたい多言語メッセージを選択する(例:sample-2)
  2. Application #1で、エレメントに多言語変数を設定する(例:$i18n.sample-2)
  3. Application #2で、エレメントに同じ多言語変数を設定する(例:$i18n.sample-2)

多言語メッセージの設定方法

Accel Studioの多言語メッセージでは、複数のアプリケーションで共通して利用するメッセージを管理できます。IM-BloomMakerに取り込んだ多言語メッセージは、キャプションやメッセージ、条件式などで使用できます。

ローコード操作マニュアル - 画面変数の設定 - 応用操作 > Accel Studioの多言語メッセージを利用する

英語や中国語(簡体字)以外にも対応言語を増やしたい

intra-martがサポートしている英語や中国語(簡体字)以外の言語を追加する場合は、必要なデータを準備し、ロケール情報の追加や画面サイズの調整など、別途カスタマイズが必要になる場合があります。

新たに別の言語を追加する

言語追加ガイドでは、新たに別の言語を追加するための基本的な手順について説明しています。アプリケーションを公開した後の運用・保守も考慮した上で、言語の追加を検討してください。

intra-mart Accel Platform 言語追加ガイド – 2. はじめに

チュートリアル

登録機能および一覧取得機能を持つ簡易的な資産管理アプリケーションを作成しながら、変数・定数・多言語変数を設定する方法について確認してみましょう。

登録画面で利用する値の設定

登録画面では、データのやり取りに利用する「変数」、画面遷移先を指定する「定数」、画面のラベル・メッセージ表示に利用する「多言語変数」を設定します。

ローコードチュートリアル[入門編]- 3.2 画面で利用する値の設定

管理画面で利用する値の設定

管理画面では、データの一覧表示や検索・ソートに利用する「変数」、画面遷移先や検索・ソート条件を指定する「定数」、画面のラベル表示に利用する「多言語変数」を設定します。

ローコードチュートリアル[入門編]- 4.2 画面で利用する値の設定

まとめ

画面に表示する文言は、用途に応じて変数・定数・多言語を使い分けることで、複数の画面やアプリケーションで文言を再利用したり、ユーザのロケールに応じて表示する言語を切り替えたりできます。また、IM-RepositoryやAccel Studioを利用すると、複数の画面やアプリケーションで使用する値を共通化できます。

まずは、画面に表示する文言について「実行中に変化するか」「複数の画面やアプリケーションで共通して使用するか」「多言語に対応するか」という観点から整理し、用途に合った設定を選択してみましょう。

intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。