Power Apps モダンコントロールを使ってみた

Power Apps
Power Apps モダンコントロールを使ってみた!
この記事は約4分で読めます。

こんにちは、今回はPower Appsに新たに追加されたモダンコントロールを実際に使ってみた感想と、クラシックコントロールとの違いについて解説を行いたいと思います。
※便宜上クラシックデザイン・モダンデザインと呼称しますが、実際の名称とは異なることを御了承ください。

モダンテーマを利用可能にする方法

モダンテーマを利用可能にするにはアプリの設定を変更します。
デフォルトでは”Off”になっているモダンコントロールとモダンテーマを”On”にするだけです。
モダンテーマを利用可能にすると、編集画面左のメニューアイコンにテーマアイコンが追加され、利用できるコントロールにモダンコントロールが追加されます。

クラシックデザイン

クラシックデザイン時の設定
クラシックデザインのメニューアイコン

モダンデザイン適用

モダンデザイン時の設定
モダンデザイン適用後のメニューアイコン

クラシックデザインとモダンデザインの違い

モダンコントロールの使用を可能にすることでコントロールのデザインに関する設定項目が変更になった他、以下の変更点が確認できました。

  1. テーマテンプレートが利用できる
  2. テーマテンプレートによってデザインが統一される
  3. 設定項目が最低限に縮小された
  4. 配置など設定項目がCSSの設定値となった
  5. コントロール自体のDOM構造がFlexコンテナーの入れ子になった

モダンデザインでの追加・変更点

モダンデザインで追加されたコントロール

以下はモダンデザインで新たに追加となったコントロールです。
使い方などは徐々に解説していこうと思います。

クラシックデザインから変更があるコントロール

  • スライダー
  • ボタン
  • コンボボックス
  • チェックボックス
  • テキスト
  • テキスト入力
  • ドロップダウン
  • フォーム
  • ラジオ
  • 数値入力
  • 切り替え
  • 日付の選択

コントロール設定項目の変更

モダンデザインではテーマと連携し、コントロールのタイポグラフィーやカラーなどの基本スタイルが自動で適用されます、この連携機能により、個別の設定が不要になりコントロール配置のストレスが大幅に軽減されます。
またコントロールに対するこれらのスタイル設定は、個別に設定することも可能です。

クラシックコントロール

クラシックデザイン、テキストラベルのプロパティ
Labelのプロパティ

モダンコントロール

モダンデザイン、テキストのプロパティ
TextCanvasのプロパティ

モダンコントロールの設定項目

モダンコントロールの設定項目は大きく4つの項目に限定され、基本スタイルはテーマに依存するようになりました。以下に各項目の概要を記します。

項目名概要
Generalコントロール固有の設定を行う
Behaviorコントロールの動作設定を行う
Size and positionコントロールの位置と大きさの設定を行う
Style and Themeテーマとは異なる設置を行う
モダンコントロールの設定

モダンデザインを活用するメリット・デメリット

メリット

私個人の主観ですが、モダンデザインを有効にしてモダンコントロールを活用することで、アプリ全体の見た目を容易に統一化できることが一番の利点だと思います。
そのほかに設定項目が減ることで、その他のカスタマイズに注力することが出来るため、開発期間の大幅な短縮にもつながると思います。

デメリット

プレビュー版であるため細かな変更点が生じる可能性があること以外は特にありません。

まとめ

今回は、モダンデザインに関する概要に焦点を絞り紹介させていただきました。
普段業務に使用する小規模なアプリであれば自身で比較的簡単に構築が可能となっていますが、Power Appsは日々進化し続けています。今回紹介したモダンデザインもプレビュー版となっていますので、この記事を投稿した直後に変更になっているかもしれませんが、大きく変更されるということは無いと思いますので、是非ともこの記事を参考にモダンデザインを活用していただきたいと思います。
既にクラシックデザインで構築済みの場合はコントロールの入れ替えに手間がかかるため再構築にかかわるコストとの相談になるかと思いますが、新規に構築する場合はモダンデザインでの構築を強くお勧めします・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次回は、モダンデザインで追加になったコントロール数点を使用例を交えて紹介したいと思います。

この記事を書いた人

岩本敏彦
タイトルとURLをコピーしました