簡単な画面を作成してみよう
アプリ開発では、ユーザが操作する画面（UI）の設計はとても重要です。画面設計には、ボタンやテキストなどを適切に配置する静的な部分だけでなく、ユーザの操作に応じて処理が動くようにする動的な部分まで考慮する必要があります。ここでは、静的・動的な部分も踏まえた画面設計が可能なIM-BloomMakerの基本的な使い方と便利な機能について紹介します。
IM-BloomMakerとは
IM-BloomMakerは、プログラミングの知識がなくても、Webブラウザ上で簡単にアプリ画面が作成できるツールです。ドラッグ&ドロップでデザイン部品を配置し、アクション設定を組み合わせることで、直感的に操作しながら画面を設計できます。
IM-BloomMakerでは、目的に応じて2つのデザイナモードから選択できます。
- デベロップモード：開発者向けで、画面デザインの編集や変数・アクションなどの設定ができる
- レイアウトモード：部品の配置に特化した簡易的なモードで、画面デザインの試作に利用できる
レイアウトモードの特徴とデベロップモードとの違いについて、詳細は「ローコード操作マニュアル - 新規コンテンツ定義の追加 > デザイナの種類」を参照してください。
基本的な操作の流れ
IM-BloomMakerの基本的な操作の流れを紹介します。リンク先では、「ローコード操作マニュアル」の該当ページを参照できます。
ここでは、開発者を対象とし、デベロップモードで画面を設計する場合を想定しています。
| No. | 操作内容 | 説明 |
|---|---|---|
| (1) | カテゴリの作成 | 画面コンテンツを分類するため、コンテンツカテゴリを作成します。 |
| (2) | コンテンツ定義の作成 | アプリケーション全体の画面リソースを管理するため、コンテンツ定義を作成します。 |
| (3) | 画面のレイアウト | レイアウト部品やフォーム部品など、画面に必要な要素を配置し、デザインを調整します。 |
| (4) | 画面変数の設定 | 画面内で使用する変数、定数、入力変数、多言語変数などを設定します。 |
| (5) | アクションの設定 | ある操作に対して実行したい処理があれば、操作を行うエレメントにアクションを設定します。 |
| (6) | コンテンツ定義の保存 | ページタイトルや初期表示時の動作など、ページ全体に関する設定を行い、コンテンツ定義を保存します。 |
| (7) | 画面のルーティング設定 | 画面にアクセスするためのURL（ルーティング）を設定します。URLを開くと完成画面を確認できます。 |
便利な機能
IM-BloomMakerには、画面設計をより効率的に進めるための便利な機能が備わっています。特に複数人での開発やレビューが必要な場合は、作業の精度やスピードを向上させます。基本的な操作に慣れてきたら、これらの機能も活用してみましょう。
IM-BloomMakerの操作方法や全体像を把握するには、intra-mart公式のYouTube動画がおすすめです。動画を見ながら、操作の流れや機能の使い方を視覚的に理解できます。
詳細は、「NTT DATA INTRAMART Tech - 【intra-mart】IM-BloomMaker についてのご紹介【ローコード開発】」を参照してください。
※画像をクリックすると、外部サイト（YouTube）に移動します。
チュートリアル
それでは、実際に簡単なアプリ画面を作成してみましょう。このチュートリアルでは、レイアウトモードを使って、アプリ画面のモックアップを作成していきます。開発前の検討や共有にも役立つ、画面設計の第一歩を体験してみましょう。
完成イメージ
レイアウトモードは、画面の構成やデザインを直感的に試作できる機能です。ボタンやテーブルなどの部品をドラッグ＆ドロップで自由に配置しながら、画面のイメージを素早く形にすることができます。専門的な知識がなくても使用できるため、開発者以外の方でも気軽にアプリ画面の試作ができ、デザインの共有や意見交換をスムーズに行うことが可能です。
上下に分かれた2つのエリアを用意し、上のエリアには詳細検索用の部品を、下のエリアには一覧テーブルの部品をそれぞれ配置します。項目の削除やラベルの変更など、細かいデザイン調整をしたら、最後にプレビューで完成画面のイメージを確認してみましょう。
Step 1：コンテンツを作成する
アプリ画面の定義情報となるコンテンツを作成します。
以下のカテゴリ情報を入力し、［更新］をクリックします。
- カテゴリ： tutorial_category
- カテゴリ名（標準）：チュートリアルカテゴリ
続いて、以下のコンテンツ情報を入力し、［登録］をクリックします。
- コンテンツID： tutorial_contents
- コンテンツ名：チュートリアルコンテンツ
詳細な手順については、「IM-BloomMaker チュートリアルガイド - 4.2.2. コンテンツを作成する」を参照してください。
Step 2：レイアウトを設定する
デザイナ画面を開き、2つのエリアを準備します。
- ［レイアウト編集］をクリックし、デザイナ画面を開く
- メインエリアのレイアウト（上下2分割）を選択する
詳細な手順については、以下のドキュメントを参照してください。
Step 3：部品を配置・調整する
作成した2つのエリアにそれぞれ部品を配置し、調整します。
- 上のエリアに「詳細検索アコーディオン」部品を配置する
- 下のエリアに「一覧テーブルセット」部品を配置する
- 検索エリアの見た目を調整する
- お知らせ一覧エリアの見た目を調整する
- その他のエリアの見た目を調整する
画面のモックアップを作成する際は、部品ごとの動作仕様や課題のメモ、作業タスクのメモなどを記録しておくと便利です。詳細は、「IM-BloomMaker チュートリアルガイド - 4.2.9. 部品の動作仕様や課題、作業タスクをメモに残す」を参照してください。
Step 4：プレビューで確認する
「プレビュー」アイコンをクリックし、プレビュー画面を表示します。修正がなければ、「上書き保存」アイコンをクリックします。
詳細な手順については、「IM-BloomMaker チュートリアルガイド - 4.2.10. プレビュー画面の表示と画面デザインの保存」を参照してください。