メインコンテンツまでスキップ

画面変数の設定 - 基本操作

ここでは、画面変数（変数・定数・入力変数）の設定に関する基本的な操作について説明します。

注意

変数・定数・入力変数の各設定では操作項目に大きな違いはありませんが、変数設定のみ、定数・入力・多言語・環境から代入値を選択できます。ここでは、変数設定の画面を例に、操作手順を説明します。なお、説明の中では便宜上、変数・定数・入力変数をまとめて「変数」と表記している箇所があります。

参考

設定に進む前に、画面変数の概要を確認したい場合は、「画面変数と環境情報の設定」を参照してください。

画面変数を設定する​

エディタを表示する​

画面変数（変数・定数・入力変数）を設定するため、「エディタ」ダイアログを表示します。

  1. ［変数］タブをクリックします。
  2. ［ ］をクリックします。
    └ 変数選択メニューが表示されます。
  1. 設定したい変数名をクリックします。
    └ ［変数］［定数］［入力］のいずれかを選択します。
  2. ［ ］をクリックします。
    └ 選択した変数の「エディタ」ダイアログが表示されます。

変数・定数・入力変数を設定する​

IM-BloomMakerでは、画面変数に「キー」を使って識別・管理します。キーは、変数を特定する一意の識別子の役割を果たします。これにより、同じ画面やフロー内で変数名が重複しても区別でき、意図しない値の上書きを防ぐことができます。

さらに、キーを設定することで次のようなメリットがあります。

  • 再利用性の向上：
    キーを使えば、他の画面やフローでも同じ変数を参照でき、処理の共通化がしやすくなります。
  • 可読性と管理のしやすさ：
    キーを見れば変数の用途がわかるため、複雑なフローでも管理しやすくなります。
  • 安全な値の保持：
    他の変数と混同されず、安全に値を保持できます。

また、画面変数の設定は、用途とデータ型によって異なります。

単純値・個別フィールドへの変数設定​

画面で扱うデータを1つの値として管理したい場合や、画面上の特定の入力フィールドに直接値を設定・取得したい場合は、プリミティブ型（文字列、数値、真偽値、日付・日時など）と呼ばれるデータ型を設定します。

  1. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  2. 「値の型」の［ ］をクリックします。
    └ 値の型が一覧で表示されます。
  1. 該当する型をクリックします。
    └ 変数に代入する値の種類を設定します。
  2. ［決定］をクリックします。
値の型と設定の詳細​

「値の型」には、代入したい情報の種別に合わせて、以下のようなデータ型を設定します。

  • 文字列：テキストを扱う型（例："abc", "東京", "123"）
  • 整数：小数点を含まない数値を扱う型（例：100、-5）
  • 浮動小数点数：小数を含む数値を扱う型（例：3.14、-0.01）
  • 高精度小数：精度が重要な小数を扱う型（例：123.456789）
  • 真偽値：trueまたはfalseの二択を扱う型（例：はい、いいえ）
  • 日付・時刻：日付や時刻を扱う型（例：2025-08-25、09:05:00.000、+0900）

設定の詳細は、各タブを選択して確認してください。

コラム

変数・定数・入力変数の配下では、同じキー名の変数を複数設定することはできません（重複するとエラーメッセージが表示されます）。これは、同じキー名の変数が複数存在すると、参照する値が不明になったり、意図せず上書きされたりする恐れがあるためです。

一覧表示や繰り返し処理で扱う変数設定​

画面で複数の値をまとめて管理したい場合や、一覧表示や繰り返し処理で扱うデータを1つの変数として管理したい場合は、配列型の変数を設定します。配列型では、複数のプリミティブ型データ（文字列、数値、真偽値、日付・日時など）を1つのまとまりとして保持でき、一覧データや検索結果、複数レコードの管理などに活用できます。

配列を設定する​

  1. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  2. 「値の型」の［ ］をクリックして、配列の型を選択します。
    └ 詳細は「値の型と設定の詳細」を参照してください。
  3. 「配列の次元数」の［ ］をクリックして、次元数を選択します。
    └ 1次元配列：直線状に並んだ値の集まり
    └ 2次元配列：1次元配列を複数行並べた表形式の配列
    └ 3次元配列：2次元配列を複数まとめた立体的な配列
  1. 「配列の要素数」を入力します。
    └ (0)：1次元配列では、配列内の値の数を入力
    └ (0)×(0)：2次元配列では、行数×列数を入力
    └ (0)×(0)×(0)：3次元配列では、ブロック数×行数×列数を入力
  2. 「代入値」から「配列」を選択します。
    └ 「定数・入力・多言語・環境から」は変数のみ表示されます。
  3. ［決定］をクリックします。
