はじめに
少し前から追加されているモダンアイコンですが、クラシックのアイコンと比較して大きく異なります。OnSelectがなく操作用としては利用できません。
そのため操作系として利用するには現状はクラシックのアイコンを利用、またはモダンボタンのアイコンのみで対応する感じです。そのあたりを軽くご紹介します。
NOTE2024/8月時点の情報のためアップデートで更新される可能性があります。ご了承ください。
公式アップデート情報のリンク集（歴史）ページを作りました
TIPS★今後さらにアップデートの予定もありますし、いままでの更新情報や今後のアップデート情報は以下のページに追記していきますので、本情報が古くなったら最新はこちらなどからご確認ください。
モダンコントロール 公式ブログの更新 履歴ページ
はじめに 本ページはPower Appsの公式ブログでモダンコントロールの更新について、1～2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。 モダンコントロールの更新があった場合に個別に記事にしていたりしますが、更新頻度も高く...
上記からも公式の更新情報ブログを確認いただけます。今回のアップデートは以下に載っています。
最新のコントロールとテーマの 2024 年 5 月の更新 |Microsoft Power Apps
公式Docsのモダンコントロールの概要は以下です。
キャンバス アプリのモダン コントロールとテーマの概要 – Power Apps |Microsoft Learn
モダンコントロールとモダンテーマをオンにする
新規作成時は以下の機能をオンにすることでモダンコントロールおよびモダンテーマが使用できるようになります。
設定＞近日公開の機能 ＞ モダンコントロールとモダンテーマ （既定でオフなのでオンにする）
詳細は以下記事に記載していますので、必要に応じてご確認ください。
モダンコントロール モダンテーマの機能オンについて
2023年からキャンバスアプリのモダンコントロールとモダンテーマが順次リリース、更新されています。 その中で本機能をオンにする箇所が変更となったり変更が都度入っています。 他の記事を書く際に都度オンにする方法を載せていたんですが、今後も変更の可能性があるのでこの部分のみ記事にしました。...
モダンアイコン
1か月？くらい前に追加された記憶のモダンアイコンです。が、大きな違いがあります。
それはOnSelectプロパティはなくあくまでデザイン用となっているという点です。
モダンコントロールを有効にすると以下のようにモダンアイコン（プレビュー）が表示されます。
初めてアプリに追加する際、クリックするとバナーで対話型ではない旨のメッセージが表示されます。
合わせてボタンコントロール（モダン）を使うように表示されています。
詳細情報をクリックしてくださいをクリックすると以下のモダンボタンコントロールのリファレンスが開きます。
Power Apps のボタンの最新のコントロール – Power Apps |マイクロソフト ラーン (microsoft.com)
モダンボタンの記事
モダンボタンで文字＋アイコンとしたりアイコンのみとしたり、色々調整する記事を以下に書いています。
合わせてご参考くださいー
はじめに 先日のモダンコントロールアップデートでボタンにアイコンが埋め込みできるようになりました！さらに境界半径も調整出来て好きな形のボタンを作れます。さらにアイコンのみにしちゃうことも可能！ということで今回はモダンコントロールのボタンの新機能についてご紹介します。 NOTE※2024/6月...
クラシックアイコンとモダンアイコンのプロパティ
左側がクラシックのアイコンのプロパティです。右側がモダンアイコンのプロパティとなります。
クラシックの方だとDisplayMode（ビュー・編集・無効）やパディング枠線などのプロパティもあります。
モダンの方はモードはビューのみのためありません。サイズと回転、あとは追加で2種の表示（枠線か背景に色付け）があるという感じでしょうか。※モダンアイコンにあるプロパティはモダンボタンにもある
モダンアイコンはあくまで見た目、装飾用という感じで、OnSeledtプロパティがなく、ホバー時の色変えなどのプロパティもありません。
アイコンの種類の比較（クラシックアイコン VS モダンアイコン・ボタン）
次にアイコンの種類の比較です。
メインどころはモダンアイコン、モダンボタン（ここは共通）で使えるようになっていて、デザインも若干おしゃれな感じになっています。
ただ、一部アイコンはモダンの方には存在していません。ここは将来的に増えていく可能性はありますね（期待）
存在していないアイコンについて使いたい場合は現状はクラシックアイコンを利用となるかと思います。
NOTE以下の比較はあくまで現時点での対応情報となります
クラシックのアイコン一覧：180種類（おそらく）
・カテゴリ別に分かれている、一部は枠線、背景に色付けの2パターンのものあり
モダンアイコンの種類（ボタンのアイコンも同様）：73種類
あらためて確認しましたが、一部クラシックで2パターンがあるものを除いても半分以下の数ですね。
あくまで現時点の種類なので今後（クラシックが使えなくなる頃など）には同様の種類が増えてくると思われます（希望）
現状はモダンアイコン、ボタンにないアイコンの場合はクラシックアイコンを使うことになりますね。
一部のアイコンでクラシックとモダンアイコン、モダンボタンで比較
以下はサンプル的にそれぞれで比較したものです。色合いはモダンテーマに沿った色となっていますが、色味が少し違いますね。
また、モダンの場合であれば枠線OR背景に色付けの2種が１つのアイコンで変更できるのでバリエーションは広がります。
モダンに存在しないアイコンはクラシックアイコンのみとなっています。
ホバー時、クリック時の色変更はクラシックではあり、かつ任意の色に調整可能です。
モダンアイコンではなしです。モダンボタンは自動で色味が変わります（色調整のプロパティは現時点なし）
モダンボタンの方はボタンの種類をPrimaryからSubtleにして背景色色付け、Primaryで枠線もあり、Secondary＋枠線で境界反映を丸形に調整などのバリエーションを作っています。
アイコンの定義が異なる（クラシックは列挙体、モダンはテキスト）
大きな違いとしてクラシックのアイコンは列挙体で定義されていますが、モダンのアイコン・ボタンの場合は文字列での指定となっています。
また同じ感じのアイコンでも名前が異なりますね。プロパティを直接書き換える場合は一旦アイコンを選択し名前を確認しての調整が必要ですね。
ツールチップのプロパティが存在しない（モダンアイコン・ボタン）
クラシックのアイコンにはヒントとしてツールチップのプロパティがあります。
アイコンのみだと分かりずらい点をツールチップで説明できますが、モダンにはこれがありません。（現時点）
この点はユーザービリティーとして結構重要かと思います。そのあたりの処理が入っているクラシックアイコンを
モダンボタンに置き換える場合は注意が必要です。
アイコンのプロパティ参照の違い：Iconプロパティ
その他の違いとしてクラシックアイコンはIconプロパティがあり、その値を参照しOnSelectの処理を変更するなどが出来ます。（例としていいねあり、なしの判定でIconを切り替える、OnSelectではSelf.Iconによって処理変更）
モダンボタンのアイコンの場合だと他からIconプロパティを参照できないため、動的にアイコン変更する場合などのアイコン種類によっての処理分けは書けないですね。まあその場合は同様の条件式を書けば調整出来るので代用は効きますね。
モダンアイコンだとIconプロパティを他から参照は可能ですが、固定なのであまり利用することはないかと思います。
おわりに
今回はモダンアイコン（プレビュー）とクラシックアイコン、モダンボタンの比較記事でした。
正直、モダンアイコンは閲覧のみなので使い道は思いつきませんね💦、基本はモダンボタンのアイコンのみへの置き換えとなるイメージです。デザインとしてはモダンボタンの方がおしゃれだと思いますし他との統一感も出来ますね！
ただ、改めて確認してみるとアイコンの種類がだいぶ少ない点やツールチップがない、Iconプロパティ参照がない点などの不足点もあるため、安易な置き換えは時期早々かなーという感触でした。今後アイコンの種類やツールチップが追加されるなどとなればモダンボタンのアイコン一択ですが、現状はクラシックアイコンとの併用がベターかなーと思いました。（2024/8月時点）
今後のさらなるアップデートにも期待しつつクラシックとモダンをうまく使い分けていきましょうー！それでは。
関連記事
モダンコントロール関連の公式ブログリンク集：
モダンコントロール 公式ブログの更新 履歴ページ
はじめに 本ページはPower Appsの公式ブログでモダンコントロールの更新について、1～2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。 モダンコントロールの更新があった場合に個別に記事にしていたりしますが、更新頻度も高く...
モダンボタン：
はじめに 先日のモダンコントロールアップデートでボタンにアイコンが埋め込みできるようになりました！さらに境界半径も調整出来て好きな形のボタンを作れます。さらにアイコンのみにしちゃうことも可能！ということで今回はモダンコントロールのボタンの新機能についてご紹介します。 NOTE※2024/6月...
モダン関連：
Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント