クラウド型ビジュアルUIエディタ「Indigo.Design App Builder」でローコード開発 #2レイアウトを理解してログインページを作成する

f:id:cleverdog:20210520094828p:plain

こんにちは、ソリューションコンサルタントの中江です。本記事ではインフラジスティックスのクラウド型ビジュアルUIエディタ「Indigo.Design App Builder」を利用してローコード開発を行う方法についてご説明します。連載形式となっておりますので #1 から確認いただくことをおすすめします。

「Indigo.Design App Builder」でローコード開発記事一覧

Indigo.Design App Builder は「Design to Code」をコンセプトにしたプロダクト

本記事では Indigo.Design App Builder でローコード開発を行う際に理解が必要となるレイアウトの仕様に関して解説しますが、まずは前提となる製品コンセプトを見ていきましょう。

Indigo.Design App Builder にはローコード開発ソリューションとして「Design to Code（デザインから開発まで）」をワンストップで行うというコンセプトがあります。ビジュアルUIエディタで組み立てたデザインを最終的にはウェブアプリケーションのソースコードとして出力するため、WEB開発における CSS の Flex レイアウトの考えを基本としてアプリケーションを構築していきます。この点が慣れていない方にとっては少しわかりにくいポイントになると思いますので詳しく説明していきます。

▽Design to Code ソリューションの Indigo.Design App Builder

Flex レイアウト

Flex レイアウトの基本は、あるコンテナに対して、行（水平）方向にコンポーネントを配置するか、列（垂直）方向にコンポーネントを配置するかの指定です。入れ子構造で組み合わせることで、複雑なレイアウト表現も実現することができます。

▽行レイアウト（Row layout）：水色のコンテナに対して中身のコンポーネントが水平方向に並ぶ

▽列レイアウト（Column layout）：水色のコンテナに対して中身のコンポーネントが垂直方向に並ぶ

▽入れ子構造の例：赤枠の列レイアウトコンテナを、オレンジ枠の行レイアウトコンテナが内包している

このようにレイアウトの方向を設定し、更に上下左右のアラインメント設定や余白の設定を行うことで細かなレイアウトの調整が可能になります。実際にレイアウトの調整を行いながらログイン画面を作成してみましょう。

ログイン画面を作成する

コンテナを配置し、レイアウトを設定する

前回の記事で作成した Home というマスタービューにログイン画面を構成していきます。ビュータブで Home ビューを選択した状態で右側のプロパティパネルを確認します。ビュー自体もひとつのコンテナとして Flex レイアウトの定義がされていますので、プロパティパネルで方向などを指定することができます。以下のように方向は初期値の row のままで、縦・横配置を Center に指定しました。これでこのビューに配置したコンポーネントが上下左右に対して中央に位置するようになります。