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

画面デザインの編集

ここでは、作成済みの画面デザインを編集する方法について説明します。

基本操作​

画面デザインを編集する際の基本操作として、画面構成の確認とエレメントの配置・見た目の調整について説明します。

画面構成を確認する​

編集を始める前に、画面上に配置されているエレメントの種類や配置構成を確認しておきましょう。あらかじめ全体像を把握しておくことで、エレメントの追加や変更をスムーズに行うことができます。

［画面構成］タブをクリックすると、エレメントの一覧が表示されます。一覧から対象をクリックすると、該当するエレメントが画面上で緑色の枠で強調表示されます。さらに、一覧は階層構造で表示されているため、配下のエレメントもあわせて確認できます。

その他の操作

エレメントのプロパティ設定にエラー項目がある場合は、 が表示されます。使用箇所を確認して、項目を修正してください。詳細は、下記「プロパティを修正する」を参照してください。

＜エレメントの構成＞​

階層構造を分解して確認すると、次のようにエレメントが配置されていることがわかります。実際に配置してみると、構造がより直感的に理解できます。

たとえば、レイアウトを決める枠として「フレックスコンテナ」を配置します。「フレックスコンテナ」には「フレックスアイテム」という子要素が含まれています。「フレックスアイテム」には、エレメントの基本の幅や並べ方などの指定ができます。

次に、「フレックスアイテム」に「フォーム部品（imds）」の「フィールドグループ」を配置します。「フィールドグループ」には、ラベルを表示する「フィールドラベル」と入力フォームを配置する「フィールドコンテンツ」という子要素が含まれています。「フィールドグループボディ」はこの2つの子要素をグループ化したものです。

最後に、「フィールドコンテンツ」に「フォーム部品（imds）」の「テキスト入力」を配置します。「テキスト入力」には、「テキスト入力要素」と「アイコン」という子要素が含まれています。

エレメントを編集する​

必要に応じてエレメントを編集できます。新しいエレメントを追加する場合は、配置する位置に注意してください。

参考

プロパティを修正する​

プロパティでは、エレメントの見た目に関する調整や表示・動作に関する設定などを行います。プロパティに表示される設定項目は、エレメントの種類によって異なります。

参考

応用操作​

画面デザインの編集には基本的な操作に加えて、次のような応用的な操作も可能です。必要に応じて確認してください。

コンテナページを活用する​

コンテナページとは​

IM-BloomMakerにおけるコンテナページとは、複数のエレメントをまとめて配置・管理するための領域のことを指します。用途ごとにコンテナページを分けることで、画面デザインや機能をブロック単位で整理できます。たとえば、ヘッダ、サイドメニュー、メインコンテンツ、フッタなどを独立したコンテナページとして作成し、複数の画面を1つのコンテンツとして管理することも可能です。

コンテナページ活用の主なメリットは次のとおりです。

  • レイアウト管理がしやすい：
    コンテナページで画面を区切ることで、各要素の配置や位置関係を簡単にコントロールできます。
  • 再利用しやすく、分割設計が簡単：
    共通パーツやレイアウトを複数画面で使う場合、コンテナページ単位で扱うと効率的です。
  • プロパティやイベントの制御がしやすい：
    コンテナページごとにデザイン調整やアクション（イベント）を設定できます。

たとえば、「マスタメンテナンス」テンプレートでは、登録・編集・参照画面を1つのコンテンツ内にまとめて作成しています。類似する要素をコンテナページ単位で定義しておくことで、定数や変数の設定に応じて表示画面を切り替えることができます。

「Header」に着目すると、「Overall」コンテナページ内に「Header」コンテナページを埋め込むエレメントが配置されていることが確認できます。「Header」には、登録・編集・参照画面のヘッダが配置されています。これにより、複数の画面で共通デザインのヘッダを利用でき、保守性や一貫性が向上します。

メモ

「マスタメンテナンス」テンプレートでは、登録・編集・参照画面といった画面種別をJava前処理プログラムで判別しています。各ヘッダのプロパティにある「表示/非表示」の設定には、次のような条件式が指定されています。

= $input.__mode__ == $constant.mode.XXXX

XXXXには、画面種別を表す定数が入ります（登録画面：register、編集画面：edit、参照画面：refer）。

この仕組みにより、コンテナページごとに分けて配置したエレメントを、画面種別に応じて切り替えて表示することが可能になります。IM-BloomMakerの前処理について、詳細は、「Accel Studio テンプレートカタログ - 8.1. IM-BloomMaker前処理」を参照してください。

コンテナページに分ける​

メインコンテナに作成した画面を、機能別にコンテナページに分ける方法について説明します。

  1. メインコンテナページの「エレメント固有」にある「name」を編集します。
    └ わかりやすい名称に変更することをおすすめします。ここでは例として「Main Page」とします。
    └ コンテナヘッダの名称が変更されます。
  2. ［ ］をクリックします。
    └ コンテナページが追加されます。
  3. 追加したコンテナページの「エレメント固有」にある「name」を編集します。
    └ 機能別など、わかりやすい名称に変更することをおすすめします。ここでは例として「Header」とします。
    └ コンテナヘッダの名称が変更されます。

  1. メインコンテナページを開きます。
    └ 「Main Page」コンテナヘッダをクリックします。
  2. 対象のエレメントを選択します。
  3. ［ ］をクリックします。
    └ エレメントがクリックボードにコピーされます。
  1. 追加したコンテナページを開きます。
    └ 「Header」コンテナタブをクリックします。
  2. ［ ］をクリックします。
    └ コピーしたエレメントがコンテナページに貼り付けられます。

  1. メインコンテナページを開きます。
    └ 「Main Page」コンテナヘッダをクリックします。
  2. パレットから「パーツ」にある「コンテナページ埋め込み」をメインコンテナページにドラッグします。
  3. 「エレメント固有」の「page」にある［ ］をクリックします。
    └ コンテナページの一覧が表示されます。
  1. 追加したコンテナページを選択します。
    └ 「Header」をクリックします。
    └ 「コンテナページ埋め込み」の名称が「Header」に変更されます。
  2. ［ ］をクリックします。
    └ プレビュー画面が表示されます。
  3. プレビューで「コンテナページ埋め込み」で配置したエレメントが元のエレメントと同じように表示されていることを確認します。

  1. 対象のエレメントを選択します。
  2. ［ ］をクリックします。
    └ 選択したエレメントが削除されます。
  1. ［ ］をクリックします。
    └ プレビュー画面が表示されます。
  2. プレビューで元のエレメントが削除されたことを確認します。
参考

コンテナページの分け方について、さらに詳しい解説は「Low-Code HANDBOOK - コンテナページの分けかた」を参照してください。