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

画面レイアウトとデザイン調整

ここでは、エレメントの配置による画面レイアウトの作成手順とデザインの調整方法について説明します。

エレメントとは​

IM-BloomMakerのエレメントとは、画面やコンテンツを作成する際に利用する構成部品を指します。エレメントには、入力ボックス・ボタン・ラベル・テーブル・リストなど、画面上でよく使われるさまざまな部品が用意されています。これらをドラッグ&ドロップで配置し、プロパティ設定を行うことで画面UIを構築します。

パレットに表示されるエレメント​

パレットに表示されるエレメントは、コンテンツ種別によって異なります。また、使用できるエレメントは、大きく分けて以下の部品に分類されます。

  • 標準部品：すべてのコンテンツで共通で利用できる製品標準エレメント
  • コンテンツ種別の部品：
    • imui部品：コンテンツ種別「imui」で利用できる専用エレメント
    • Bulma部品：コンテンツ種別「Bulma」で利用できる専用エレメント
    • imds部品：コンテンツ種別「imds」で利用できる専用エレメント
  • グラフ部品：各種グラフ（チャート）を表示するための専用エレメント
  • バーコード部品：バーコードを扱うための専用エレメント
  • IMツール部品：
    • IM-Spreadsheet：スプレッドシート機能と連携した専用エレメント
    • IM-BPM：BPM機能と連携した専用エレメント
    • IM-Copilot：生成AIアシスタント機能と連携した専用エレメント
  • ポートレット部品：ポータル配下のポートレットとして表示するための専用エレメント

レイアウト作成時は、基本的にコンテンツ種別の部品のエレメントを利用します。必要なエレメントが存在しない場合は、標準部品を補助的に使用します。

参考

基本操作​

画面作成の基本操作として、エレメントの配置と見た目の調整について説明します。

コラム

「 【参考】画面コンテンツの基本設計」では、よく利用される一覧画面や登録・編集・参照画面の作成方法について説明しています。具体的な画面を作成する際は、サンプルを参考にすることを推奨します。基本的なパターンを習得することで、応用的な画面設計にも取り組みやすくなります。

エレメントを配置する​

必要なエレメントを画面上に配置し、画面全体のレイアウトを整えます。各エレメントにはIDが自動で設定されますが、必要に応じて適宜変更してください。

  1. パレットから該当するカテゴリをクリックします。
    └ カテゴリに属するエレメント一覧が下に表示されます。
  2. 該当するエレメントを選択します。
    └ 選択したエレメントのヘルプが吹き出しに表示されます。
  1. エレメントをクリックした状態で、任意の場所にドラッグします。
    └ 該当するエレメントをダブルクリックしても配置できます。
    └ ここではエレメントを縦横に整列させる「コンテナ」を配置します。
  2. 必要なエレメントを繰り返し配置します。
    └ ここではページの上部に表示する「ヘッダ」を配置します。
    └ 詳細は、下記「画面レイアウトの基本的な流れ」を参照してください。

画面レイアウトの基本的な流れ

ここでは、エレメントを配置して画面レイアウトを作成する基本的な手順について説明します。

(1) レイアウトを構成する

画面全体の構造を決定します。

「レイアウト」・「レイアウト（部品名）」カテゴリから、レイアウトに必要なエレメントを配置し、基本的な枠組みを整えます。

エレメントを配置した後、必要に応じて「エレメント固有」の項目を設定してください。詳細は、下記「エレメント固有プロパティの設定」を参照してください。

種類説明参照先：「付録 - IM-BloomMakerのエレメント」
ヘッダ・フッタページの上部または下部に表示する部品「レイアウト・構造部品 > 基本レイアウト > ヘッダ／フッタ」
ボックスエリアや区切りを作成する部品「レイアウト・構造部品 > 基本レイアウト > ボックス」
サイドメニューintra-martのサイドメニューを表示する部品「レイアウト・構造部品 > 基本レイアウト > コンテナ」
コンテナ・カラムエレメントを縦横に整列させる部品「レイアウト・構造部品 > 基本レイアウト > コンテナ」
「レイアウト・構造部品 > 基本レイアウト > カラム」
タイル自由にグリッドレイアウトを構築する部品「レイアウト・構造部品 > 基本レイアウト > タイル」
参考

画面のレイアウト作成方法については、下記のページもあわせて参照してください。

(2) ユーザが操作・確認する要素を配置する

ユーザが操作・確認するために必要な要素を画面上に配置します。
エレメントは大きく分けて、以下の3種類に分類されます。

  • 表示用エレメント：ユーザに情報を見せる
  • 入力用エレメント：ユーザが情報を入力・編集する
  • 選択用エレメント：ユーザが定義された選択肢から選ぶ

表示用エレメントの場合：

「レイアウト」・「汎用」・「フォーム部品（部品名）」カテゴリから、該当のエレメントを選択します。

種類説明参照先：「付録 - IM-BloomMakerのエレメント」
見出しタイトルなどのページ内の構造を示す部品「レイアウト・構造部品 > 基本レイアウト > 見出し」
テキスト表示項目名や説明文などのテキストを表示する部品「汎用表示・制御部品 > テキスト表示」

