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

3.1 登録画面の作成

ここでは、画面コンテンツを追加し、エレメントを配置して、データを入力するための登録画面のレイアウトを作成します。

登録画面を作成する​

資産登録画面を作成するため、画面コンテンツを用意します。画面コンテンツとは、アプリケーション画面を管理するための定義情報です。ここでは、入力フォームやボタンなどのエレメントを配置し、資産情報を登録するための画面レイアウトを作成します。

画面コンテンツを追加する​

「アプリケーション管理」画面を表示し、アプリケーションに「画面コンテンツ」リソースを追加します。追加した画面コンテンツをもとに、登録画面のレイアウトを作成します。本チュートリアルでは、レイアウトやエレメントを柔軟に配置できるデベロップモードを利用します。画面コンテンツを追加すると、画面編集用のデザイナが表示されます。

Step 0. 事前準備​
操作手順

画面コンテンツを追加する前に、以下の内容を確認してください。

Step 1. コンテンツ定義を追加する​
操作手順
  1. ［画面］タブをクリックします。
  2. ［リソースを追加］→［画面を新規作成］の順にクリックします。
  3. ［画面コンテンツ］をクリックします。
  1. ［デベロップモード］を選択し、［次へ］をクリックします。
  2. 「テンプレートを使用しない」にチェックが入った状態で、［次へ］をクリックします。
  1. ［検索］をクリックして、以下のカテゴリを選択し、［決定］をクリックします。
  • カテゴリID：tmp_asset_app
  • カテゴリ名：資産管理アプリ（試作品）
  1. 必須事項を入力します。
  • コンテンツID：tmp_asset_register
  • コンテンツ名：資産登録画面（試作品）
  • コンテンツ種別：imds
  1. ［登録］をクリックします。
    └ 「確認」ダイアログで［登録］をクリックします。
    └ 画面編集用のデザイナが表示されます。
参考
メモ

本チュートリアルでは、ローコード開発の基本的な流れを学ぶため、テンプレートは使用せず、レイアウトを一から作成します。また、コンテンツ種別を「imds」に設定した場合を例に説明します。コンテンツ種別について、詳細は「ローコード操作マニュアル - 画面コンテンツの作成 > コンテンツ種別について」を参照してください。

コラム

デザイナの種類は、「デベロップモード」の他に「レイアウトモード」があります。

レイアウトモードは、業務担当者などの非技術者でも、PowerPointのような操作感で直感的に画面デザインを作成できるモードです。一方で、細かなレイアウト調整や高度な設定には一部制限があります。そのため、短時間で画面イメージを作成したい場合や、画面のたたき台を作成したい場合に適しています。

エレメントを配置する​

IM-BloomMakerのエレメントとは、画面やコンテンツを作成する際に利用する構成部品を指します。必要なエレメントを配置し、プロパティ設定を行うことで画面UIを構築します。

Step 1. エレメントを配置する​
操作手順

エレメントの操作は、パレットから該当するエレメントを選択し、編集エリアで配置先となるエレメントを選択した状態（緑色の枠が表示）でダブルクリックします。必要に応じて、「エレメント固有」の設定を変更してください。

参考

エレメントの操作手順は、「ローコード操作マニュアル - 画面レイアウトとデザイン調整 > エレメントを配置する」を参照してください。

レイアウトを構成する
  1. ページ全体を構成する枠を配置します。
  • パレット：［レイアウト (imds)］→［コンテナ］をダブルクリック
  1. ヘッダを配置し、ボタンの配置を右側に設定します。
  • 編集エリア：［コンテナ］を選択
  • パレット：［レイアウト (imds)］→［ヘッダ］をダブルクリック
  • 編集エリア：［ヘッダ］を選択
  • エレメント固有：「right」にチェック
    └ ヘッダの右側に枠が表示されます。
  1. 入力フォームを構成する枠を配置します。
  • 編集エリア：外側の［コンテナ］を選択
  • パレット：［レイアウト (imds)］→［コンテナ］をダブルクリック
  • 編集エリア：配置した［コンテナ］を選択
  • エレメント固有：「gap」で［fluid］を選択
    └ 左右に常に同じサイズの余白が追加されます。
  1. ボタンを設置する枠を配置します。
  • 編集エリア：外側の［コンテナ］を選択
  • パレット：［レイアウト (imds)］→［中央揃え水平コンテナ］をダブルクリック
  • 編集エリア：配置した［中央揃え水平コンテナ］を選択
  • エレメント固有：「elementCount」で［1］を選択
    └ 登録ボタンを配置するため、エレメント数は1とします。
