はじめに

こんにちは。ヨウセイです。ワンランク上のおっさんはサイズ感をダイナミックにサクッと調整できるー！
ということで、今回はキャンバスアプリのサイズ感についてです。
※2023.4.29時点のバージョン：3.23043.16の内容で記載しています

キャンバスアプリの見た目について

そのままデフォで作っていくと、ちょっとおしゃれ感に欠けたり、サイズが微妙だったりと感じます。何個か作っていくとさらにバリエーションがなくなってきます。
社内で使う業務アプリは機能がメインなのでデザイン（見た目）は後回しになりがちな気がします。（使いやすいデザイン設計という点は重要ですが）
が、それほど時間をかけずにある程度見た目を調整できるのでそのあたりを。の第2回です。

デフォルトのサイズって

キャンバスで普通にWebアプリ用にと作っていくとタブレットレイアウトで作成すると思います。その場合は以下のような大きさになります。

アイコンとギャラリーは特にでかくない？ギャラリー3件しかでてないけども。。
日付コントロールはさらにでかい。。（個人の感想です）

コントロールのフォントサイズなどは大体以下
ボタン：15px、ラベル・入力・コンボなど：13px、日付：14px
→フォームの生成時にできるサイズも同様
アイコンは64×64のサイズ、ギャラリーはメイン20px、サブ18pxなど

最初にタブレットとあるのでタブレット操作としては大きめがいいってのがありますので、その前提なのかなーと。サイズは1366×768のサイズになってます。

タブレットやターゲットが高齢の方が多めの場合などこれくらいがよいのかと思いますが、ブラウザで使用する前提のアプリの場合は、ちょっとおおきくないかな？と個人的には感じます。スクロールせずに表示できる内容も限られてきますね。
デフォルトの設定では画面のサイズに合わせる設定になっているので、使う画面の大きさに応じておっきいのかちょうどいいのか感じ方は異なるかと思います。

DataverseforTeams版キャンバス/モデル駆動型カスタムページ
ちなみにDataverseforTeams版のキャンバスやモデル駆動型のカスタムページだと最初から10.5pxくらいの大きさになっています。また画面に合わせて倍率を調整はオフになっているのでレスポンシブな対応が前提になってます。

サイズ感としては14インチのノートや23インチ画面でも老眼のわたくしでもこれくらいがちょうどいい感じがしますｗ

画面に合わせてフィットしない設定
上記の画面に合わせて倍率を変更をオフにするとそのままのPXで表示されるので、画面の解像度によって表示されるエリアが変わってきます。1920×1080で見ると右と下が余った感じに。またフィットする設定とは違い中央にはよってくれません。
幅、縦が固定だといまいちなので、レスポンシブ対応をする感じになります。が手間ですｗなので通常はデフォの画面にフィットする設定のままがいいかなと思います。

★レスポンシブに関連した記事は以前書いてますのでご参考ください。

モダンコントロールの対応状況
さらにキャンバスのモダンコントロールにおいてはサイズのプロパティがない?(いまのところか？）ようで調整が出来ない感じです。サイズ感は10.5pxくらいの感じですね。※さすがにサイズも調整できないとちょっと、、今後のアップデートで調整できるようになることに期待
カレンダーは圧倒的に小さく見やすいのでこっちが好みですね。DataverseforTeams版もこれですね。
比較

各サイズの調整

自分はWebブラウザで利用する前提のアプリの作成が主で、そのままだと大きく感じるので、大体各コントロールのサイズ、フォントサイズを小さく調整します。
14px → 10．5pxや11pxくらい。ギャラリーもそれぞれ小さく調整します。複数のコントロールを選択して一括で変更も可能です。

※11pxくらいにした例

これらは大した手間じゃないのでいいんですが（同じ種類は一個作ってコピーすればいいので）、面倒なのはフォームです。フォーム作ると何個ものデータカード、その配下のコントロールが大体同じ13,14pxでできてて、全部調整してくのがダルイです。。各カード配下にコントロールがあるので一括で同じコントロールを選んでの調整も出来ません。
前の記事でも書いた方法として、変数で各プロパティのサイズとか用意しておいて各コントロールのプロパティに定義していけば一括の変更も可能ではありますが、最初にこの数をやるのかと思うと重い腰が沈み込みます。

※入力系コントロール以外にも列ラベルやエラーメッセージ、高さの調整も必要

そこで編み出したアクロバティックな技を紹介します。

画面サイズを変えてしまおう！

1366×768で13pxとかを10．5pxに小さくするんなら、親を大きくしちゃえばいいじゃん！と思い、その昔に1920×1080にしてみました。

★注意点　片方ずつしか変更できず、適用を押すと裏で勝手に今のフォントサイズとか割合に応じて調整されます。そのため小数点含むサイズになってしまうなど影響があるので変なことになったら戻せるように事前に保存しておきましょう。最初に変更してからコントロールを追加するのをお勧めします。

1920×1080に変更しました。そうするとどうでしょう。こんな感じになります。

1366×768以上の部分が余ってますね！そして相対的に各コントロールが小さくなっています。
※ただ幅が固定値に変わっていたりしたので、今回は最初から追加しなおしました。やはり最初の段階で調整しておくのがよさそうです。

このサイズ感ならそのままでよさげです。ギャラリーもそのままでも表示領域が増えてます。もう少し小さく調整もできますね。アイコンももう少し小さいのが好み。
フォームにおいてはひとつづつサイズ調整する手間が省けて最高です。カレンダーもちょうどよく感じます。

これをベースに組み立てていけばPCで使用するWebブラウザ前提のサイズ感としてはちょうどいいかなと思います。

注意：モダンコントロール
さらに小さくなってしまったのでこれらを使う場合はデフォ（1366×768）のままがいいと思います。めちゃ小さい。しかも現状サイズプロパティがないから大きくもできない。

おわりに

今回は自分の感覚で調整面倒だったので楽にする方法でしたが、同じようにサイズ調整に手間がかかるわー（というより実際に工数がかかる）と思い、しぶしぶそのまま作ったり、しぶしぶ調整されている方も結構多いのではと思います。
そんな場合はこういった時短できる調整方法もあるんだーと参考になれば幸いです。
※数十ならまだしも数百列あるフォームを考えると断然楽になりますね。

次はモダンコントロール、DataverseforTeams版キャンバス、モデル駆動型カスタムページ、さらにモデル駆動型の新しい見た目についてなど書いてみようかと。
※MSがロードマップでかなり前から言っているように、最終的にこれらは統一される予定と思います。最近の新しいコントロールリリース系はそれが近づいているのを感じます。Copilotでの自動作成なんかも新しいコントロールとなるんだろうなと。ただキャンバスアプリの自由度の高いコントロールはぜひ後世まで残してほしい。。