画面コンテンツの作成
ここでは、画面コンテンツの概要と作成手順について説明します。
画面コンテンツとは
画面コンテンツとは、アプリケーション画面を管理するための定義情報です。IM-BloomMaker上で入力欄やラベル、ボタンなどのエレメントを配置・設定し、1つの画面として保存します。画面コンテンツには、見た目のデザインに加え、入力値のバリデーションやボタン操作時のアクションなど、画面の動作に関する情報も含まれます。
画面を作成する前に、まず以下の内容を検討しておくと、作業をスムーズに進めることができます。
-
画面の目的と構成
- どの業務を支援する画面かを明確にする
- 必要な入力項目や表示項目、操作ボタンを整理する
-
画面レイアウトとデザイン調整
- ユーザが操作しやすいエレメントの配置を検討する
- 入力欄・ラベル・ボタンなどの配置ルールを決める
-
使用するデータと変数設定
- 画面で扱うデータの種類や取得元を確認する
- IM-Repositoryで作成したデータ定義や変数を必要に応じて利用する
-
アクション設定
- ボタン操作や画面イベント時に実行する処理を整理する
- 入力値のバリデーションやデータ更新、画面遷移などの動作を事前に検討する
- IM-LogicDesignerで作成したロジックフロー定義を必要に応じて設定する
基本操作
画面コンテンツ作成における基本的な操作手順として、デザイナのタイプ選択、テンプレート選択、コンテンツ基本情報の入力について説明します。
画面コンテンツを作成する
画面コンテンツを作成する際、フローに沿って設定を進めていきます。
本マニュアルでは、画面コンテンツの基本的な作成手順を学ぶために、「デベロップモード」を使用した操作方法を説明します。
レイアウトモードの概要については、「新規コンテンツ定義の追加 > レイアウトモード」を参照してください。
2. 使用するテンプレートを選択
既存のテンプレートを利用して画面コンテンツを作成したい場合は、ここで目的に合ったテンプレートを選択します。
- 使用したいテンプレートを選択します。
- テンプレートを使用しない
- IM-BloomMakerテンプレート一覧・登録・編集・削除（Bulma）
- 一覧テーブルテンプレート（Bulma）
- 入力フォームテンプレート（Bulma）
- 空白テンプレート（Bulma）
- IM-BloomMakerテンプレート一覧・登録・編集・削除（imui）
- ［次へ］をクリックします。
本マニュアルでは、テンプレートを使用せずに一から設定するため、［テンプレートを使用しない］を選択します。
テンプレートについて
テンプレートとは、あらかじめ用意されたひな形（テンプレート）を利用して、簡単かつ効率的に新しいコンテンツを作成できる仕組みのことです。テンプレートには、よく使う入力項目やデザインパターンなどがあらかじめセットされています。各テンプレートの違いについては、以下の「（参考）各テンプレートの詳細」を確認してください。
（参考）各テンプレートの詳細
空白テンプレート（Bulma）
空白テンプレートには、ヘッダ部やサイドメニューがあらかじめ設定されています。コンテンツ種別はBulmaです。ヘッダ部にはタイトルのほか、検索、ヒント、リロードボタンが設置されています。
画面に必要な要素が用意されているため、メインコンテンツ部からスムーズに作業を開始できます。
入力フォームテンプレート（Bulma）
入力フォームテンプレートには、ヘッダ部やサイドメニューのほかに、メインコンテンツ部に入力フォームがあらかじめ設定されています。コンテンツ種別はBulmaです。
作成したい画面にあわせて入力フォームをカスタマイズするだけで、効率よく作業を進めることができます。
一覧テーブルテンプレート（Bulma）
一覧テーブルテンプレートには、ヘッダ部やサイドメニューのほかに、メインコンテンツ部に検索フォームと一覧テーブルがあらかじめ設定されています。コンテンツ種別はBulmaです。
IM-BloomMakerテンプレート一覧・登録・編集・削除（imui）
IM-BloomMakerテンプレートには、一覧（検索）画面、登録・編集ダイアログ、削除ダイアログがあらかじめ設定されています。コンテンツ種別はimuiです。
画面操作を正しく動作させるためには、IM-LogicDesignerルーティング定義の認可を適切に設定する必要があります。
IM-BloomMakerテンプレート一覧・登録・編集・削除（Bulma）
IM-BloomMakerテンプレートには、一覧（検索）画面、登録・編集ダイアログ、削除ダイアログがあらかじめ設定されています。コンテンツ種別はBulmaです。
画面操作を正しく動作させるためには、IM-LogicDesignerルーティング定義の認可を適切に設定する必要があります。
参考
- Bulmaやimuiはコンテンツ種別のことを指します。コンテンツ種別については、下記「コンテンツ種別について」を参照してください。
- IM-LogicDesignerのルーティング定義について、詳細は「ロジックのルーティング設定」を参照してください。
3. コンテンツの基本情報を入力
コンテンツの基本情報を設定します。格納場所となる「カテゴリ」、一意に識別するための「コンテンツID」、ユーザにわかりやすく表示するための「コンテンツ名」を入力します。最後に、画面デザインの基盤となる「コンテンツ種別」を選択します。コンテンツ種別は、画面のUIフレームワークやデザインの方向性、機能面が異なり、一度登録すると変更できません。
- ［検索］をクリックします。
└ 「コンテンツカテゴリ検索」画面が表示されます。 - 使用したいカテゴリを選択します。
└ カテゴリ内の情報が右側に表示されます。 - ［決定］をクリックします。
└ 「コンテンツカテゴリ検索」画面が閉じます。
- 「コンテンツID」に、任意のIDを入力します。
└ 初期設定では、ランダムなIDが自動で入力されています。 - 「コンテンツ名」にある「標準」の欄に名称を入力します。
- 「コンテンツ種別」を選択します。
- ［登録］をクリックします。
└ 「登録確認」ダイアログで再度［登録］をクリックします。
本マニュアルでは、コンテンツ種別を「imds」に設定した場合を例に説明します。
コンテンツ種別について
コンテンツ種別とは、画面に適用されるUIフレームワークやデザインの基準を示すカテゴリのことです。コンテンツ種別によって、利便性・拡張性やデザインの方向性が大きく変わるため、用途に応じて最適なものを選択することが大切です。imui・Bulma・Bulma Theme Colored・imdsの主な特徴については、以下の「（参考）各コンテンツ種別の詳細」を確認してください。
（参考）各コンテンツ種別の詳細
imui（intra-mart user interface）
imuiは、intra-mart Accel Platform上で業務Webアプリケーションを効率的かつ統一感を持って構築するためのUI部品群と、その実装仕様・デザインルールをまとめた仕組みです。
主な特徴：
- intra-martのガイドラインに基づいた統一感のあるデザイン
- intra-mart標準の部品を活用することによる開発効率の向上
- 業務アプリとしての操作性と一貫性を確保
メモimui部品の詳細は「IM-BloomMaker ユーザ操作ガイド - 12.3.2. imui部品」を参照してください。
Bulma
Bulmaは、モダンで洗練されたWebデザインに適したCSSフレームワークです。スタイリッシュな見た目で、レスポンシブ対応の画面を簡単に作成できます。
主な特徴：
- スタイルを適用するだけのシンプルな設定
- 柔軟なグリッドシステムと豊富なコンポーネント
- カスタマイズ性・拡張性が高く、業務画面の構築に最適
メモBulma部品の詳細は「IM-BloomMaker ユーザ操作ガイド - 12.3.3. Bulma部品」を参照してください。
Bulma Theme Colored
Bulma Theme Coloredは、Bulmaをベースに、intra-mart Accel Platformの画面テーマ（色やフォント）に自動で連動させることができるコンテンツ種別です。
主な特徴：
- Bulmaのデザイン性と使いやすさを活用
- intra-martのテーマに合わせた業務画面としての統一感
- テーマ変更にも、追加作業なしで自動的に反映
メモBulma Theme Colored部品の詳細は「CookBook - IM-BloomMaker Bulma Theme Colored について」を参照してください。
imds（intra-mart Design System）
imdsは、intra-mart Design Systemに適用した画面を作成し、IM-BloomMaker上で高度な業務アプリ構築を支援する専用コンテンツ種別です。
主な特徴：
- intra-mart Data Serviceとのデジタル連携機能の強化
- 新しいUI体験や業務パターンに対応した専用部品を提供
- 将来的な業務自動化ニーズにも適用可能
メモintra-mart Design Systemの詳細は、「intra-mart Design System」を参照してください。
コンテンツ種別は、BulmaとBulma Theme Coloredの間で相互に切り替え可能です。さらに、BulmaまたはBulma Theme Coloredからimdsへの変換も可能です。詳細は「IM-BloomMakerユーザ操作ガイド - 4.2.9. コンテンツ種別 Bulma から imds に変換する」を参照してください。
画面項目
デザイナ画面（デベロップモード）
デザイナ画面は、用途に応じて複数のペイン（区画）に分かれています。
| No | 名称 | 説明 | |
|---|---|---|---|
| (1) | ツールバー | 画面コンテンツに関する基本的な操作を行います。 | |
 （上書き保存） | デザイナ画面で編集した内容を上書き保存します。 | ||
 （レイアウトモードに切替） | デベロップモードからレイアウトモードに切り替えます。 | ||
 （設計書出力） | 画面コンテンツの設計書をExcelファイル（.xlsx）で出力します。 | ||
 （差分比較） | 同じコンテンツの異なるバージョン、または別のコンテンツ同士を比較し、差分を表示します。 | ||
 （元に戻す） | 変更を元に戻す操作です。 キーボードでも同様に実行できます（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を押しながらクリック）。 | ||
 （コンテナを選択） | 対象のコンテナを選択します。コンテナのプロパティを設定したい場合に使用します。 | ||
 （プレビュー） | プレビュー画面が表示され、作成したアプリケーション画面の見た目や機能を確認できます。 「main」に設定されたコンテナの内容が表示されます。 | ||
 （CSS編集） | CSSエディタが表示されます。CSSでエレメントにスタイルを設定したい場合に使用します。 | ||
 （削除） | 選択中のエレメントを削除します。削除したエレメントはクリップボードにコピーされません。 キーボードでも同様に実行できます（Windows：Delete、Mac：Command+delete）。 | ||
 （メモ追加・編集） | 選択中のエレメントにメモを追加し、編集します。 | ||
 （メモ設定） | メモの表示状態（未解決／解決済み）を切り替えるメニューが表示されます。 | ||
 （関連機能） | 現在編集中のコンテンツに関連する機能を選択するメニューが表示されます。 ・IM-LogicDesigner： 「ロジックフロー定義一覧」画面が表示されます。 ・ViewCreator： 「クエリ一覧」画面が表示されます。 | ||
 （ヘルプ） | 操作方法のヘルプを選択するメニューが表示されます。 ・ユーザ操作ガイド：IM-BloomMakerユーザ操作ガイドが表示されます。 ・YouTube動画：IM-BloomMakerの操作方法をまとめた動画一覧が表示されます。 | ||