配列の代入値を設定する​

  1. 編集したい値の［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  2. 「代入値」を設定します。
    └ 配列の型によって表示される入力項目が異なります。
    └ 詳細は「値の型と設定の詳細」を参照してください。
    └ 「定数・入力・多言語・環境から」は変数のみ表示されます。
  3. ［決定］をクリックします。
配列の次元数と要素数

複数の値をまとめて扱う配列は、次元数によってデータ構造が変わります。同じ種類の値を並べた1次元配列、表（行と列）のように扱うことが可能な2次元配列、複数の表をまとめたような3次元配列という形式があります。また、要素数は、配列の次元数と用途に応じて設定します。詳細は、以下の「（例）配列の次元数と要素数の設定」を参照してください。

（例）配列の次元数と要素数の設定

(1) 1次元配列の場合

値の型次元数要素数代入値配列の構造例
文字列1次元配列3

0<文字列>：東京
1<文字列>：大阪
2<文字列>：名古屋

["東京", "大阪", "名古屋"]
整数1次元配列5

0<整数>：1
1<整数>：2
2<整数>：3
3<整数>：4
4<整数>：5

[1, 2, 3, 4, 5]

(2) 2次元配列の場合

値の型次元数要素数代入値配列の構造例
文字列2次元配列2×2

0＜配列＞：
└ 0＜文字列＞：東京
└ 1＜文字列＞：大阪
1＜配列＞：
└ 0＜文字列＞：名古屋
└ 1＜文字列＞：福岡

[
  ["東京", "大阪"],
  ["名古屋", "福岡"]
]
整数2次元配列2×3

0＜配列＞：
└ 0＜整数＞：1
└ 1＜整数＞：2
└ 2＜整数＞：3
1＜配列＞：
└ 0＜整数＞：4
└ 1＜整数＞：5
└ 2＜整数＞：6

[
  [1, 2, 3],
  [4, 5, 6]
]

(3) 3次元配列の場合

値の型次元数要素数代入値配列の構造例
文字列3次元配列1×2×2

0＜配列＞：
└ 0＜配列＞：
  └ 0＜文字列＞：東京
  └ 1＜文字列＞：大阪
└ 1＜配列＞：
  └ 0＜文字列＞：名古屋
  └ 1＜文字列＞：福岡

[
  [
    ["東京", "大阪"],
    ["名古屋", "福岡"]
  ]
]
整数3次元配列1×2×3

0＜配列＞：
└ 0＜配列＞：
  └ 0＜整数＞：1
  └ 1＜整数＞：2
  └ 2＜整数＞：3
└ 1＜配列＞：
  └ 0＜整数＞：4
  └ 1＜整数＞：5
  └ 2＜整数＞：6

[
  [
    [1, 2, 3],
    [4, 5, 6]
  ]
]
コラム

配列について理解を深めるために、「CookBook - IM-BloomMaker 繰り返しエレメントでの変数の使い方」もあわせて参照してください。IM-BloomMakerの繰り返しエレメントを用いて、1次元配列、2次元配列、3次元配列の設定方法について、具体例を交えて説明しています。

複数の要素をまとめて扱う変数設定​

画面で扱う複数の値を1つのまとまりとして管理したい場合や、複数のフィールドの値をまとめて設定・取得したい場合は、マップ型と呼ばれるデータ型を設定します。マップ型では、キーと値の組み合わせでデータを管理できるため、フォームデータやAPIレスポンスの単一オブジェクトなどに活用できます。

マップ型の例： {"name":"山田", "age":30, "dept":"営業"}

マップを設定する​

  1. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  1. 「値の型」の［ ］をクリックして、［マップ］を選択します。
  2. ［決定］をクリックします。
マップの代入値を設定する​

ここでは、マップの代入値として"{"dept":"営業"}を例に設定します。

  1. 親となる変数を選択した状態で、［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  2. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  1. 「値の型」の［ ］をクリックして、型を選択します。
    └ 詳細は「値の型と設定の詳細」を参照してください。
  2. 代入値を設定します。
    └ 「値の型」によって入力方法が異なります。
    └ 「定数・入力・多言語・環境から」は変数のみ表示されます。
  3. ［決定］をクリックします。

複数のデータ構造を組み合わせて扱う変数設定​

