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

画面変数の編集

ここでは、作成済みの画面変数を後から編集する方法について説明します。

IM-BloomMakerにおける変数の仕組みと注意点​

画面変数を編集する際には、IM-BloomMakerにおける変数の仕組みと、その利用上の注意点を理解しておくことが大切です。

変数の双方向バインディング​

IM-BloomMakerでは、画面のエレメントと変数を自動的に同期する「双方向バインディング」を採用しています。

  • ユーザの操作により、画面のエレメントの状態が変化すると、その値が自動的に変数に反映されます。
  • 変数の値を変更すると、紐づいたエレメントの表示や状態が自動的に更新されます。
  • アクション内で変数を更新すると、その結果がエレメントに即時反映されます。

この仕組みにより、変数とエレメントは常に同じ値を共有するため、どちらかを操作するともう一方も即時に更新されます。その結果、追加の同期処理を書く必要がなくなり、開発効率が向上し、保守性も高まります。

参考

変数の双方向バインディングの挙動について、実際にサンプル画面を操作することでさらに理解を深めることができます。詳細は「IM-BloomMaker チュートリアルガイド - 6.2. 変数の双方向バインディング」を参照してください。

具体的な適用例​

(1) ユーザ操作による変数の自動反映​

編集可能なテキスト入力ボックスと表示用のラベルを同じ変数で連動させることで、入力内容が自動で反映されます。

たとえば、登録画面でユーザが情報を入力すると、その入力内容は自動的に変数に反映されます。テキスト入力のエレメントが変数と紐づいているため、変数の値が更新されると、同じ変数に紐づく他の画面部品（例：ラベル）の表示も自動的に更新されます。

(2) 変数を使ったエレメントの表示制御​

画面ごとに同じ変数をもとに、エレメントの表示・編集可否を簡単に切り替えることができます。

たとえば、編集画面では入力フォームを表示して、ユーザが情報を編集できる状態にします。変更内容は、自動的に変数に反映されます。一方、詳細画面ではラベル表示に切り替えて、ユーザが編集できない状態にします。編集可否を切り替えるだけで、コーディングは不要です。

また、条件式と変数を組み合わせるだけで、別のエレメントの状態（表示・非表示、有効・無効）も制御できます。

参考

変数を使ったエレメントの表示制御について、具体的なサンプルは「CookBook - IM-BloomMaker で作成した画面で、入力項目の値によってエレメントの表示・非表示を切り替える方法」を参照してください。

IM-BloomMakerにおける特殊型の扱いと自動変換​

JSON編集時のデータ型変換​

IM-BloomMakerでは、JSONエディタに入力する値の内容によって、変数の型が自動的に判定・変換されます。つまり、入力した値の表記方法（ダブルクォーテーション""の有無、true / false、[ ] や { } など）によって、変数や項目の型が自動的に決まる仕組みです。

たとえば、元のデータ型が整数と設定されていても、JSONエディタでの編集によって、データ型が変換されます。

  • 元のデータ型：100（整数）→ JSON編集："100"（ダブルクォーテーション有り）→ 文字列に変換
  • 元のデータ型：100（整数）→ JSON編集： 100（ダブルクォーテーション無し）→ 整数のまま変換されない

また、元のデータ型がそれぞれ異なるものが設定されていても、JSONエディタでの編集によって、真偽値に変換されることもあります。

  • 元のデータ型："true"/"false"（文字列）→ JSON編集： true/false → 真偽値に変換
  • 元のデータ型：0/1（整数）→ JSON編集： true/false → 真偽値に変換

JSONエディタの編集では、一部の値に関して、意図しないデータ型に変換されることがあります。そのため、JSON形式で編集した後は、必ず正しいデータ型に変換されているかどうかを確認してください。

元のデータ型　　JSONエディタで編集
文字列（""有りで記述）　　　整数（""無しで記述）　　　浮動小数点数（""無しで記述）真偽値（true または falseで""無し）マップ（波括弧 {} で囲み、キーと値のペアを記述）
文字列－文字列→整数
(例："123" → 123)		文字列→浮動小数点数
(例："3.14" → 3.14)		文字列→真偽値
(例："true" → true)		文字列→マップ
整数整数→文字列
(例：123 → "123")		－整数→浮動小数点数
(例：123 → 123.0)		整数→真偽値
(例：0 → false)		整数→マップ
浮動小数点数浮動小数点数→文字列
(例：3.14 → "3.14")　　　　　		－－浮動小数点数→真偽値
(例：0.0 → false)		浮動小数点数→マップ
高精度小数－－－高精度小数→真偽値
(例：0.0 → false)		高精度小数→マップ
真偽値真偽値→文字列
(例：true → "true")		真偽値→整数
(例：true → 1)		真偽値→浮動小数点
(例：true → 1.0)		－真偽値→マップ
日付・時刻－日付・時刻→整数
(例：2025-09-08T10:00 → 1694148000)		日付・時刻→浮動小数点
(例：2025-09-08T10:00 → 1694148000.0)		日付・時刻→真偽値
(例：null → false)		日付・時刻→マップ
マップマップ→文字列マップ→整数マップ→浮動小数点マップ→真偽値－

※ 「－」は元のデータ型から変換されないことを示します。

特殊なデータ型変換​

IM-BloomMakerでは、通常のブラウザでは扱うことができない特殊なデータ型を利用します。そのため、外部サービスのAPIや他のコンテンツとデータをやり取りする際には、一般的に扱うことができる形式へ自動変換されます。

データ型変換ルール一覧