入力用エレメントの場合：

「フォーム部品」・「フォーム部品（部品名）」カテゴリから、該当のエレメントを選択します。

種類説明参照先：「付録 - IM-BloomMakerのエレメント」
テキスト入力テキストの入力ボックスを表示する部品「フォーム・入力部品 > 入力フィールド > テキスト入力」
数値入力数値の入力ボックスを表示する部品「フォーム・入力部品 > 入力フィールド > 数値入力」
日付・時刻日付・時刻の入力ボックスを表示する部品「フォーム・入力部品 > 入力フィールド > 日付・時刻入力」
参考

入力用エレメントについては、下記のページもあわせて参照してください。

選択用エレメントの場合：

「フォーム部品」・「フォーム部品（部品名）」カテゴリから、該当のエレメントを選択します。

種類説明参照先：「付録 - IM-BloomMakerのエレメント」
ラジオボタン複数の選択肢から1つを選ぶためのボタンを表示する部品「フォーム・入力部品 > 選択フィールド > ボタン」
チェックボックス複数の選択肢から選ぶためのチェックボックスを表示する部品「フォーム・入力部品 > 選択フィールド > ボックス」
プルダウンメニュー項目を表示する部品「フォーム・入力部品 > 選択フィールド > プルダウン」
参考

選択用エレメントについては、下記のページもあわせて参照してください。

(3) アクションに関わる要素を配置する

ユーザが操作を実行する際のアクションに対応する要素を配置します。

「フォーム部品」・「フォーム部品（部品名）」カテゴリから、登録・保存・キャンセルボタンなどを作成するためのエレメントを選択します。

種類説明参照先：「付録 - IM-BloomMakerのエレメント」
アクションボタンユーザ操作に反応するトリガーとなる部品「フォーム・入力部品 > アクションボタン > ボタン」
参考

アクションボタンについては、下記のページもあわせて参照してください。

エレメント固有のプロパティを設定する​

各エレメントには「エレメント固有」の設定項目があります。この設定では、画面内に配置したエレメントだけで使用する値や動作（表示内容・リスト・初期値・動作の詳細など）を指定できます。

たとえば、imds部品の「ヘッダ」エレメントでは、次のような設定項目が表示されます。

  • backButton：ヘッダに「戻る」ボタンを表示するかどうかを指定
  • reloadButton：ヘッダに「再読み込み」ボタンを表示するかどうかを指定
  • dropdown：ヘッダのアイコンをドロップダウンにするかどうかを指定
  • left：エレメントの左側を表示するかどうかを指定
  • right：エレメントの右側を表示するかどうかを指定

ここで、backButtonにチェックを入れると、ヘッダの左側に「戻る」ボタンが表示されます。また、rightにチェックを入れると、エレメントの右側が表示されるため、その位置に特定のボタンを配置することなどが可能になります。

また、プロパティ値には、用途に応じて「固定値」または「変数値」を入力します。

  • 固定値：
    画面デザイン時点であらかじめ値を決めた値。画面表示時の初期値として使用され、ユーザ操作によって値が変更されても、他のエレメントの動作には影響しません。

  • 変数値：
    画面表示時の状況によって動的に変化する値。以下の2種類の方法で指定できます。

    • 変数パス表現：変数を直接指定する方法
    • 式表現：固定値と組み合わせた式も指定する方法
参考

変数値の式表現の指定方法について、詳細は「IM-BloomMaker ユーザ操作ガイド - 5.3.1.5. プロパティ値」を参照してください。

コラム

UIテキストや説明文といった文言を固定値として使用することも可能ですが、変数値として利用すると、アプリケーション内での活用範囲が広がります。また、用途に合わせて文言を変数としてまとめて管理することで、開発中の変更にも柔軟に対応できます。詳細は「画面変数と環境情報の設定」を参照してください。

このように、画面をより細かく柔軟にカスタマイズしたい場合は、「エレメント固有」の設定項目を変更してください。

参考

各「エレメント固有」の設定項目について、詳細は「IM-BloomMaker ユーザ操作ガイド - 13.3. エレメント一覧」を参照してください。

エレメントの基本情報を設定する​

各エレメントには「共通」の設定項目があります。この設定では、エレメントのID、エレメントの表示・非表示の設定、ツールチップが設定できます。

エレメントには、識別用の一意のIDが自動で付与されます。このIDは、他のエレメントと区別したり、スクリプトから参照したりする際に利用されます。HTML生成時には、タグのid属性として出力されます。アクションなどでエレメントIDを指定して利用する場合は、用途が分かりやすく、他と重複しないIDに変更することを推奨します（例：main-spreadsheet）。

参考

変数を利用してエレメントの表示・非表示を制御できます。詳細は「CookBook - IM-BloomMaker で作成した画面で、入力項目の値によってエレメントの表示・非表示を切り替える方法」を参照してください。

エレメントのデザインを調整する​

参考