| (2) | パレット | 画面を構成するエレメントが、カテゴリごとに一覧表示されています。 | |
| （パレット内検索） | 検索したいエレメントの名称を入力して検索すると、該当のエレメントが表示されます。 | ||
| （カテゴリボックス） | カテゴリボックスをクリックすると、関連するエレメントが表示されます。 | ||
| (3) | コンテナ | エレメントをパレットからドラッグ&ドロップで配置し、画面を作成するための編集エリアです。 コンテナでは、ブラウザのタブに表示されるページタイトルや、初期表示時に実行するイベントなどを設定できます。 | |
| （コンテナヘッダ） | コンテナごとにタブが表示され、ドラッグ&ドロップで順序を変更できます。 デザイナ画面で最初に表示されるコンテナは「main」で、プレビューの表示対象になります。 「main」を変更するには、切り替えたいコンテナのタブをダブルクリックしてください。 | ||
| (4) | プロパティ | 編集中のコンテナや選択したエレメントの設定情報を表示します。 | |
| 「プロパティ」タブ | コンテナおよびエレメントに対して、動作や見た目などを設定するエリアです。 | ||
| 「変数」タブ | アプリケーション画面が保持する情報を変数として設定するエリアです。 変数には、（内部）変数・定数・入力・多言語・環境が含まれます。 | ||
| 「アクション」タブ | エレメントで特定の操作が行われたときに実行される処理を設定するエリアです。 | ||
| 「画面構成」タブ | コンテナに配置されているエレメントの並び順や構成を閲覧するためのエリアです。 | ||
次のステップへ：画面レイアウトとデザインの調整
コンテンツの基本情報を設定したら、実際に画面コンテンツの作成に進みましょう。「画面レイアウトとデザイン調整」では、デザイナ画面にエレメントを配置し、画面レイアウトを構築します。デザイナ画面上にボタンや入力欄などの部品を追加したり、配置を調整したりすることで、ユーザが実際に操作する画面を設計します。