[基本] 画面分割する時に使うPower Appsのテンプレート

画面分割することのメリット

Webシステムの開発では、ワンカラムといった言葉が使われ、カラムは分割の個数を意味します。
例えば、このWebサイトは、サイト全体を見た時にシリーズ一覧のサイドバーと、コンテンツのメインエリアの2カラムで構成されています。
さらには、サイトタイトルのあるヘッダー、クレジット表記のあるフッターもあり、複数の分割がされています。
このメリットは、分割した画面ごとに大まかに役割を持たせることができる点にあります。

Tips: 画面分割をせずにアプリを作ると、画面遷移が多くなります。

テンプレート「空」

テンプレート「空」は、分割しないケースや、一から画面を構成する時に使います。
テンプレートを選択後、「データあり」と「レイアウトあり」を選択でき、データの場合はデータソースを選びます。
レイアウトの場合、他のテンプレートのいずれかを選択することができます。
もちろん、左メニューから「挿入」を選択し、任意のコントロールも配置できます。

テンプレート「分割画面」

テンプレート「分割画面」は二分割されたテンプレートです。
情報が左から右に展開したり、詳細になったりするケース、あるいは左右で比較する時に有効です。
このレイアウトは、縦に二分割しているため、PCでは見栄えが良いですが、スマートフォンで使う場合は難易度が上がります。

テンプレート「分割画面」の作りは、水平コンテナ内に垂直コンテナが2つ並べられたものです。
水平コンテナのディスプレイ>両端揃え（水平方向）、あるいは配置（垂直方向）の設定で、2つの垂直コンテナの配置やサイズを変えられます。
　※コンテナのWidthやHeightで調整も可能

Tips: コンテナ内にコンテナを作る方法は便利です。水平コンテナ>垂直コンテナ>水平コンテナ>垂直コンテナ>水平コンテナ>といったように、階層化することで縦横のレイアウトを楽に決められます。

テンプレート「サイドバー」

テンプレート「サイドバー」は、このWebサイトのように、メニューとコンテンツがあるような構成に向いています。
ヘッダーもあるため、例えば、商品やプロジェクトの具体的なページに使えます。
スマートフォンで使う場合は、二分割と同様、難易度が上がります。

Tips: そもそも、スマホ向けアプリは画面の構成上、二分割やサイドバーありきのデザインはメジャーではありません。裏を返せば、スマホ向けに使わないアプリなら、これらは存分に使えます。

テンプレート「サイドバー」の作りは、グリッドコンテナ内に、水平コンテナのヘッダー、垂直コンテナのサイドバーとメインがあります。
グリッド（格子）コンテナは、水平/垂直よりも自由度の高いコンテナで、行列を使って各コンポーネントを制御します。
その中のヘッダーとサイドバー、メインは、両端揃え（水平方向）や配置（垂直方向）を使い、それらの中でコントロールの配置を制御します。

テンプレート「ヘッダーとフッター」

テンプレート「ヘッダーとフッター」は、上中下の構成を持ったスクリーンです。
ヘッダーとメイン、フッターの組み合わせなので、とても使いやすいと思います。
例えば、アプリの最初の画面で使う場合、ヘッダーにアプリ名、メインに各スクリーンへのボタン入口、フッターにクレジットや問い合わせ先、といった作り方が可能です。
スマートフォンで見た時も、違和感なく使えます。

テンプレート「ヘッダーとフッター」の作りは、垂直コンテナの中に、ヘッダーとフッターが水平コンテナ、メインが垂直コンテナで作られています。
ヘッダーとフッターが水平コンテナということは、テキストラベルやボタンを置くと、自動的に左から詰めていきます（ツリービューのコントロールの上下順に従う）。
メインにおいても、コントロールの順番で上下に配置が可能で、これを左右にしたい場合は垂直コンテナを水平コンテナに置き換えれば対応可能です。