ユーザが操作・確認する要素を配置する
  1. 入力フォームを配置します。
  • 編集エリア：内側の［コンテナ］を選択
  • パレット：［フォーム部品 (imds)］→［フィールドグループ］をダブルクリック
  1. 入力フォームの数に合わせて、プロパティを変更します。
  • 編集エリア：［フィールドグループボディ］を選択
  • エレメント固有：「elementCount」で［5］を選択
    └ 入力フォームを5つ配置するため、エレメント数は5とします。
アクションに関わる要素を配置する
  1. ヘッダの右側にボタンを配置します。
  • 編集エリア：［ヘッダ右側］を選択
  • パレット：［フォーム部品 (imds)］→［ボタン］をダブルクリック
  1. ページの下部にボタンを配置します。
  • 編集エリア：［水平コンテナアイテム］を選択
  • パレット：［フォーム部品 (imds)］→［ボタン］をダブルクリック
参考

各エレメントの詳細は、「ローコード操作マニュアル - IM-BloomMakerのエレメント」を参照してください。

Step 2. ラベルやボタンを設定する​
操作手順

エレメントを配置した後、ラベルやボタンといった文言を設定します。文言は、該当するエレメントを選択し、「エレメント固有」の設定を変更します。

  1. ヘッダのページタイトルを入力します。
  • 編集エリア：［ヘッダタイトル］を選択
  • エレメント固有：以下のテキストを入力
    • title：資産登録画面
    • subTitle：資産管理アプリケーション
  1. ヘッダのボタン名称を入力します。
  • 編集エリア：［ボタン要素］を選択
  • エレメント固有：以下のテキストを入力
    • textContent：一覧
  1. ボタンの装飾を設定します。
  • 編集エリア：［ボタン要素］を選択
  • エレメント固有：以下の内容を設定
    • color：primary（青色）
    • leftIconClass：fa-solid fa-list-ul
参考

一覧ボタンに使用したアイコンは、Font AwesomeというWebサイトやスマートフォンアプリ向けのアイコンライブラリを利用しています。Font Awesomeにはさまざまな用途に対応したアイコンが用意されており、画面の視認性向上に活用できます。アイコンの探し方や設定方法の詳細については、「CookBook - IM-BloomMaker Bulmaエレメントに使用するアイコンの探し方」を参照してください。

  1. 入力フォームの各ラベルを入力します。
  • 編集エリア：［フィールドラベル］を選択
  • エレメント固有：以下のテキストを入力
    • label：所有組織
    • label：所有者
    • label：資産名
    • label：購入日
    • label：金額
  1. ページ下部のボタンの名称を入力します。
  • 編集エリア：［ボタン要素］を選択
  • エレメント固有：以下のテキストを入力
    • textContent：登録
  1. ボタンの装飾を設定します。
  • 編集エリア：［ボタン要素］を選択
  • エレメント固有：以下の内容を設定
    • color：primary（青色）
参考

「エレメント固有」の設定項目や「固定値」について、詳細は「ローコード操作マニュアル - 画面レイアウトとデザイン調整 > エレメント固有のプロパティを設定する」を参照してください。

Step 3. 入力フォームを配置する​
操作手順

ラベルを設定した後、入力フォームを配置します。入力するデータの種類に応じて、適切な入力フォームを選択してください。

  1. 所有組織・所有者・資産名にテキスト入力フォームを配置します。
  • 編集エリア：［フィールドコンテンツ］を選択
  • パレット：［フォーム部品 (imds)］→［テキスト入力］をダブルクリック
  1. 購入日に日付入力フォームを配置します。
  • 編集エリア：［フィールドコンテンツ］を選択
  • パレット：［フォーム部品 (imds)］→［日付入力］をダブルクリック
  1. 金額に数値入力フォームを配置します。
  • 編集エリア：［フィールドコンテンツ］を選択
  • パレット：［フォーム部品 (imds)］→［数値入力］をダブルクリック
参考
コラム

