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

制御範囲の決めかた

IM-BloomMakerでは、デザイン編集画面で追加したエレメントに次のような画面制御を設定できます。ここではこの設定を、末端エレメントに設定するか、複数のエレメントのまとまり（便宜上、グループエレメントと言います）で設定するかの制御範囲についてルールの一例を紹介します。

  • アクション：ボタンのクリックなどによるアクション実行
  • 表示／非表示：状態に応じたエレメントの表示・非表示の切り替え

ルールが必要な理由​

ルールを決めておかないと、あとになって制御設定を末端エレメントにしたのかグループエレメントにしたのかが、わからずに探す手間が発生したり、誤って2重に設定したりすることが考えられます。特に共同開発をする場合は、開発効率のためにルールを決めておくことをおすすめします。

ここでは、マスタメンテナンステンプレートでの制御設定を例に、制御範囲の決めかたについての一例を紹介します。あくまで一例のため、このルールを強制するものではありません。ルールはプロジェクトやチームの方針に合わせて調整してください。

備考
このページに掲載している画面は2024 Autumn（Jasmine）環境のものです。お使いのバージョンによっては外観や内容が異なる場合があります。

サンプル資材​

このページでは、Accel Studioの業務テンプレートにあるマスタメンテナンステンプレートで作成できる資材を例に説明しています。

備考

上記資材の内容を確認するには以下の手順で操作します。

サイトマップ＞Accel Studio＞アプリケーション作成＞業務テンプレート一覧の画面で、ベーステンプレートにあるマスタメンテナンスから作成すると、Accel Studio＞アプリケーション管理＞アプリケーション一覧＞自動生成されたアプリケーションに資材が表示されます。

基本ルール​

  • 原則、末端エレメントに設定する
    • ただし、グループエレメントに設定したほうがよい場合もあるため、例外を決めておく
      例：グループ単位で、クリックイベントや表示／非表示を処理したいなど
  • プロジェクト内で制御範囲の設定ルールを定め、一貫性を保つ
  • 制御設定の変更や追加を容易にし、デバッグのしやすさを考慮する

アクション​

アクションは、基本的に末端エレメントに設定します。

テキスト入力要素やボタン要素などのユーザが操作できる末端エレメントには、クリックやキーボードイベントを設定でき、グループエレメントではクリックイベントのみを設定できます。このためほとんどの場合、末端エレメントに設定することになります。

アクションは、各エレメントのイベントプロパティ内で紐づけることができます。

  • 末端エレメントの例：ボタン要素のクリックイベント、テキスト入力要素のキーボードイベントの制御など
  • グループエレメントの例：関連する項目群をまとめてクリックイベントで制御

末端エレメントのボタン要素にクリックイベントを設定する場合の例です。

注意

誤った設定の例として、上図の場合にボタン要素と親エレメントのボタンの両方に同じ内容のクリックイベントを設定してしまうと、ボタンのクリック時に同じアクションが2度実行されます。

多重設定を防ぐため、原則は末端エレメントにアクションを設定することにし、例外がある場合はそのルールを明確にしておくことをおすすめします。

表示／非表示​

表示制御は、ユーザビリティとメンテナンス性を考慮して、適切なエレメントに設定します。制御範囲に迷ったときは、まずは末端エレメントに設定することをおすすめします。

表示制御は、各エレメントの共通プロパティ内の表示/非表示で設定します。

  • 末端エレメントの例：権限に応じたボタンの表示制御、ステータスに応じた項目の活性／非活性など
  • グループエレメントの例：関連する項目群をまとめて表示／非表示、タブや画面種別に応じた画面の切り替えなど

画面種別に応じた画面切り替えの例​

備考

上図の論理式の$input.__mode__には、テンプレートの前処理で画面種別が代入されます。

ヒント