【ワンランク上のPower Apps】 デザイン（見た目）：アプリ種類のコントロール事情

# はじめに
こんにちは。ヨウセイです。ワンランク上のおっさんはウィットに富んだスピーチでアプリの種類によって異なる見ためやコントロールを語ることが出来るー！
ということで、今回はアプリの種類ごとの見た目についてです。
※働くおっさん劇場久しぶりに見よー

※2023.4.29時点のバージョン：3.23043.16の内容で記載しています

# キャンバスアプリの見た目について
前回キャンバスアプリのテーマやサイズについて書きました。
今回、最近登場したモダンコントロール（プレビュー中）と、以前からあるDataverse for Teams版のコントロール、モデル駆動型のカスタムページ、さらにモデル駆動型にも来た新しい見た目（フォーム）について、2023年4月末時点の状況と自分が知る限りの歴史の変動（大げさ）をお伝えしようと思います。

https://qiita.com/youseibubu/items/746192e561489f1e2d0c

https://qiita.com/youseibubu/items/96c8d5aafb99ddbd1a2e

# アプリの種類って
元々キャンバスアプリ、モデル駆動型アプリ、ポータルアプリ（今のPower Pages)の3種類が大きくあり、そこにDataverse for Teams版のキャンバスアプリ、モデル駆動型アプリへ統合できるキャンバスアプリとしてカスタムページが加わったイメージです。

+ キャンバスアプリ
  └Dataverse for Teams版キャンバスアプリが追加
+ モデル駆動型アプリ
  └カスタムページが追加
+ Power Pages（旧Power Apps Portal）
　※こちらはキャンバスとはだいぶ違います。外部展開向けのアプリで裏はDataverseを利用した仕組み

# Fluent UI コントロール
・キャンバスアプリのモダンコントロール（プレビュー）
・Dataverse for Teams版キャンバスアプリのコントロール
・モデル駆動型のカスタムページのコントロール
・モデル駆動型の新しい見た目のフォームコントロール（プレビュー）

これらはいずれもFluent UI コントロールと言われるものです。
Fluent UI コントロールがどういったものかは公式をご参照ください。
自分もそこまで理解してないですが、Microsoftが提唱する「Fluent Design System」に基づいて、アクセシビリティで自然で各デバイス、各アプリケーションで統一感のあるデザインってことでしょうか（自信なし）

https://www.microsoft.com/design/fluent/

以前の資料では今後デザイナーやアプリを統合していく動きと記憶しているので、今後はどんどんとひとつに統合されていくんだろうと思われます。

# Dataverse for Teams版
最初に来たのはDataverse for Teams版のキャンバスアプリでした。

https://powerapps.microsoft.com/ja-jp/blog/modern-fluent-ui-controls-in-power-apps-preview/

ブログだと2020年9月にプレビューとなってます。当時のブログより抜粋
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/00a30e17-5276-5add-67ee-3cb227551a33.png)
この際に通常のキャンバスアプリとTeams版とで見た目が異なる別ルートが出来た感じでした。Teamsをベースにした青紫っぽい感じですね。フォントサイズも10.5pxくらい
ただ、ほかでも書いてますが、FluentUIコントロールは従来より設定できるプロパティが少ないので自由度を求めてクラシックコントロール（キャンバスアプリのもの）を一部使ったりしました（今も）
※ラベルは背景なしボタンのテキストは改行効かないなど細かな点
ただカレンダーコントロールはこっちがスマートなので逆に普通のキャンバスにこっちからコピペして使うなどもやったり。

Teams版のFluentUIコントロール使い方は以下参照 従来コントロールのプロパティの違いなども記載あり

https://learn.microsoft.com/ja-jp/power-apps/teams/use-the-fluent-ui-controls

★今見たら以前あった「クラシックコントロールを有効にする」が設定から無くなってていました。。（3.23043.16で確認）
キャンバスから貼り付けての利用はできたので一応使えそうですが、基本は非推奨な感じなんであろうと思われる。。

# モデル駆動型カスタムページ
続いて、モデル駆動型でもカスタムページとしてキャンバスアプリ相当のアプリが作れるようになりました。2021年7月頃。以下は当時のブログです。

https://powerapps.microsoft.com/ja-jp/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/dabfbd9d-52ab-b8e2-3279-8c692bc6ebab.png)

モデル駆動型アプリを共有できていればカスタムページの個別の共有は不要です。また、ライセンス的にもモデル駆動アプリ分のみでOKなので、モデル駆動型＋キャンバスアプリと2つのアプリを作るよりコスト面でも優秀です。
カスタムページが来る以前はキャンバスアプリをモデル駆動型のフォームに埋め込むことで統合が出来ました。今も出来ますが、MSとしてはカスタムページを推奨しているようです。

