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

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

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

エレメントとは​

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

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

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

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

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

参考

各部品の詳細を確認したい場合は、「IM-BloomMaker ユーザ操作ガイド - 13.3. エレメント一覧」を参照してください。

基本操作​

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

画面を作成する​

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

エレメントを配置する​

  1. パレットから該当するカテゴリをクリックします。
    └ 選択したカテゴリに属するエレメント一覧とヘルプが表示されます。
  2. 該当するエレメントをクリックした状態で、任意の場所にドラッグします。
    └ エレメントがコンテナページに配置されます。
参考

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

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

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

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

コラム

エレメントには、識別用の一意のIDが自動で付与されます。このIDは、他のエレメントと区別したり、スクリプトから参照したりする際に利用されます。HTML生成時には、タグのid属性として出力されます。特に制限がない場合、IDはそのまま利用することをおすすめします。

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

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

メモ

本マニュアルでは、コンテンツ種別を「imds」に設定した場合を例に説明します。基本的にはimds部品を使用しますが、必要に応じて標準部品を併用してください。

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

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

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

エレメントを配置した後、必要に応じて「エレメント固有」の項目を設定してください（リンクを開くと、エレメントの詳細や「エレメント固有」の設定項目が表示されます）。

種類説明標準部品imds部品
ヘッダ・フッタページの上部または下部に表示する部品ー「ヘッダ」　「フッタ」
ボックスエリアや区切りを作成する部品「ボックス」「ボックス」
サイドメニューintra-martのサイドメニューを表示する部品「サイドメニューコンテナ」ー
コンテナ・カラム　　　エレメントを縦横に整列させる部品「フレックスコンテナ」「コンテナ」　「水平コンテナ」
「中央揃え水平コンテナ」　「カラム」
タイル自由にグリッドレイアウトを構築する部品ー「タイル」
参考

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

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

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

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

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

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

種類説明標準部品imds部品
見出しタイトルなどのページ内の構造を示す部品「見出しレベル1」
「見出しレベル2」
「見出しレベル3」		「見出しレベル1」
「見出しレベル2」
「見出しレベル3」　　
テキスト表示　　　項目名や説明文などのテキストを表示する部品　　　「ラベル」　「強調ラベル」　「テキスト表示」

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

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

種類説明標準部品imds部品
テキスト入力テキストの入力ボックスを表示する部品「テキスト入力」
「テキストエリア」		「テキスト入力」
数値入力数値の入力ボックスを表示する部品「数値入力」
「数値入力（フォーマット）」		「数値入力」
「数値入力（フォーマット）」
日付・時刻　　日付・時刻の入力ボックスを表示する部品　　「日付入力」
「時刻入力」		「日付入力」
「時刻入力」

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

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

種類説明標準部品imds部品
ラジオボタン　　複数の選択肢から1つを選ぶためのボタンを表示する部品「ラジオボタン」「ラジオボタン」
ボックス複数の選択肢から選ぶためのチェックボックスを表示する部品　　「チェックボックス」　
「コンボボックス」　　　		「チェックボックス」　　　
プルダウンメニュー項目を表示する部品「プルダウン」
「複数選択」		「プルダウン」　　　　　
「複数選択」
参考

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

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

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

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

種類説明標準部品imds部品
アクションボタン　　　ユーザ操作に反応するトリガーとなる部品　　　　　　　　「ボタン」
「送信ボタン」　　　		「ボタン」
「削除ボタン」　　　

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

参考

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

  1. 調整したいエレメントを選択します。

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

    その他の操作

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

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

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

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

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

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

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

コラム

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

エレメントのデザイン調整では、まず個別単位で設定するか、画面全体で統一するかを判断します。

  • 画面全体を調整したいとき：CSSエディタで調整
  • 個別のエレメントを調整したいとき：下記のエレメント固有プロパティで設定

特定のエレメントに独自のCSSクラスを付与できます。クラスを設定することで、そのエレメントに対して、色・文字サイズ・枠線・余白などを自由に調整できます。

■クラス名：
複数指定する場合は、以下のいずれかの方法で指定します。

  • 半角スペース区切りで指定（例：class1 class2）
  • 変数値で1次元配列で指定 
    "cssClass": [
        "class1",
        "class2"
    ]
メモ

プロパティでCSSクラスを設定した後は、CSSエディタで編集します。CSSエディタは、ツールバーにある［ ］をクリックすると表示されます。

コラム

CSSを編集する方法は、以下の2通りの方法があります。用途に応じて使い分けてください。

機能ターゲット特徴主な用途
CSSクラス+CSSエディタ特定のエレメント単位　　個別の部品ごとに任意のクラス名を付与してデザイン制御- 特定の部品だけ別のデザインにしたい
- 一部のエレメントにカスタムスタイルを割り当てたい
- 同一画面上で、部品ごとに違う見た目を作りたい　　　　
CSSエディタ　　画面全体・複数エレメント画面全体や複数エレメントへスタイルを一括適用、自由に記述可能- 画面全体で共通のスタイルを適用したい
- 複数のエレメントに共通のデザイン・調整を行いたい
- CSSクラス名に限らず、エレメントIDなどを活用してより細かく制御したい　　　　　
参考

エレメントを配置した後のデザイン調整（サイズ、色、テキスト、余白など）について、詳細は「intra-mart Developer Portal - デザイナ画面で見た目を調整したい」を参照してください。

コラム

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

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

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

応用操作​

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

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

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

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

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

参考

カテゴリ名やエレメント名をまとめて調べたい場合は、「IM-BloomMaker ユーザ操作ガイド - 12.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