はじめに
この記事はシリーズとしては、
【Power Apps】レスポンシブ レイアウトを試してみる~その1~
【Power Apps】レスポンシブ レイアウトを試してみる~その2~
の続きとなりますが、上記記事をみていなくても問題のない内容となっています。
今回はこれまで作成してきたレスポンシブ レイアウトをテンプレートを用いて簡単に作成していこうと思います。
前提条件
【Power Apps】レスポンシブ レイアウトを試してみる~その1~でも紹介しましたが、改めて解説します。
Power Apps の設定を変更する
Power Apps でアプリを構築した際、初期設定ではアプリをレスポンシブにするための設定がなされておらず、また画面の向きもロックされてしまっています。
これらの設定をオフにして、アプリをレスポンシブ対応にします。
ファイル > 設定 > 画面のサイズと向き
より、
- 画面に合わせて倍率を変更
- 向きをロックする
の設定をオフにします。
"画面に合わせて倍率を変更"をオフにすると、"縦横比をロックする"も自動でオフになります。("画面に合わせて倍率を変更"をオフにすると、"縦横比をロックする"をオンにすることはできません。)
設定したら忘れずに"適用"を行います。
テンプレートを確認する
ホーム > 新しい画面 から追加可能なスクリーンを確認してみます。
すると、現時点(2021/4/30)では、以下14個の選択肢があることがわかります。
今回紹介するのは、赤枠で囲った
- 分割画面
- サイドバー
- ヘッダー、メインセクション、フッター
の3種です。
これらは、コンテナーを利用して作成されています。
分割画面
分割画面は以下のように、水平コンテナの中に垂直コンテナが2つ含まれている構成となっています。
このデザインを利用することで、例えば以下のように左の項目で選択したアイテムの詳細を右に表示する。といった画面を作成することできます。
サイドバー
サイドバーは以下のように、水平コンテナの中に垂直コンテナが2つあり、2つめの垂直コンテナ(右側)のコンテナには水平コンテナと垂直コンテナが存在するとい構成となっています。
それぞれのコンテナに設定されている比率( FillPortions )は以下のように設定されています。
SidebarContainer : RightSideContainer = 3: 7
HeaderContainer : MainSelectionContainer = 0 : 1
HeaderContainer には FillPortions が設定されておりませんので注意が必要です。
このデザインを利用することで以下のようなデザインの画面が作成可能です。
MainSelectionContainer には以下のように"スクロール可能"画面より、 Convas をコピペしてきて貼り付けてあげるといい感じの画面が作成できそうです。
ヘッダー、メインセクション、フッター
ヘッダー、メインセクション、フッターは以下のように垂直コンテナ内に水平コンテナ、垂直コンテナ、水平コンテナの順で構成されています。
こちらのコンテナにはMainSelectionContainer のみ FillPortions が 1 に設定されており、他は0(設定なし)となっています。
高さ( Height )はHeaderContainer と FooterContainer それぞれ 75 に設定されています。
こちらのデザインは小林 竜也 さんの「Power Appsのレスポンシブレイアウトをやってみた」シリーズ
Power Appsのレスポンシブレイアウトをやってみた ～準備編～
Power Appsのレスポンシブレイアウトをやってみた ～コンテナ解説編～
Power Appsのレスポンシブレイアウトをやってみた ～ヘッダー解説編～
（最終回）Power Appsのレスポンシブレイアウトをやってみた ～入力フォーム解説編～
で作成されていたような画面が作成できますね。
Power Appsのレスポンシブレイアウト、ようやく思うような知見を得られたので、ブログ書くかー！
— koby@フロッグポッドエンジニア募集中 (@rockfun) February 7, 2021
長かったなぁー#PowerApps #レスポンシブレイアウト pic.twitter.com/FVQjttYWpN
おわり
以上でPower Apps でのレスポンシブ レイアウトの作成方法紹介のシリーズは終了です。
自分でコンテナ設置した、色々やる作成方法もいいですが、開発時間の短縮や、一般的に利用されているようなレイアウトのサンプルを用いることによってユーザービリティを上げるという観点から今回紹介したテンプレートを用いることも選択肢の1つとしてありなのではないでしょうか。
