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