Power Appsのレスポンシブ対応｜スマホで崩れる原因と式が消える落とし穴
PCで作ったPower Appsのアプリを、スマホで開いたら文字が巨大になっていた——あるいは、余白ばかりで中身が小さい。これはバグではなく、既定の動作です。
Power Appsは初期状態で「作った画面をそのまま拡大縮小する」ようになっています。レスポンシブにするには設定を変え、式を書く必要があります。この記事では、その手順と実務で必ずぶつかる2つの落とし穴を解説します。
なぜスマホで崩れるのか
原因は「全体表示（画面に合わせて拡大縮小）」という設定です。これは既定でオンになっています。
この設定がオンだと、アプリは作成時に決めた画面の形をそのまま保ったまま、拡大・縮小されます。写真を引き伸ばすのと同じで、画面が広くなっても表示できる情報量は増えません。
Microsoftの公式ドキュメントにも、こう書かれています。携帯電話向けに設計したアプリを大きなブラウザーで開くと「そのスペースを補うようにアプリのサイズが調整されるので、大きすぎるように見える」と。
つまり「崩れている」のではなく、設計どおりに引き伸ばされているだけです。
レスポンシブ化の3ステップ
ステップ1｜「全体表示」をオフにする
すべてはここから始まります。設定 → 表示から「全体表示」をオフにします。
このとき「縦横比を固定」も自動的にオフになります。特定の画面の形に合わせて設計する必要がなくなるためです。
ただしこれだけではレスポンシブになりません。オフにした時点では、単に「拡大縮小されなくなった」だけです。ここから式を書く作業が必要になります。
ステップ2｜位置とサイズを式で書く
レスポンシブ対応の本体はここです。コントロールの位置とサイズを、固定値ではなく式で指定します。
| やりたいこと | プロパティ | 式 |
|---|---|---|
| 画面いっぱいに広げる | Width / Height | Parent.Width / Parent.Height |
| 画面の上半分に置く | Height | Parent.Height / 2 |
| 左右に余白Nを取る | X / Width | N / Parent.Width - (N * 2) |
| 水平方向の中央に置く | X | (Parent.Width - C.Width) / 2 |
| 別の部品Dの下に置く | Y | D.Y + D.Height + N |
ポイントは「他のものを基準にする」ことです。画面の幅を基準にする、隣の部品の位置を基準にする——こうしておけば、画面サイズが変わっても関係が保たれます。
とくに有効なのが部品どうしを連鎖させる書き方です。上のコントロールの高さを変えるだけで、下のコントロールが自動的に移動してサイズも変わる、という状態を作れます。
ステップ3｜コンテナでまとめる
部品が増えると、式の管理が大変になります。そこでコンテナーを使います。
ヘッダーのように「複数の部品がひとかたまりで動く」箇所は、コンテナーに入れておきます。すると中の部品はコンテナーを基準に配置でき、コンテナーの位置を変えるだけで中身がまとめて動きます。
さらに自動レイアウトコンテナーを使うと、中の部品にXやYを設定する必要すらなくなります。コンテナーが子要素の配置を決めてくれるためです。
落とし穴①｜ドラッグすると式が消える
これが最大の罠です。公式ドキュメントに明記されています。
「コントロールの X、Y、幅、高さプロパティに数式を記述した後、キャンバスエディターでコントロールをドラッグした場合、数式は定数値で上書きされます」
せっかく Parent.Width と書いても、その部品をマウスで少し動かした瞬間、式が消えて「640」のような固定値に変わります。しかも警告は出ません。
気づかないまま公開して、スマホで見たら崩れている——原因はこれであることが非常に多いです。
式を書いたコントロールは、以後ドラッグしない。位置を変えたいときは、式そのものを書き換える。これを徹底する必要があります。
落とし穴②｜エディタ上では確認できない
もうひとつ、公式に明記されている制限です。
「作成キャンバスは、作成されたサイズ計算式に応答しません」——つまり編集画面でウィンドウサイズを変えても、レスポンシブの動作は確認できません。
公式が案内している確認方法は次のとおりです。
- アプリを保存して公開する
- 実際のデバイス、またはブラウザーのウィンドウで開く
- サイズや向きを変えて確認する
「作りながら確認する」ができないため、公開して確認し、直してまた公開する、という往復が発生します。これを知らないと、編集画面で完璧に見えるものを作り込んでしまい、公開後に大幅なやり直しになります。
画面サイズで表示を変える
サイズに応じてレイアウトそのものを切り替えたい場合は、ブレークポイントを使います。
| 定数 | 値 | 想定デバイス |
|---|---|---|
| ScreenSize.Small | 1 | スマートフォン |
| ScreenSize.Medium | 2 | タブレット（縦） |
| ScreenSize.Large | 3 | タブレット（横） |
| ScreenSize.ExtraLarge | 4 | デスクトップ |
たとえばスマホでは特定の部品を隠すなら、Visibleプロパティにこう書きます。
Parent.Size >= ScreenSize.Medium
境界となる幅はSizeBreakpointsで決まっており、既定値はタブレット・Web向けアプリで [600, 900, 1200]、電話向けアプリで [1200, 1800, 2400] です（電話向けは座標が2倍になるため）。この値は変更できます。
向きの変更に対応する
スマホを横に倒したときの動作も、既定のままでは不自然になることがあります。公式が示している対処は、画面のWidth/Heightをこう書き換える方法です。
Width = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
これは縦向きか横向きかを判定して、基準値を入れ替える式です。あわせて画面のOrientationプロパティを使えば、縦のときは上下に並べ、横のときは左右に並べるといった切り替えもできます。
作り始める前に決めておくこと
- 誰がどの端末で使うか——スマホ専用なら「電話」レイアウトで作るほうが早い。PC中心なら「タブレット」
- 本当にレスポンシブが必要か——用途が固定なら、素直にその端末に合わせて作るほうが工数は少ない
- 式を書く覚悟があるか——レスポンシブ対応は、ドラッグでレイアウトする手軽さを捨てることを意味します
すべてのアプリをレスポンシブにする必要はありません。現場でスマホからのみ使うアプリなら、電話レイアウトで作り込むほうが確実です。Teamsに置いて使う場合も、利用端末が想定できるなら固定レイアウトで十分なことがあります。
よくある質問
Q. 作成時に選んだ「タブレット」「電話」は後から変えられますか？
作成時の選択が、キャンバスのサイズと形の基準になります。レイアウトを大きく変える必要が出た場合、作り直しになることがあります。だからこそ使う端末を先に決めておくことが重要です。
Q. 式を書いたのにレイアウトが崩れます
ドラッグで式が上書きされていないか確認してください。コントロールをマウスで動かすと、X・Y・幅・高さの式は固定値に置き換わります。プロパティの値を直接確認するのが確実です。
Q. 編集画面では正しく見えるのに、公開すると崩れます
編集画面はレスポンシブの式に反応しません。これは公式に記載されている制限です。確認は必ず公開後に、実際のデバイスやブラウザーで行ってください。
Q. コンテナーは必ず使うべきですか？
必須ではありませんが、部品が増えるほど有利になります。とくに自動レイアウトコンテナーを使えば、中の部品の位置指定が不要になり、式の量を減らせます。
Q. スマホとPCで別々のアプリを作るのはダメですか？
現実的な選択肢のひとつです。レスポンシブ対応には相応の手間がかかるため、用途が明確に分かれているなら、それぞれに最適化したアプリを作るほうが結果的に早い場合があります。
まとめ
- スマホで崩れる原因は「全体表示」が既定でオンだから。設計どおり引き伸ばされている
- レスポンシブ化は①全体表示をオフ ②位置とサイズを式で書く ③コンテナーでまとめるの3ステップ
- 最大の罠はドラッグ——式を書いた部品をマウスで動かすと、式が固定値に上書きされる（警告なし）
- 編集画面ではレスポンシブを確認できない。公開して実機やブラウザーで確かめる必要がある
- レイアウト自体を切り替えるならScreenSizeとSizeBreakpointsを使う
- すべてのアプリをレスポンシブにする必要はない。用途が固定なら固定レイアウトのほうが確実
アプリの作成手順はキャンバスアプリの作り方入門、Power Apps全体の位置づけはPower Appsとはをご覧ください。
参考・出典
- キャンバス アプリのレスポンシブ レイアウトの作成（Microsoft Learn）――全体表示の無効化、Parent演算子による式、ドラッグによる上書き、エディタの制限、ScreenSizeとSizeBreakpoints
- 画面のサイズと表示方向の変更（Microsoft Learn）