**カスタムページサンプル**
現在はプレビュー当時よりさらに作りやすくなっています。
・モデル駆動型デザイナーアプリでカスタムページを選択。新規または既存のページから選択する。
・空からの作成も可能。データありからデータソースを選択すると以下のように1枚のテンプレートを自動作成してくれる。サクッと左ギャラリー、→フォームの画面が作れちゃいます。
★この機能はDataverse for Teams版でも同様にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/329c71a8-aca2-c41d-021b-22bc5b8ed3e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/b2372a4b-dc22-a359-09b7-c40774bd8088.png)
自分の場合はこのまま使うことはないので、大体空の状態から作成しています。Teams版とおおよそ同等だと思いますが、ボタンの基本カラーや入力コントロールなどがデザイン異なりますね。日付コントロールは同じ。個人的にはキャンバスに近いのでそれほど違いなく作れる感じです（よりカスタムしたい場合はクラシックを使っていたが現在はTeams版同様にでてこない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/76fc8e53-756b-730e-dccb-80bdbb66a2e3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/4a8ac3f9-3700-3cb7-89ff-195d647005ab.png)
★ちなみにDataverse for Teams版とカスタムページともにモダンコントロールを試すをオンにしても現状は何も出てきません。すでにFluentUIコントロールだからかと思われます。
★ちなみにDataverse for Teams版とカスタムページともにデフォルトでは画面にフィットしない設定となっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/f302e650-9d2b-65f0-85d9-ab0b22392d06.png)

# モデル駆動型の新しい外観（プレビュー）
最近ですが、2023年2月に以下の公開がありました。
モデル駆動型 Power Apps の新しい外観がプレビューで利用可能になりました。

https://powerapps.microsoft.com/en-us/blog/the-new-look-for-model-driven-power-apps-is-available-now-in-preview/

https://learn.microsoft.com/ja-jp/power-apps/user/modern-fluent-design

ビューについても変更されてますが、フォーム部分にフューチャーして、
以下が見た目です。これらはカスタムするものではなく、列を作ってフォームを作ると標準でこれになる。という感じです。
※ついでのビジネスプロセスフロー（BPF）も薄青い色になってます。今後はこの薄い青がデフォルトカラーになるんだろうと予想
→見た感じはTeams版の入力フォームと似てますね。入力コントロールは選択すると下に青下線が付くのでその点もTeams版同様です。

※ちなみにモデル駆動型のフォームはレスポンシブ対応になっていて、表示領域が足りないと自動で4列→1列構成になってくれたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/77d04425-f0eb-0d8e-59f2-4f8334bf452a.png)
★この機能はアプリ単位で有効化できます。現在プレビューなので上記ブログの内容に沿って機能をオンにすると（数十分反映に時間かかりますが）確認いただけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/310e0719-b89d-4b6d-d09f-5b6a5b4744cc.png)

# キャンバスアプリのモダンコントロール
そして今回プレビューされたのが通常のキャンバスアプリにもFluent UIコントロールがついに来たーというものです。

https://powerapps.microsoft.com/en-us/blog/modern-controls-coming-to-canvas-apps/

https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/overview-modern-controls

ブログ掲載の従来とモダンの比較
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249807/2986853b-0026-ac74-0a41-f9c1b6686411.png)

こちらについては以下記事で紹介されているのがわかりやすかったですのでご参考ください。

https://qiita.com/Takashi_Masumori/items/ae700eeb59ee54ca6bbc

細かく比較していないので何とも言えませんが、見た感じモデル駆動型の新しい外観のフォームと同じに見えますねー。

★現状はプレビュー中ということもありテーマ変更への対応やサイズ調整などはできないようです。今後機能、種類ともに増えてくるとあるので期待して待ちましょう。

# おわりに
数年ですが振り返ると同じキャンバスアプリのカテゴリでも色々と違いがありますね。現時点はこのような感じで入り混じってますが、後々そんな時代もあーったねとー思い出すのかと。
今後はアプリの見た目やデザイナーなど統合されていくんだと思います。（たぶん）
Copilotで自動作成されるのもおそらくは新しい見た目になるんじゃなかろうかと予想
統一されたUIになればそれぞれの違いを覚えることもないし、デザイン性をあまり意識せずにサクッと自然な統一感のあるものが作れるのだと思います。ただ、今のキャンバスアプリのコントロールはクラシックでもいいから残してほしいと切実に願う。。