スマホ対応 レスポンシブ レイアウト　その①

POINTこちらの記事はQiita記事のリライト版です。※重複している箇所がありますがご容赦ください。

はじめに

こんにちわ。ヨウセイです。本記事は以前Qiitaに投稿したものを最近のアップデートや追加のTipsなどを加えリライトした記事になります。
今回は以前に自社アプリをレスポンシブレイアウトでモバイル対応した際の実装をベースに、レスポンシブレイアウトについての情報やTipsなどを掲載しています。
その①ではWeb版とモバイル版を作るパターンやレスポンシブの概要、導入部分を掲載しています。

YouTube でも動画公開しました

実装サンプル

Web版、スマホ版アプリの作成パターン

アプリ作成時はWeb版（PC/タブレット用）とスマホ版（スマホアプリ用）をどう作るか？作らないかのパターンがいろいろあると思います。

④‐2を追加。レスポンシブにしない画面2つを1アプリで作るパターンです。

パターンについての個人的見解

PC版のみ、スマホ版のみがメインなら1つ作ればOKですね。PC版レイアウトをスマホで横で使ってもらえればある程度代用はできます。
PCもスマホもそれぞれ必要となると、③の2つ作るのが手っ取り早いケースが多い気がします。
※M365ライセンス範囲なら問題ないが有償ライセンス版なら2アプリ分ライセンスが発生するのでケースバイケース

さらに④‐2のように1アプリ上にPCとモバイル用画面を作って切り替えてもらう方法もあります。ただし画面数が多かったりするとアプリ分けたほうが楽かもしれません。またSaveDataなどを活用して、開いていた画面を記憶、自動で開くなどの工夫もあったほうがいいと思います。

⑤のようにレスポンシブ対応して1アプリ同画面で完結させれば、修正時に1か所で済むメリットがありますが、慣れてないと初動に結構時間がかかってしまうかなと。難易度は一番高いです。

通常はデフォルトの設定が画面にフィットする設定なので、好きな位置にコントロールを配置すればいいですが、レスポンシブの場合は各所で動的なレイアウト調整が必要になります。
今は水平、垂直コンテナーやアプリの画面レイアウトが使えて、いい具合に配置もできるようにもなっています。これらをうまく使えればスムーズかもしれません。

POINT現在は新しい自動生成アプリも水平、垂直コンテナーを使ったレスポンシブレイアウトでアプリが生成されるようになっています。今後より一般的になるのかもですね。

この辺の公式情報はこちら。
https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/build-responsive-apps
https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-responsive-layout

自分的には③の別アプリで2つ作るか、レスポンシブ対応としても④や④‐2のサイズによって画面を分けて作るほうが作成時はだいぶ楽かなーというイメージです。軽いレスポンシブ（横幅を動的に伸ばす程度）や自動生成アプリと同様の感じであれば大したことないですが、サイズや配置場所、表示非表示を切り替えるなど様々対応する場合は、Web版とスマホ版を同画面で作るのは結構つらいです。

Dataverse for Teams版アプリでの実装

今回対応したのはDataverseforTeamsで作った自社で使用中の経費精算アプリです。

★DataverseforTeamsはTeams上で使う前提なのでスマホ版Teamsアプリは横表示してくれません（2023年6月時点）　
そのためこの際は①のWeb版だけ作ってスマホは横で使っての方針が取れませんでした。
元々横幅広げる程度のレスポンシブ対応は入れてましたが、スマホは「対象外です。PCでやってください。」というラベルのみの画面に遷移させてました。2年ほど経ちやはりスマホ版も欲しいとなり、④のアプリで画面を分ける（画面サイズ判定し遷移する画面を切り分ける）方針で、そのままスマホ画面を追加することにしました。

レスポンシブ対応設定・画面サイズ判定

まずはアプリをレスポンシブ対応にします。
設定＞表示で「画面に合わせて倍率を変更」をオフにします。縦横比も自動でオフになります。
※既定ではオン、縦横比をロックもオンなので自動で画面サイズに拡大縮小してくれるアプリになります。
向きのロックはスマホ、タブレット用の設定です。今回はTeams上で表示のみとなり縦固定なのでどちらでも影響なしとなります。

ブレークポイントについて

