技術情報ブログ
Power Platform
2021.12.08

Power AppsアプリをPCとスマホで操作したい時の対応方針

Power AppsアプリをPCとスマホで操作したい時の対応方針

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

Power Appsにてアプリを作成する際、PCとスマホの両方で操作したいと要望されたことはありませんか?
本記事では、上記要望の対応方針について説明します。

 

標準でのレスポンシブデザイン対応有無

Power Appsには「Dataverse for Teams」「ポータル」「モデル駆動型アプリ」「キャンバス アプリ」の4種類があります。

この中でも、Dataverse for Teamsポータルモデル駆動型アプリは、標準でレスポンシブデザインに対応しています。

よってこの3種類に関しては、アプリを作成すると、そのままPCとスマホに適したレイアウトにて操作することができます。
一方、標準でレスポンシブデザインに対応していないキャンバス アプリを用いる場合は、別途対応方針を検討する必要があります。

 

標準でのレスポンシブデザイン対応有無

Dataverse for Teams

ポータル

モデル駆動型アプリ

キャンバス アプリ

×
(別途検討が必要)

PCとスマホでの表示(Dataverse for Teams)

Dataverse for Teamsのレスポンシブデザイン

PCとスマホでの表示(ポータル)

ポータルのレスポンシブデザイン

PCとスマホでの表示(モデル駆動型アプリ)

モデル駆動型アプリのレスポンシブデザイン

以下では、キャンバス アプリにて、PCとスマホの両方で操作する場合の対応方針について説明します。

 

PCとスマホで操作したい時の対応方針(キャンバス アプリの場合)

キャンバス アプリのレイアウト

まず初めに、キャンバス アプリのレイアウトについて説明します。

キャンバス アプリの作成画面では、最初にレイアウト(タブレット or 電話)を選択することで、 それぞれに適したレイアウトがデフォルト値として設定されます。

レイアウト選択

タブレットを選択した場合(向き:横、サイズ:16:9)

タブレットのレイアウト

電話を選択した場合(向き:縦)

電話のレイアウト

 

PCとスマホで操作したい時の対応方針

キャンバス アプリにて、PCとスマホの両方で操作したい場合は、以下の3つの対応方法があります。

タブレット版・電話版をそれぞれ作成し、PCではタブレット版・スマホでは電話版を操作

メリット

メリットとしては、PCとスマホでそれぞれに適したレイアウトにて表示できる点です。
また、レスポンシブデザインに対応する必要がないので、作成の難易度は低いです。

デメリット

一方デメリットとしては、修正コストが大きい点です。
機能追加やバグ修正などがある場合、2つのアプリをそれぞれ修正し、整合性を図る必要があります。

電話版のみ作成し、PCとスマホで電話版を操作

メリット

メリットとしては、電話版のアプリを1つ作成するのみで対応できるため、修正コストが小さいことが挙げられます。
また、レスポンシブデザインに対応する必要がないので、作成の難易度が低いです。

デメリット

一方デメリットとしては、PCで操作するための最適なレイアウトとなっていないことです。

PCで電話版のアプリを表示した際のイメージを以下に示します。
左右の余白が大きく、1画面あたりの情報量が少なくなってしまいます。

スマホ版をPCで操作
スマホ版をPCで操作

1つのアプリをレスポンシブデザインにて作成し、PCとスマホで操作

メリット

メリットとしては、PCとスマホでそれぞれに適したレイアウトにて表示できる点です。
また、アプリを1つ作成するのみで対応できるため、修正コストが小さいことが挙げられます。

デメリット

一方デメリットとしては、レスポンシブデザインに対応したアプリを作成する必要があるため、作成の難易度が高いことです。

レスポンシブデザインに対応したキャンバス アプリの作成方法については、以下を参照ください。
レスポンシブなキャンバス アプリの構築
キャンバス アプリのレスポンシブ レイアウトの作成

 

まとめ

対応方針とメリット・デメリットを以下にまとめました。

 

対応方針

メリット

デメリット

Dataverse
for Teams

標準でレスポンシブデザインに対応

ポータル

標準でレスポンシブデザインに対応

モデル駆動型アプリ

標準でレスポンシブデザインに対応

キャンバス アプリ

タブレット版・電話版をそれぞれ作成

PC/スマホに適したレイアウトにて操作できる
作成難易度が低い

修正コストが大きい(2つのアプリを修正)

 

電話版のみ作成

作成難易度が低い
修正コストが小さい(1つのアプリのみ修正)

PCに適したレイアウトになっていない

 

レスポンシブデザインにて作成

PC/スマホに適したレイアウトにて操作できる
修正コストが小さい(1つのアプリのみ修正)

作成難易度が高い

本記事では、Power Appsにてアプリを作成する際、PCとスマホの両方で操作する場合の対応方針について説明しました。
参考としていただければ幸いです。

最後まで読んでいただき、ありがとうございました!

 

 

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

小刀稱知哉

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

1990年生まれ

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

趣味は読書

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

持ってる資格はPL-200/PL-300/PL-400/MS-700/AZ-104/AZ-305

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

非エンジニア【(元)自治体職員】がローコード開発をして気が付いたこと コーディング規約とPower Platformプレミアムサンプルアプリ集

2024.05.01

Power Apps・Power Automateの勉強方法(2)

2024.04.17

Power Apps・Power Automateの勉強方法(1)

2024.04.03

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

2024.03.27

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

モデル駆動型アプリ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
ページトップに戻る