元のデータ型変換方法注意点回避策／利用方法
高精度小数　　　文字列に変換される
  • 割り切れない数（例：1/3）は分数表記になる
  • 受け取り側が分数表記に非対応の場合、正しく受け渡しができない
  • 浮動小数点数型に置き換える
  • ただし精度が低下し、桁落ちが発生する可能性あり
日付・時刻

ISO 8601形式の文字列に変換＋タイムゾーン情報を付与

  • 受け取り側がISO 8601形式に非対応だと受け渡し不可
  • 受け取り側がエポックミリ秒を想定している場合は整数型に変換が必要　　　　　　　　
  • ただしエポックミリ秒にはタイムゾーン情報がなく、環境により時刻がずれる可能性あり
  • IM-LogicDesignerでは imdatetime型を利用
  • date型などタイムゾーン非対応の型を使うと、システムタイムゾーン基準で処理されるため、表示上の日時にずれが生じる場合あり
日付のみ

アカウントコンテキストのタイムゾーンで「0時」として日時が設定される　　　　　
例：日本標準時 (GMT+09:00) 「2022年12月1日」 の場合
2022-12-01T00:00:00+0900

  • 日付入力時に「0時」が付与されるため、実際には日時として扱われる
  • システムや連携先によっては意図しない時刻のずれが発生する可能性あり
  • 外部連携時には、連携元と連携先でログインユーザのアカウントコンテキストのタイムゾーンを統一すること

基本操作​

設定済みの画面変数を編集する場合は、その変数が使用されている箇所を確認しながら修正してください。

  1. ［変数］タブをクリックします。
  2. ［ ］をクリックします。
    └ 左側に「プロパティ」または「使用箇所」が表示されます。
  3. ［使用箇所］タブをクリックします。
    └ 「エレメント」または「アクション」が表示されます。

画面変数の使用箇所を確認する​

「使用箇所」エリアでは、以下の種類の変数が使用されている箇所を確認できます。

  • 変数：画面やフロー内で値が変更される内部変数
  • 定数：固定値として利用される変数
  • 入力変数：ユーザや他の画面から渡される値
  • 多言語変数：画面表示の文言など、多言語対応の値
  • 環境情報変数：システム環境に関する情報を保持する変数

これらの変数を修正する際に、影響を受けるエレメントやアクションを把握することで、想定外の動作やエラーを防ぎ、安全に修正することができます。また、この確認により、不要な変数や未使用の変数を特定することも可能です。

エレメントに使用されている変数を修正する​

  1. 確認したい画面変数の種類を選択します。
    └ ［変数］［定数］［入力］［多言語］［環境］のいずれかを選択します。
  2. 修正したい画面変数を選択します。
  3. ［エレメント］をクリックします。
  4. 確認したいエレメント名を選択します。
    └ コンテナ内の該当するエレメントが選択されます。

  1. ［プロパティ］タブをクリックします。
    └ 選択しているエレメントのプロパティが表示されます。
  2. エレメントで使用されている画面変数の場所や用途を確認します。
  3. 修正したい画面変数の［ ］をクリックします。
    └ 画面変数の種類に応じた「エディタ」ダイアログが表示されます。

  1. 必要に応じて修正を行います。
  2. ［決定］をクリックします。
注意
  • 画面変数にIM-Repositoryのデータ定義を利用している場合、IM-Repository側で定義を変更しても、IM-BloomMakerの画面変数に自動反映されません。［IM-Repository定義の読み込み］をクリックして、最新の内容を手動で取り込んでください。
  • 定数にAccel Studioの共通定数定義を利用している場合、Accel Studio側で定義を変更しても、IM-BloomMakerの定数に自動反映されません。［Accel Studio共通定数の再読み込み］をクリックして、最新の内容を手動で取り込んでください。
  • 変数設定のみ、定数・入力・多言語・環境から代入値を選択できます。

アクションに使用されている変数を修正する​

  1. 確認したい画面変数の種類を選択します。
    └ ［変数］［定数］［入力］［多言語］［環境］のいずれかを選択します。
  2. 修正したい画面変数を選択します。
  3. ［アクション］をクリックします。
  4. 確認したいアクションの［ ］を選択します。
    └ 「アクションエディタ」ダイアログが表示されます。

  1. 修正したい変数が使用されている箇所を確認します。
  2. ［決定］をクリックします。
参考

「使用箇所」タブでは、画面変数だけでなく、アクションが利用されている箇所も確認できます。詳細は「intra-mart Developer Portal - 変数やアクションの使用箇所を知りたい」を参照してください。

JSON形式で画面変数をまとめて編集する​

入力したJSONと同じ構造で、画面変数（変数・定数・入力変数）が自動的に作成されます。

  1. ［ ］をクリックして、変数の種類を選択します。
  2. ［ ］ をクリックします。
    └ 「JSONエディタ」ダイアログが表示されます。
  1. JSONを入力します。
  2. ［決定］をクリックします。
    └ JSON形式で入力した内容が表示されます。
注意

IM-BloomMakerでは、JSONエディタに入力する値の内容によって、変数の型が自動的に判定・変換されます。つまり、入力した値の表記方法（ダブルクォーテーションの有無、true / false、[ ] や など）によって、変数や項目の型が自動的に決まる仕組みです。

ただし、一部の値に関しては、意図しないデータ型に変換されてしまうことがあります。そのため、JSON形式で入力した後は、必ず正しいデータ型に変換されているかどうかを確認してください。詳細は上記「IM-BloomMakerにおける特殊型の扱いと自動変換」を参照してください。