Power Apps キャンバス コンテナで簡単レスポンシブ 実用編（サクッとLT）

＼サクッとLT／ POWER APPS キャンバス コンテナで簡単レスポンシブ実用編 2023-06-22 MakotoMaeda

はじめまして！ Power Apps 大好きおじさんです。 まえださん、もしくはおうじゃさんとお呼びください。 おじさんでもいいです。 Twitter：Makoto Maeda（@bothernpa）さん / Twitter ブログ：Power Appsの使い方 (hateblo.jp) コミュニティ：おうじゃさんといっしょ - connpass #おうじゃさんといっしょ

• https://twitter.com/bothernpa
• https://zezeze.hateblo.jp/
• https://oujasan-to-issho.connpass.com/

こんなことあるよね スマホとPCで使いたい！ ♪

こんなことあるよね レスポンシブさせよう。 ♪

こんなことあるよね でも、難しそう・・・ ・・・

コンテナ使うといいよ！ （２回目）

ひとくち概要 今回はレスポンシブアプリの実例をご紹介します！ コンテナでレスポンシブに作ってみました。

機能概要 ３つの画面のあるアプリ。会社と担当者を一緒に保存できます。 ・開始画面 ・取引先企業フォーム ・取引先担当者フォーム 画面イメージは次へ。

画面構成（縦）

画面構成（横）

画面構成（コンテナ）

画面構成（コンテナ）

画面構成（コンテナ）

画面構成（コンテナ）

TIPS

アプリの領域が画面にフィットするよう設定 設定変更 画面に合わせて倍率を変更 オフ

横並びで切り替え要素を配置 水平コンテナ内にそれぞれのステップの画面要素（コンテナ）を配置しています。 非表示

ステップ要素のコンテナは変数で表示/非表示を切り替え スタート画面.Visible = locStep = 0 取引先企業フォーム画面.Visible = locStep >= 1 取引先担当者フォーム画面.Visible = locStep = 2

親コンテナにフィットさせる LayoutAlignItems = LayoutAlignItems.Stretch

比率を崩したくないので、最小幅は小さく設定 LayoutMinWidth = 1 または LayoutMinHeight = 1

まとめ Visible や LayoutDirectionを動的に切り替えてレスポンシブさせよう！ 必要に応じて高さや幅、割合も変えられます！ ※コストが増すので、やりすぎ注意。 コンテナでレスポンシブやってみよう！