この記事の3行要約
- Power Appsのキャンバスアプリは標準機能では「レスポンシブ レイアウト」に対応していない
- 全4回連載の第1回として、レスポンシブ対応アプリを作成するための事前準備を解説
- 事前準備は「画面に合わせて倍率を変更」「向きをロックする」設定のオフと、各画面のWidthをApp.DesignWidthの数式に変更する2ステップ
レスポンシブ対応のアプリ設計でお困りの際は、以下の支援サービスもご参考にしてください。
こんにちは。アーティサン株式会社の小刀稱（ことね）です。
小刀稱 知哉ことね ともや
得意領域
Power PlatformやSharePointを中心に設計・開発・アドバイス・教育まで幅広く担当しています。内製化をご希望の場合はお気軽にお問い合わせください！
保有資格
Power Appsはブラウザで動作するアプリのため、PC・スマホで操作することが可能です。
しかし、１つのアプリでPC・スマホの両方に対応するには「レスポンシブ レイアウト」という考え方で、アプリを設計する必要があります。
Power Appsのいくつかの種類では、標準でレスポンシブ レイアウトに対応しておりますが、キャンバスアプリでは非対応です。
※詳細は以下URLを参照してください。
そこで今回は、Power Apps キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針についてまとめてみました。
Power Appsでアプリを作成している方に向けた内容となっています。
また、難易度としては中級者向けとなっています。
※本記事を読む前に、先程紹介した記事（Power AppsアプリをPCとスマホで操作したい時の対応方針）を一読していただければ幸いです。
事前準備
設定を変更する
各画面のWidthを変更する
設定を変更する
アプリの設定→表示→画面に合わせて倍率を変更をオフにします。
※上記をオフにすると、自動的に「縦横比をロックする」もオフになります。
こちらの設定をオフにすることで、ブラウザの表示幅によってアプリ内の各パーツが拡大・縮小しなくなります。
また、同じくアプリの設定→表示→向きをロックするもオフにします。
各画面のWidthを変更する
各画面（Screen）のWidthを以下に変更します。
Screen.Width
Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
上記の関数を説明簡単に説明します。
App.Widthはアプリの幅（=ブラウザの幅）を表します。
また、App.DesignWidthは、アプリ設定画面で設定した幅を表します。
※App.Widthはブラウザのサイズによって、値は変動します。
一方、App.DesignWidthは設定画面で設定した値が固定で格納されています。
上記の数式は、ブラウザの幅が高さよりも小さいか (縦向き)、または高さより大きいか (横向き) に基づいて、画面のWidthの値を切り替えます。
これを設定することで、スマホの縦向きや横向きに対応する事が可能です。
詳細については、以下を参照してください。
キャンバス アプリのレスポンシブ レイアウトの作成
おわりに
本日はここまで。
今回は、キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針という内容で、 アプリの事前準備の箇所まで説明させていただきました。
次回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、具体的に説明していきます。
ここまで読んでくださり、ありがとうございます。
【このシリーズの過去回一覧】
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第1回｜事前準備と設定変更・Width数式の基本
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第2回｜垂直コンテナーで縦の位置関係を固定する方法
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第3回｜横の位置関係を画面幅で可変させる方法（水平コンテナーの折り返し設定）
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第4回｜水平コンテナーで横の位置関係を固定する方法【完結編】
Power Appsの内製化・アプリ設計についてさらに詳しく知りたい方は、以下のサービスもご覧ください。