技術情報ブログ
Power Platform
2023.03.03

Power Apps:キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(1)

Power Apps:キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(1)
小刀稱知哉

こんにちは。アーティサン株式会社の小刀稱(ことね)です。

Power Appsはブラウザで動作するアプリのため、PC・スマホで操作することが可能です。

しかし、1つのアプリで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))
Power Apps キャンバスアプリの各画面のWidth
各画面のWidth

上記の関数を説明簡単に説明します。

App.Widthはアプリの幅(=ブラウザの幅)を表します。
また、App.DesignWidthは、アプリ設定画面で設定した幅を表します。

※App.Widthはブラウザのサイズによって、値は変動します。
一方、App.DesignWidthは設定画面で設定した値が固定で格納されています。

App.WidthとApp.DesignWidthの違い
App.WidthとApp.DesignWidthの違い

上記の数式は、ブラウザの幅が高さよりも小さいか (縦向き)、または高さより大きいか (横向き) に基づいて、画面のWidthの値を切り替えます。
これを設定することで、スマホの縦向きや横向きに対応する事が可能です。

詳細については、以下を参照してください。
キャンバス アプリのレスポンシブ レイアウトの作成

 

おわりに

本日はここまで。

今回は、キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針という内容で、 アプリの事前準備の箇所まで説明させていただきました。

次回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、具体的に説明していきます。

ここまで読んでくださり、ありがとうございます。

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

大分県出身(温泉大好き♥♥)、現在は東京都在住

1990年4月9日生まれ

30才にしてメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当しております!

シェアする
記事カテゴリ
最新記事
2024.04.03

非エンジニア【(元)自治体職員】が半年間ローコード開発をしてみたら

2024.03.27

Power Automateのベストプラクティス・アンチパターン(5)【Apply to each×コンカレンシー×変数の設定はNG】

2024.03.20

Power Apps×Teams:Teams上からPower Appsを実行する方法

2024.03.13

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう

2024.03.06

SharePointのあったらいいなを集めました(X-SPのご紹介)

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeamsローコード開発非エンジニア体験談
PageTop
ページトップに戻る