技術情報ブログ
Power Platform
2021.12.08

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(Power AppsやPower Automateなど)を用いてお客様の業務を自動化するご支援を数多く承っております。

業務の中で、「普段手動でやっている業務を自動化できないか」というような疑問がある場合には、お気軽にアーティサン株式会社までお問い合わせください。

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

小刀稱知哉

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

1990年4月9日生まれ

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

趣味は読書

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

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

【22年8月更新】Power Automate 初心者 ~ 中級者 向けロードマップ

2022.08.01

Excel の最新バージョン(2206(ビルド 15330.20264))で VBA が動かなくなる問題(オートメーションエラーです。エラーを特定できません)が発生しています。

2022.07.20

Power Automate 設計・構築時のTips集

人気記事ランキング
1
2020.10.02

世界に広がる Power Apps「モデル駆動型アプリ」のココがスゴイ!【第1回】

2
2021.07.14

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第2回】フロー作成でエラー発生!

3
2021.06.23

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第1回】4つのシーンごとに手法を比較、その最適解とは?

4
2021.09.03

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第8回】トリガーの条件の指定方法

5
2021.08.11

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第5回】ExcelファイルIDを動的取得

モデル駆動型アプリPower AppsSaaSMaaSPower 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マルチテナントmulti tenant乗降客カウンタードロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブDynamics 365入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限ノーコードapproval承認リマインドSetForAllUpdateContextロードマップ技術ItDXノウハウ情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイルmultiple attachment filesmailEmail承認フローtags: [SharePointimportフォームformエクスポートexportインポート]インポートカスタマイズcomponent[Power AppsダイアログコンポーネントdialogTips新機能変数検索security groupMicrosoft 365グループセキュリティグループMicrosoft 365 group一覧取得送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restore
PageTop
ページトップに戻る