エレメントのデザインを調整するときは、プレビュー画面を別タブで表示しながら作業すると効率的です。詳細は「画面のプレビューとデバッグ > プレビュー画面を開く」を参照してください。

  1. 調整したいエレメントを選択します。
  2. 調整したい項目をクリックし、必要な設定を行います。
    └ 操作手順の詳細は、下記の各項目を参照してください。
その他の操作

設定項目の内容を確認したい場合は、項目名の端にある［ ］をクリックしてください。

エレメントのテキストや背景などの基本的な色を、簡単に切り替えることができます。特定の文字・ボタン・ラベルを強調して目立たせたいときに利用します。

■文字色（HTML生成時：style="color: 指定した値;"）：
エレメントの文字色を指定します。

■背景色（HTML生成時：style="background-color: 指定した値;"）：
エレメントの背景色を指定します。

文字色・背景色で指定可能な記法は以下のとおりです。

  • 色名：キーワードをカラーで指定（例：red）
  • カラーコード（Hex）：0-9からA-Fまでの16進数表記で指定（例：#ff0000）
  • RGB：0-255の数値か0-100の%で指定（例：rgb(255,0,0)）
  • RGBA：三原色とAlpha(透明度)を組み合わせて指定（例：rgba(255,0,0,1)）
  • HSL：Hue(色相)、Saturation(彩度)、Lightness(明度)で指定（例：hsl(0,100%,50%,1)）
  • グローバル値：すべてのプロパティで指定できる値を指定（例：initial (初期値)、inherit (継承値)、unset (規定値がinheritは継承値に、それ以外は初期値に変更)、revert (スタイルシートに応じて指定)）
コラム

「文字色・背景色」プロパティで指定する色は、特定のエレメントのみに適用されます。画面全体の統一感を図りたい場合は、CSSエディタの活用やテーマ機能の利用を検討してください。

参考
コラム

「 【参考】画面コンテンツの基本設計」では、よく利用される一覧画面または登録・編集・参照画面の作成方法について説明しています。画面を作成する際は、サンプルを参考にすることを推奨します。基本的なパターンを習得することで、応用的な画面設計にも取り組みやすくなります。

次のステップへ：画面変数と環境情報の設定

画面レイアウトが確定したら、次は画面変数の設定に進みましょう。「画面変数と環境情報の設定」では、画面上で利用する変数を設定し、必要に応じてエレメントの値を変数に修正します。変数には、変数・定数・入力変数といった基本的な変数があり、用途に応じて多言語変数や環境情報変数も利用できます。

応用操作​

エレメントは、基本的な操作に加えて、次のような応用的な操作にも対応しています。必要に応じて確認してください。

カテゴリやエレメントを検索する​

パレット内のカテゴリ名やエレメント名を入力すると、該当する項目を検索できます。名称の一部だけでも検索可能です。

  1. ［パレット内検索］をクリックします。
  2. 検索したい名称を入力します。
    └ 入力と同時に検索が実行されます。
  3. 検索結果を確認します。
    エレメントにカーソルを合わせると、説明が表示されます。
その他の操作

入力内容をリセットしたい場合は、［ ］をクリックしてください。

参考

カテゴリ名やエレメント名をまとめて調べたい場合は、「IM-BloomMaker ユーザ操作ガイド - 13.3. エレメント一覧」を参照してください。

操作の取り消し・やり直しを行う​

  • 操作の取り消し

［ ］をクリックします。
直前の操作を取り消して、1つ前の状態に戻ります。

  • 操作のやり直し

［ ］をクリックします。
取り消した操作を再実行し、1つ後の状態に戻ります。

その他の操作

ショートカットキーを使うと、素早く操作できます。

  • 取り消し　Windows：Ctrl+Z、Mac：Command+Z
  • やり直し　Windows：Ctrl+Y、Mac：Command+Y

エレメントの切り取り・コピー・貼り付けを行う​

  • エレメントの切り取り

該当のエレメントを選択し、［ ］をクリックします。
選択したエレメントを削除し、クリップボードに保存します。

  • エレメントのコピー

該当のエレメントを選択し、［ ］をクリックします。
選択したエレメントをクリップボードに保存します。

  • エレメントの貼り付け

貼り付けたい位置をクリックし、［ ］をクリックします。
切り取り・コピーしたエレメントを指定した位置に貼り付けます。

その他の操作

ショートカットキーを使うと、素早く操作できます。

  • 切り取り　Windows：Ctrl+X、Mac：Command+X
  • コピー　Windows：Ctrl+C、Mac：Command+C
  • 貼り付け　Windows：Ctrl+V、Mac：Command+V

エレメントを選択する​

［ ］をクリックすると、アイコンの表示が［ ］に切り替わり、範囲選択モードになります。範囲選択を使用すると、マウスドラッグにより、複数のエレメントをまとめて選択できます。

その他の操作

ショートカットキーを使うと、素早く操作できます。

  • エレメントの範囲選択　Windows/Mac：Shiftキーを押しながらクリック

エレメントを削除する​

該当のエレメントを選択し、［ ］をクリックします。

その他の操作

ショートカットキーを使うと、素早く操作できます。

  • 削除　Windows：Delete、Mac：Command+Delete