Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@rockfun

Power Appsのレスポンシブレイアウトをやってみた ~コンテナ解説編~

レスポンシブレイアウトを作成していきましょう。

今回は各コンテナーの画面サイズに合わせた制御方法を具体的にしていきます。
前回ブログのアプリ設定を行わないとレスポンシブレイアウトに出来ませんので、Power Appsのレスポンシブレイアウトをやってみた ~準備編~を確認してから、下記設定をおこなってください

完成した動画はこちらです。
https://youtu.be/jrLtI4fYW-o

全体像を把握

レスポンシブレイアウトに対応した画面を作成する場合には、コンテナーを入れ子にして組み合わせていきます。
image.png

私のやりたかったレスポンシブレイアウトは、

上部にHeaderContainer(青)

中央にBodyContainer(水色)
BodyContainer内部にContainerを4つ配置して、SizeBreakpoints(※1)により明示的に幅を可変させます。

下部にFooterContainer(赤)

これらをアプリの表示幅に合わせて伸縮させることでした。

(※1)SizeBreakpointsとは、「App」が持っているアプリ幅の規定値のプロパティで、
タブレットサイズで作成した場合、0-600pixがSmall、600-900pixがMeidum、900-1200pixがLarge、それ以上がExtraLareと設定されています。
image.png

SizeBreakpointsを表示するテキストラベルを作成する

このSizeBreakpointsに応じて、明示的にサイズや表示・非表示を制御するので、BreakpointsTextという名前のラベルを作成し、アプリ幅を取得して今がどのサイズに該当するのか(Small、Mediumなど)文字表示させます。
image.png
まず画面のどこでも構いませんので、ラベルを配置してTextプロパティに下記スクリプトを記述します。
If(
App.Width<=First(App.SizeBreakpoints).Value,"Small",
App.Width<=Last(FirstN(App.SizeBreakpoints,2)).Value,"Medium",
App.Width<=Last(FirstN(App.SizeBreakpoints,3)).Value,"Large",
"Extra Large"
)

この状態でアプリのプレビュー(F5)を行い、ブラウザのウィンドウ幅を可変させると表示される文字が変わると思います。

Screen1を可変するように設定

image.png
Screen1の下記プロパティを設定します。
Height:Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Width:Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

外部コンテナーを配置

コンテナーは置いただけでは伸縮しませんので、設定をしていきます。
image.png
Screen1に、


HeaderContainerという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
X:0
Y:0
Height:100
Width:App.Width
Fill:RGBA(56, 96, 178, 1)
※App.Widthはアプリの幅を取得しますので、Widthに設定することによりアプリの幅に合わせてコンテナー幅が伸縮するようになります。
レスポンシブを確認しやすくするためにFillで背景を青にしています。


BodyContainerという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
X:0
Y(※1):HeaderContainer.Height
Height(※2):(App.Height-HeaderContainer.Height)-FooterContainer.Height
Width:App.Width
Fill:RGBA(204, 231, 246, 1)
(※1)HeaderContainerのY座標をBodyContainerのY座標に指定することで、高さが可変してもすぐ下に配置されます。
(※2)BodyContainerは高さも伸縮しますので、アプリの高さからヘッダーの高さとフッタの高さを引いた値が指定されるようにしています。FooterContainerを画面に配置しないとエラー表示になりますが、この時点では無視してください。
レスポンシブを確認しやすくするためにFillで背景を水色にしています。


FooterContainerという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
X:0
Y(※3):App.Height-FooterContainer.Height
Height:100
Width:App.Width
Fill:RGBA(172, 62, 11, 1)
(※3)アプリの高さからFooterContainerの高さを引いた値を指定することで、高さが可変しても画面下部の固定された位置に配置されます。レスポンシブを確認しやすくするためにFillで背景を赤色にしています。

BodyContainer内部にコンテナーを配置

image.png
4つのコンテナーをSizeBreakTextの値で、Large以上であれば4列、Mediumなら2列、Smallなら1列に制御します。ここでのSmallはスマホサイズ、Mediumはタブレット、LargeやExtraLargeはブラウザを想定しています。


・1つ目InputContainerNameという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
FillPortions(※1):1
LayoutMinWidth(※2):Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)
Fill:RGBA(187, 221, 140, 1)
(※1)1を指定することで幅が伸縮可能になります。
(※2)コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small(スマホサイズ)だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium(タブレット)だったらアプリの幅を2で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定し、コントロールしています。

☆さらにコンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
image.png
Text:"InputContainerName" & InputContainerName.Width
FillPortions:1


,以下は、1つ目同様に残り3つのコンテナーを作成していきます。


・2つ目InputContainerAddressという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
FillPortions(※1):1
LayoutMinWidth(※2):Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)
Fill:RGBA(250, 155, 112, 1)
(※1)1を指定することで幅が伸縮可能になります。
(※2)コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small(スマホサイズ)だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium(タブレット)だったらアプリの幅を2で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定

コンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text:"InputContainerAddress" & InputContainerAddress.Width
FillPortions:1


・3つ目InputContainerTelという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
FillPortions(※1):1
LayoutMinWidth(※2):Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)
Fill:RGBA(203, 102, 102, 1)
(※1)1を指定することで幅が伸縮可能になります。
(※2)コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small(スマホサイズ)だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium(タブレット)だったらアプリの幅を2で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定

コンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text:"InputContainerTel" & InputContainerTel.Width
FillPortions:1


・4つ目InputContainerFaxという名前で「水平コンテナー」を配置して、下記プロパティに値をセット
FillPortions(※1):1
LayoutMinWidth(※2):Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)
Fill:RGBA(136, 160, 209, 1)
(※1)1を指定することで幅が伸縮可能になります。
(※2)コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small(スマホサイズ)だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium(タブレット)だったらアプリの幅を2で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定

コンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text:"InputContainerFax" & InputContainerFax.Width
FillPortions:1


以上で、すべてのコンテナー設定が完了しました。
アプリのプレビューで横幅を変えてみて、実際に幅に応じてレイアウトが可変するか試してみてください。

次回以降は、コンテナ内に各コントロールを設置して、具体的なアプリの形にしていきたいと思います。

長文ですが、読んでいただいて、ありがとうございました。

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
rockfun
株式会社フロッグポッド 代表取締役 ゴルフとサッカーと音楽と映画と娘と息子をこよなく愛する47歳 エンジニアの方で転職希望の方、社長直接面談します。ものづくりが好きで、お客様と共に成長出来る方。ご連絡をお待ちしております!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?