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

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

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

注意

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

参考

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

画面変数を設定する​

エディタを表示する​

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

  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. ［決定］をクリックします。
値の型と設定の詳細
代入したい情報の種別に合わせてデータ型を設定します。設定の詳細は、各タブを選択して確認してください。
文字列は、テキストや1行/複数行の文字列を扱う型です。（例："abc", "東京", "123"）
  • 代入値
    • データなし：初期値を設定せず空の値として扱う場合
    • 固定文字列：テキストボックスに固定値を直接入力
    • 定数・入力・多言語・環境から（変数のみ表示）：
      あらかじめ設定した画面変数を使用したい場合
  • 入力規則（変数のみ表示）
    • 必須：入力規則を必須にする場合
    • 最小の長さ：最小の文字列長（文字数や桁数）を指定
    • 最大の長さ：最大の文字列長を指定
    • 最小の文字数：全角・半角の文字数の下限を指定
    • 最大の文字数：全角・半角の文字数の上限を指定
    • 最小のバイト数：データのバイト数の下限を指定
    • 最大のバイト数：データのバイト数の上限を指定
    • フォーマット指定：判定したい形式を選択肢から選ぶ

フォーマット指定で選択できる形式は、以下のとおりです。詳細は、「スクリプト開発モデル プログラミングガイド - バリデーションルール リファレンス」を参照してください。

形式説明参照先
数値形式整数や小数など、数字のみを確認します。「numeric」
アルファベット＋数値形式英字と数字の組み合わせのみを確認します。「alphanumeric」
ID形式intra-mart標準のID形式かを確認します。合致しない場合は、設定したエラーメッセージが表示されます。「id」
ユーザコード形式intra-mart標準のユーザコードかを確認します。合致しない場合は、設定したエラーメッセージが表示されます。「userCd」
Eメールアドレス形式正しいEメールアドレスのフォーマットかを確認します。合致しない場合は、設定したエラーメッセージが表示されます。「email」
URL形式正しいURLのフォーマットかを確認します。合致しない場合は、設定したエラーメッセージが表示されます。「url」
電話番号形式数字, -（ハイフン）, +（プラス）, *（アスタリスク）, #（シャープ）のみかを確認します。
郵便番号形式英数字と-（ハイフン）のみかを確認します。
選択候補のみ「値の選択候補」に入力された固定値または変数値かを確認します。「isIn」
正規表現にマッチする形式正規表現パターンに合致する文字列かを確認します。合致しない場合は、設定したエラーメッセージが表示されます。「regex」
参考

入力規則の「長さ」「文字数」「バイト数」の使い分けについて、詳細は「CookBook - IM-BloomMaker 変数の入力規則、どう使い分ければいいの？」を参照してください。

参考

変数の場合、代入値に「定数・入力・多言語・環境から」という項目が表示されます。環境情報変数は、システム側であらかじめ用意されているため、そのまま利用できます。一方で、定数・入力変数・多言語変数は、それぞれ設定した後に利用できます。各操作手順は、下記を参照してください。

コラム

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

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

画面で複数の値をまとめて管理したい場合や、一覧表示や繰り返し処理で扱うデータを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レスポンスの単一オブジェクトなどに活用できます。

マップ型の例：

最上位のキー employee に、従業員情報を表すオブジェクトが紐づいています。その中には、以下の項目が含まれています。

  • name：氏名
  • age：年齢
  • dept：所属部署
{
  "employee": {
    "name": "山田",
    "age": 30,
    "dept": "営業"
  }
}
マップを設定する​

ここでは、最上位のキーとして"employee"を例に設定します。

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

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

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

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

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

マップ型＋配列型の例：

最上位のキー employees に、従業員情報の配列が紐づいています。配列の中には複数のオブジェクトが格納されており、それぞれが1人分の従業員情報を表します。

各オブジェクトには、以下の項目が含まれています。

  • name：氏名
  • skills：保有スキル（文字列の配列）
{
  "employees": [
    {
      "name": "山田",
      "skills": ["Java", "SQL"]
    },
    {
      "name": "佐藤",
      "skills": ["JavaScript", "HTML"]
    }
  ]
}

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

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

ここでは、最上位のキーとして"employees"を例に設定します。

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

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

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

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

  1. 親となる変数を選択します。
  2. ［ ］をクリックします。
    └ 「変数エディタ」ダイアログが表示されます。
  3. 「キー名」にわかりやすい名称を入力します。
    └ 使用できる文字は、以下のとおりです。
    　　【半角英数字】　A B C D E... a b c d e... 1 2 3 4 5...
    　　【半角記号】　- _
  4. 「値の型」の［ ］をクリックして、型を選択します。
    └ 詳細は上記「値の型と設定の詳細」を参照してください。
  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. 変数を利用したいエレメントを選択します。
    └ 選択したエレメントのプロパティ設定が右側に表示されます。
  2. ［変数値］を選択します。
    └ 変数の入力フォームに切り替わります。
  3. 変数の入力フォーム内にある［ ］をクリックします。
    └ 「変数・定数・入力・多言語・環境セレクタ」ダイアログが表示されます。
  1. 画面変数の種類を選択します。
    └ クリックすると、表示が切り替わります。
  2. 設定したい変数を選択します。
  3. ［決定］をクリックします。
    └ デザイナ画面に戻ります。
参考

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

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

応用操作を確認する​

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

変数の代入値に環境情報変数を利用する​

変数の場合、代入値に環境情報変数も利用することが可能です。環境情報変数とは、システムが自動的に生成・管理する変数です。

  1. 「定数・入力・多言語・環境から」にチェックを入れます。
  2. ［ ］をクリックします。
    └ 「定数・入力・多言語・環境セレクタ」ダイアログが表示されます。
  3. ［環境］をクリックします。
  1. 該当する環境情報変数を選択します。
  2. ［決定］をクリックします。
    └ 「定数・入力・多言語・環境セレクタ」ダイアログが閉じます。
  3. ［決定］をクリックします。
    └ 「変数エディタ」ダイアログが閉じます。
コラム

変数の場合は、環境情報変数以外にも、定数・入力変数・多言語変数を代入値として利用できます。画面変数を一通り設定した後、「定数・入力・多言語・環境セレクタ」ダイアログに表示されます。下記「画面変数の設定を確認する」を参照し、必要な画面変数を設定してください。

画面変数の設定を確認する​

変数・定数・入力変数の設定​

変数・定数・入力変数の設定方法は、上記以外にも用意されています。目的に応じて、次のいずれかの操作を行ってください。

多言語変数の設定​

1つのアプリケーションを日本語以外の言語に切り替えて利用する場合は、多言語変数を設定します。目的に応じて、次のいずれかの操作を行ってください。

環境情報変数の確認​

環境情報変数の表示方法および種類と用途について確認できます。