画面で扱うデータが複雑な構造を持つ場合には、マップ型と配列型を組み合わせて変数を設定します。 マップ型のキーと値の組み合わせの中に配列型を含めたり、配列の要素としてマップ型を持たせたりすることで、階層的なデータを表現できます。

マップ型＋配列型の例： [{"name":"山田","skills":["Java","SQL"]}, {"name":"佐藤","skills":["JavaScript","HTML"]}]

設定方法にはさまざまな組み合わせがありますが、ここではマップ型に配列型を組み合わせる手順について説明します。

親要素にマップを設定する​

  1. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  2. 「値の型」の［ ］をクリックして、［マップ］を選択します。
  1. 「代入値」で「マップ」を選択します。
  2. ［決定］をクリックします。
子要素にマップを設定する​

ここでは、マップ型の値として{"name":"山田"}を例に設定します。

  1. 親となる変数を選択した状態で、［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  2. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  1. 「値の型」の［ ］をクリックして、型を選択します。
    └ 詳細は「値の型と設定の詳細」を参照してください。
    └ 「定数・入力・多言語・環境から」は変数のみ表示されます。
  2. 代入値を設定します。
    └ 「値の型」によって入力方法が異なります。
  3. ［決定］をクリックします。
子要素にマップ＋配列を設定する​

ここでは、マップ型と配列を組み合わせた値として{"skills":["Java","SQL"]}を例に設定します。

  1. 親となる変数を選択した状態で、［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  2. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  3. 「値の型」の［ ］をクリックして、型を選択します。
    └ 詳細は「値の型と設定の詳細」を参照してください。
  1. 「配列の次元数」の［ ］をクリックして、次元数を選択します。
    └ 1次元配列：直線状に並んだ値の集まり
    └ 2次元配列：1次元配列を複数行並べた表形式の配列
    └ 3次元配列：2次元配列を複数まとめた立体的な配列
  2. 「配列の要素数」を入力します。
    └ (0)：1次元配列では、配列内の値の数を入力
    └ (0)×(0)：2次元配列では、行数×列数を入力
    └ (0)×(0)×(0)：3次元配列では、ブロック数×行数×列数を入力
  3. ［決定］をクリックします。
孫要素に配列の代入値を設定する​

ここでは、配列の代入値として["Java","SQL"]を例に設定します。

  1. 編集したい値の［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  2. 「代入値」を設定します。
    └ 配列の型によって表示される入力項目が異なります。
    └ 「定数・入力・多言語・環境から」は変数のみ表示されます。
    └ 詳細は「値の型と設定の詳細」を参照してください。
  3. ［決定］をクリックします。
参考

マップ型と配列型を組み合わせた変数設定について、詳細は「ローコード開発チュートリアルガイド - 5.2.4.3. 変数の設定」を参照してください。

次のステップへ：アクション設定

画面変数の設定が終了したら、次はアクション設定に進みましょう。「アクション設定」では、画面に連動するアクションの基本的な設定方法を説明しています。なお、エレメントのプロパティで変数値を使用したい場合は、アクション設定に進む前にあらかじめ置き換えておくことをおすすめします。詳細は「画面レイアウトとデザイン調整 > エレメント固有プロパティの設定」を参照してください。

応用操作を確認したい​

画面変数の設定では、用途に応じて、次のような応用操作が可能です。基本的な操作に慣れてきたら、応用操作も確認してみましょう。

変数・定数・入力変数

(1) IM-Repositoryのデータ定義を利用する
　└ データ定義を呼び出し、変数・定数・入力変数として設定
(2) Accel Studioの共通定数を利用する
　└ 共通定数定義を呼び出し、画面の定数に利用
(3) 変数構造を並び替える
　└ オブジェクト配下にデータを配置し、親子関係を表現
(4) 画面変数を複製する
　└ 作成した変数・定数・入力変数を指定した位置に複製
(5) JSON形式でデータ型を定義する
　└ 複雑な構造を効率よく設定
(6) 画面変数を削除する
　└ 設定した値を個別または一括で削除可能

多言語変数

(1) 多言語変数を設定する
　└ 多言語変数の基本的な設定方法
(2) Accel Studioの多言語メッセージを利用する
　└ 多言語メッセージ定義を呼び出し、画面の多言語変数に利用
(3) CSVファイルを利用する
　└ CSVファイルのインポート・エクスポート機能による一括設定

参考

応用操作の詳しい手順は、「画面変数の設定 - 応用操作」を参照してください。