こんにちは！ソリューションコンサルタントの田上です。
「上流工程でのモックアップやプロトタイプの作成」はWeb開発において欠かせない重要なプロセスです。しかし、開発現場ではタイトなスケジュールで進めなければならないことも多く、モックアップやプロトタイプを作成する時間が、なかなか取れないことも多くあるのではないでしょうか。
そこで登場するのが、モックアップやプロトタイプよりもさらに高度な「実際に動作するプロダクションコード」までを手早く作成することができる「ローコードツール App Builder」です。
モックアップ、プロトタイプ、プロダクションコードは、似ていますが下記のような意味があります。
- モックアップ・・・低コストで作成する画面デザインの紙芝居（動的処理の実装なし）
- プロトタイプ・・・機能や画面を実際にインタラクション操作可能なプログラム（動的処理の実装あり）
- プロダクションコード・・・リリース本番環境に配置して動作可能な本番コード
インフラジスティックスの「App Builder」はWebアプリケーションのUIデザインをドラッグ＆ドロップで作成することができるローコードツールです。App Builder で作成したUIデザインから、1ピクセルのズレもなく「コード（HTML , CSS , Angular , Blazor , WebComponents）」を自動生成することができる「WYSIWYGエディタ」になっています。
今回の記事では、App Builder を使って「Webアプリケーション（プロジェクトファイル一式）」を作成して、完成したWebアプリケーションを「プレビュー（URL共有）」するところまでを解説します。
本日の流れですが、
- 画面の「デザインレイアウト」を決めます。
- UI部品を「ドラッグ＆ドロップ」で配置します。
- 完成したWebアプリケーションを「URLで共有」します。
UIデザインからプログラミングの業務フローを効率化できるローコードツール App Builder について、早速見て行きましょう。
- 前提条件について
- 1. 画面の「デザインレイアウト」を決める
- 2. UI部品を「ドラッグ＆ドロップ」で配置する
- 3. 完成したWebアプリケーションのプレビューを開始する
- 実際にWebアプリケーションのプレビューを見てみよう
- 「App Builder」で「Webアプリケーション」を手早くつくろう！
前提条件について
App Builder を実際に操作したい場合は、無料トライアルへご参加ください。
1. 画面の「デザインレイアウト」を決める
まず「デザインレイアウト」を決めるために、App Builder の「新しいアプリ」を作成してみましょう。
App Builder を起動すると、あなたのプロジェクト一覧が表示されます。プロジェクト一覧の「新しいアプリ」ボタンを押下してください。
つぎに、今回はデザインレイアウトに「Header + nav + content（上ヘッダー＋左ナビ＋右コンテンツ）」のテンプレートを選択してみましょう。ヘッダーとナビゲーションが自動作成されます。複数のビューを管理するようなWebアプリケーションでよく見るデザインレイアウトだと思います。
テンプレートを選択するだけで、Webアプリケーションの「デザインレイアウト」を作成することができました。ここから更にUI部品をドラッグ＆ドロップ操作で配置していきましょう。
2. UI部品を「ドラッグ＆ドロップ」で配置する
「Header + nav + content（上ヘッダー＋左ナビ＋右コンテンツ）」のテンプレートでは、「３つのビュー」がサンプルとして自動作成されます。このビューに対してUI部品をドラッグ＆ドロップで配置していきましょう。
- ビュー１に「グリッド」を配置する
- ビュー２に「カテゴリーチャート（棒グラフ）」を配置する
- ビュー３に「ファイナンシャルチャート（株価グラフ）」を配置する
まず、「ビュー１（View 1）」に対して「グリッド」をドラッグ＆ドロップで配置します。
つぎに、「ビュー２（View 2）」に対して「カテゴリーチャート（棒グラフ）」をドラッグ＆ドロップで配置します。
最後に、「ビュー３（View 3）」に対して「ファイナンシャルチャート（株価グラフ）」をドラッグ＆ドロップで配置します。
このように、App Builder を活用することで、Webアプリケーションのモックアップを、ドラッグ＆ドロップの操作のみでサクサク作ることができました。それでは完成したモックアップのプレビューを見る手順へ進みましょう。
3. 完成したWebアプリケーションのプレビューを開始する
完成したWebアプリケーションをエンドユーザーへ見ていただきたい場合に、App Builder は画面右上の「共有ボタン」を押下するだけで、クラウド保存されたプレビューを開始することができます。
実際にWebアプリケーションのプレビューを見てみよう
プレビュー
下記のプレビューは「実際に作成したWebアプリケーションのプレビュー（共有URL）」ですのでご覧ください。
もっと知りたい場合
今回のようにプレビューでURLを共有した場合、エンドユーザー側ではデザインを編集をすることはできず、プレビューの閲覧のみが許されています。この機能についてもっと知りたい場合は下記をご参照ください。
「App Builder」で「Webアプリケーション」を手早くつくろう！
「上流工程でのモックアップやプロトタイプ作成」のプロセスは、エンドユーザーとのコミュニケーションにおいて非常に重要です。顧客からのフィードバックを速くし、開発チーム内でのコミュニケーションを円滑にします。App Builder ではモックアップやプロトタイプのみならず、プロダクションコードまでを１つのプロセスで実現することができます。
Webアプリケーションの開発工数削減や開発現場のプロセス改善に、ぜひ App Builder をご活用ください！この記事が画面開発の Tips となれば幸いです。App Builder のすべての機能は無料でお試しいただけます。App Builder 無料トライアルにアクセスして、最新バージョンを入手してください。
- 「こんなことは実現できるの？」
- 「どうやって実装すれば良いの？」
といった開発上の疑問にソリューションコンサルタントが直接お答えします。
ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。