エレメントを配置した後は、作業内容の消失を防ぐため、適宜保存することを推奨します。［ ］をクリックすることで、コンテンツが現在のバージョンに上書き保存されます。詳細は「ローコード操作マニュアル - 新規コンテンツ定義の保存 > 画面コンテンツを保存する」を参照してください。

プレビューで確認する​

ここまで設定した内容を確認するため、プレビューを表示します。画面レイアウトやエレメントの配置が意図した通りに表示されていることを確認します。

操作手順
  1. ［ ］をクリックします。
    └ プレビュー画面が別タブまたは別ウィンドウに表示されます。
参考

プレビュー画面を表示したまま画面デザインを変更した場合、変更内容がプレビューに反映されないことや、意図しない動作が発生することがあります。プレビュー利用時の注意事項については、「ローコード操作マニュアル - 画面のプレビューとデバッグ」を参照してください。

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

プレビューで表示結果を確認した後、必要に応じてプロパティ設定で余白やボタンの大きさを調整します。画面全体のバランスを確認しながら、見やすいレイアウトに整えます。

Step 1. エレメントの余白を調整する​
操作手順

各エレメントの余白を調整し、ユーザが見やすい画面レイアウトにします。余白は、プロパティ設定の「余白」タブで設定します。

  1. 画面全体の上部に余白を設けるため、全体を構成するコンテナの余白を調整します。
  • 編集エリア：外側の［コンテナ］を選択
  • 余白：以下の数値と単位を入力
    • 外余白（上）：1em
  1. ページタイトルと罫線の間に余白を設けるため、ヘッダ内の余白を調整します。
  • 編集エリア：外側の［コンテナ］を選択
  • 余白：以下の数値と単位を入力
    • 内余白（下）：0.5em
  1. 罫線と入力フォームの間に余白を設けるため、コンテナの余白を調整します。
  • 編集エリア：内側の［コンテナ］を選択
  • 余白：以下の数値と単位を入力
    • 外余白（上）：2em
  1. 登録ボタンの周囲に余白を設けるため、水平コンテナの余白を調整します。
  • 編集エリア：［中央揃え水平コンテナ］を選択
  • 余白：以下の数値と単位を入力
    • 外余白（上）：3em
    • 外余白（下）：1em
参考

エレメントの余白は、HTML生成時にCSSの余白設定として反映されます。外側の余白はmargin、内側の余白はpaddingに対応します。そのため、エレメント同士の間隔を調整する場合は外余白、エレメント内の文字や部品との間隔を調整する場合は内余白を使用します。

また、余白の指定単位には、本チュートリアルで使用しているem（親要素を基準として、サイズを相対値で指定）のほか、px、%、remなども利用できます。詳細は「ローコード操作マニュアル - 画面レイアウトとデザイン調整 > エレメントのデザインを調整する」を参照してください。

Step 2. ボタンのサイズを調整する​
操作手順

一覧ボタンと登録ボタンの視認性を調整するため、ボタンサイズを変更します。

  1. 一覧ボタンを小さいサイズに変更します。
  • 編集エリア：［ボタン要素］を選択
  • エレメント固有：以下のサイズを選択
    • size：small
  1. 登録ボタンを大きいサイズに変更します。
  • 編集エリア：［ボタン要素］を選択
  • エレメント固有：以下のサイズを選択
    • size：large
参考

ボタンのサイズは、x-small、small、normal、medium、largeの5種類から選択できます。用途に応じて規定サイズを利用できるほか、ボタンの幅や高さ、文字サイズなどを調整して独自のデザインにすることも可能です。詳細は「intra-mart Developer Portal - デザイナ画面で見た目を調整したい」を参照してください。

コラム

最後に［ ］をクリックして、画面デザインやエレメントの配置をプレビューで確認します。意図した通りに表示されていることを確認したら、［ ］をクリックしてコンテンツを上書き保存します。詳細は「ローコード操作マニュアル - 新規コンテンツ定義の保存 > 画面コンテンツを保存する」を参照してください。

こんなときは​

操作中に不明な点や問題が発生した場合は、以下の項目から該当する内容を選択してください。
登録画面のデザインを作成した後は、画面で利用する値を設定します。変数、定数、多言語変数、環境情報変数の役割を確認しながら、それぞれ設定していきましょう。