コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

【Power Apps】レスポンシブ レイアウトを試してみる~その1~

Power Apps

スポンサードリンク

はじめに

Power Apps で、キャンバスアプリを構築する際、最初にアプリをスマホ用のサイズにするか、PC / タブレット用のサイズに調整するかを指定するかと思います。
この選択によってアプリのサイズが決定されます。

しかし、よくあるWEB サイトのようにPC / タブレットで利用する場合は、PC / タブレットのサイズ、レイアウトで利用でき、スマホで確認する場合はスマホのサイズ、レイアウトで利用できるようにしたいという要望もあるかと思います。

これを実現するのが、レスポンシブ レイアウトの設定です。

参考文献

機能を理解するにあたり、参考となった文献は以下です。

Power Apps の設定を変更する

Power Apps でアプリを構築した際、初期設定ではアプリをレスポンシブにするための設定がなされておらず、また画面の向きもロックされてしまっています。

f:id:koruneko:20210418033732p:plain

これらの設定をオフにして、アプリをレスポンシブ対応にします。

ファイル > 設定 > 画面のサイズと向き
より、

  • 画面に合わせて倍率を変更
  • 向きをロックする

の設定をオフにします。

f:id:koruneko:20210418034227p:plain

"画面に合わせて倍率を変更"をオフにすると、"縦横比をロックする"も自動でオフになります。("画面に合わせて倍率を変更"をオフにすると、"縦横比をロックする"をオンにすることはできません。)

設定したら忘れずに"適用"を行います。

画面の幅 / 高さについて

Power Apps で画面の幅 / 高さを取得するための式は大きく分けて以下の3つがあります。

  • ユーザの現在の画面のサイズ
  • アプリ構築自に設定された画面サイズ
  • アプリに設定されている最小画面サイズ

それぞれ実際の数式で表すと以下のようになります。

種類 数式
ユーザの現在の画面の幅 App.Width
ユーザの現在の画面の高さ App.Height
アプリ構築時に設定された画面の幅 App.DesignWidth
アプリ構築時に設定された画面の高さ App.DesignHeight
アプリに設定されている最小画面幅 App.MinScreenWidth
アプリに設定されている最小画面高さ App.MinScreenHeight

これらの特性を理解したうえでコントロールのサイズや座標を動的に設定しましょう。

動的にレイアウトを設定する。がいまいちピンとこない方は、公式docs のキャンバス アプリのレスポンシブ レイアウトの作成 - 動的なレイアウトに数式を使用するセクションを参照してください。

余談ですが、この動的レイアウトの設定はレスポンシブなアプリを作成しないときでも常に意識して設定しておくと、見た目もきっちり揃って綺麗にみえるだけでなく、メンテナンスも行いやすくなるのでおすすめです。
* きちんと意味を持たせた式にすること

カスタムブレークポイント

画面のサイズは、画面の幅をアプリの SizeBreakpoints プロパティの値と比較することにより計算することが可能です 。

このプロパティはPC 用に作成されたアプリの場合、 SizeBreakpoints プロパティの既定値は [600, 900, 1200] になります。
スマホ用に作成されたアプリの場合、規定値は [1200, 1800, 2400] になります。

詳しくは以下公式docs をご覧ください。
キャンバス アプリのレスポンシブ レイアウトの作成 - カスタム ブレークポイント

SizeBreakpoints プロパティと画面幅を比較することで、現在のアプリがどのサイズであるか判定する式を設定します。
ラベルを配置して、 Text に以下式を設定します。

BreakPointsLabel.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"
)

この値を参照することで、文字サイズなどを決定することが可能です。

コンテナを利用する

Power Apps には一連のコントロールを保持するための"コンテナー"というプロパティが存在します。
このコンテナーには大きく分けて3つのタイプが存在します。

  • 水平コンテナー
    このコンテナ内に配置された子要素は、水平方向に配置されます。
  • 垂直コンテナー
    このコンテナ内に配置された子要素は、垂直方向に配置されます。
  • コンテナー
    このコンテナ内に配置された子要素は、自由に要素を配置することができます。

今回は画面サイズに合わせてコンテナのサイズも可変としますので、水平コンテナーと垂直コンテナーを利用します。

コンテナに似た機能として、グループというものがあります。
しかし、こちらのグループではアプリのレイアウトに影響を与えませんので注意が必要です。

コンテナーを配置する

それでは早速コンテナーを画面内に配置していきますが、"挿入"リボンの"入力"からでは、"コンテナー"だけで、"水平コンテナー"と"垂直コンテナー"が見当たりません。

f:id:koruneko:20210418150401p:plain

現時点では、"水平コンテナー"と"垂直コンテナー"を利用したい場合は、画面左の挿入(+マーク)の"レイアウト"より選択する必要があるようですので注意が必要です。

f:id:koruneko:20210418150514p:plain

ヘッダを作成する

水平コンテナーを配置して、以下プロパティを変更します。

コンテナーの範囲が分かりやすいようにコンテナーの塗りつぶしを以下に設定します。

headContainer.Fill

CornflowerBlue

コンテナーのサイズや座標の設定です。
画面サイズが変わったときにレイアウトがおかしくなったりしないように数値を直接指定するような設定は避けましょう。

HeaderContainer.X

0

HeaderContainer.Y

0

HeaderContainer.Width

Parent.Width

HeaderContainer.Height

Parent.Height * 0.15

水平方向の両端揃えの定義です。
以下ですと、”間のスペース”となり、コンテナー内のコントロールが順番に左端、右端、左端...と配置されます。

HeaderContainer.LayoutJustifyContent

LayoutJustifyContent.SpaceBetween

垂直方向の配置設定です。
以下ですと中央揃えとなります。

HeaderContainer.LayoutAlignItems

LayoutAlignItems.Center

コンテナー内に、以下のようにコントロールを配置します。

完成イメージは以下のようにしたいので、

f:id:koruneko:20210418233855p:plain

コントロールの配置の順番は以下と同様にしてください。

f:id:koruneko:20210418232937p:plain

それぞれのコントロールの高さ( Height )は、親コントロールと揃えて

Height

Parent.Height

に設定します。

ラベルのフォントサイズ( Size )は、画面サイズに合わせて可変としたいので、

Size

Switch(
    BreakPointsLabel.Text,
    "Small", 8,
    "Medium", 12,
    "Large", 16,
    20
)

に設定します。

次に、それぞれのコントロールの幅の設定です。

ProfileImage は高さと同値としたいため、

ProfileImage.Width

Self.Height

とします。

NameLabel は TitleLabel を中心にもってくるために、
PageNameLabel の幅 = NameLabel の幅 + ProfileImage の幅
となるように設定します。

NameLabel.Width

PageNameLabel.Width - ProfileImage.Width

残る、 PageNameLabel と TitleLabel の設定ですが、これらは、残りのコンポーネントの余白分だけのスペースを割り当てるように設定します。
上記の設定は FillPortions で実現できます。

docs.microsoft.com

PageNameLabel.FillPortions

1

TitleLabel.FillPortions

3

上記のように設定することで、以下のようになります。

PageNameLabel
f:id:koruneko:20210419000302p:plain

TitleLabel
f:id:koruneko:20210419000316p:plain

次回は

長くなりそうなので一旦ここまで。
次回はBody 部分の作成を行っていこうと思いますー。


スポンサードリンク