Appにはブレークポイントが最初から設定されています。カスタムも可能ですが通常はそのままでよいかと。
上記の自動拡大をオフにすると画面のサイズプロパティを使っての判定が可能となります。幅が600以下だとSmallとなります。
今回は最初の画面遷移の判定くらいしか利用してませんが、画面内でブレークポイントに応じたコントロール調整（サイズや表示など切り替える）が可能です。

例：　If(App.ActiveScreen.Size = Small,Navigate(mobileScreen))　みたいな感じ

・AppのSizeBreakPoints

・ScreenSize 型



詳細はこちらをご参照ください
https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-responsive-layout#screen-sizes-and-breakpoints

画面の幅、高さについて

Max(App.Width, App.MinScreenWidth) となり、アプリの最小（320）か画面サイズの大きなほうという感じですね。レスポンシブでない場合は作成時のレイアウトに沿ったサイズ内容になります（横：16：9なら1366とか）
※参考のリンク先には画面の幅、高さにはDesignWidth、DesignHeightが設定とあり、以前はそうだった記憶ですがいまは使われれてないようです。

・スクリーンのWitdhとHeightの既定の設定値

画面判定・切り分け（切り分け用スタート画面の追加）

次にブラウザのサイズに応じて遷移先を切り替えるのですが、まずApp.OnStart内では「App.ActiveScreen.Size = Small」での判定は取れません。画面がまだ決まってない段階だからでしょう。
また最近ではOnStartでのNavigateは廃止予定でStartScreenで画面切り分けを推奨されてます。
ただし今回はApp.OnStart内で初期設定で各種変数設定もしていて、それらを使用しての切り分けもあるため、StartScreenでは変数が使えないのでこれもやめました。
今回は初期表示用の画面を用意してその中で初期化、画面判定の処理を追加することで対応しました。

NOTE現在（2023年6月時点）ではOnStartは既定でオンになっています。不評だったのでしょうか。ただしOnStartでのNavigateは推奨されないのは変わらないため上記のような対応やStartScreenでの切り分けがよいと思われます。

初期画面（ScreenLoading）の追加

ScreenLoading画面として一番上に画面を追加。ヘッダーとローディングのみを表示

OnVisibleの処理

★OnVisible内でのNavigateも使えません！
次にOnVisibleに初期化処理を書くのですが、そのままNavigateが書けません。以下のようなエラーとなります。ので、非表示ボタンを用意してSelectさせてNavigateを動かす技を使って実装しています。

OnStartに書いてあった初期化の処理と、以下の画面サイズ判定を追加し、その後にNavigateを書いてあるコントロールをSelectして実行させる。

// スクリーンサイズで割り振り、管理者はAdmin画面へ
Set(StartMode,If(App.ActiveScreen.Size = Small,2,o365user.userPrincipalName in ManagersUPN.UPN,1,0));
Select(NaviFunk);

NaviFunkボタンの処理

OnVisibleで判定したStartModeに応じて各画面へNavigateする

// 画面サイズ幅が600以下なら2の判定となり、スマホ用画面へ、管理者だったら管理画面へ、それ以外はメインのWeb版ユーザー登録画面へ
If(StartMode=0,Navigate(MainScreen),StartMode=1,Navigate(AdminScreen),StartMode=2,Navigate(MobileScreen))

NOTEこの処理を入れた場合の注意点として、編集画面上でこの画面を開こうとすると他画面へNavigateされてしまうため画面の編集が出来なくなります。この解消方法は別途記事にしようと思います。

遷移するか確認

この段階で動作確認をやります。普通のアプリならブラウザで調整して確認可能ですが、Teams版なので発行して実機で試す必要がありました。。めんどいがしょうがなし。
・最初に追加した画面が開きローディング、しばらくしたらデバイスに応じた画面に遷移する

無事、スマホ版画面へ遷移しました。非対応とありますね（笑）
ブラウザ版でも試して想定通りか確認しましょう。

おわりに

POINT現在は編集画面のプレビューでタブレット、モバイルのプレビューができるようになったので、楽に状態の確認ができるようになり、かなり便利になりました！
作成中はプレビューで確認し、ポイントポイントで公開、実機で確認を行うのが良いと思います。

その②に続きます。

2023.07.05

スマホ対応 レスポンシブ レイアウト　その②

POINTこちらの記事はQiita記事のリライト版です。はじめにこんにちわ。ヨウセイです。本記事は以前Qiitaに投稿したものを最近のアップデートや追加のTipsなどを加えリライトした記事になります。※重複している箇所がありますがご容赦ください。今回は以前に自社アプ...