PowerApps│モダンボタンコントロールの使い方

こんにちは、あんこ先生です。

ボタンって、アプリに必ずひとつは置きますよね。

でも最近のPowerApps、ちょっとこじゃれたボタンが出てきませんか？

「これ、いつものボタンと何が違うの？」となった方も多いのではないでしょうか。

そこで、今回はモダンボタンコントロールの使い方をまとめてみました。

この記事を読み終えると、モダンボタンコントロールの主要プロパティ（Text・OnSelect・Appearance）を押さえて、見た目とアクションをサッと設定できるようになります。

ついでに、Fluentアイコンの入れ方と、クラシックボタンコントロールとの違いもまるっと分かります。

例によってコピペで試せるコードも置いておきますね。

〈この記事の前提〉
モダンコントロールが使える環境（おおむね有効化済みのテナント）。
もし挿入メニューに「モダン」のボタンが出てこないときは、設定 →「全般」または「今後の機能」の中にある 「最新のコントロールとテーマ」 のトグルをオンにします。
環境によってメニュー名が違うことがあるので、迷ったらモダンコントロールの概要（公式）をのぞいてみてくださいね。

おしながき

1 モダンボタンコントロールとは
2 おおまかな流れ
3 押さえるのは3つのプロパティだけ
4 ボタンにアイコンを入れてみる
5 クラシックボタンとの違い
6 コピペで試せるサンプル
7 モダンボタンコントロールのまとめ

モダンボタンコントロールとは

ひらたく言うと、Fluentデザインに合わせて見た目をきれいに整えてくれる、新世代のボタンです。

ざっくり言うと、やることはクラシックのボタンコントロールと同じ。

ボタンに文字を出して、押されたら何かをする。

その「中身」は同じなのですが、見た目の作り込みをテーマ（Fluent）が肩代わりしてくれるのが大きな違いです。

ボタンコントロールは本当に使う最低限抑えておくべきコントロール８選にも入る基本中の基本なので、ここでモダン版に乗り換えておくのもいいですね。

おおまかな流れ

難しいことはなくて、3ステップで完成します。

STEP1：モダンのボタンを画面に置く。
STEP2：Text に表示する文字を、OnSelect に押したときの動きを書く。
STEP3：Appearance で見た目を選び、必要ならアイコンを足す。

ひとつずつ確認していきますね。

押さえるのは3つのプロパティだけ

モダンボタンも、結局のところ主役は3つです。

Text ― ボタンに出す文字

ボタンに表示するラベルですね。

直接打ち込んでもいいですし、数式で動的に変えることもできます。

//固定の文字を出す
"保存"

//入力値とくっつけて出す（ボタンに「保存：七草あんこ」のように表示される）
"保存：" & User().FullName

OnSelect ― 押したときの動き

ボタンの本体ともいえるプロパティで、押された瞬間に動かす処理を書きます。

キーボードでフォーカスして Enter や Space を押したときにも動いてくれる、地味にうれしい子です。

よく使うパターンをまとめておきますね。

//別の画面に移動する
Navigate(DetailsScreen, ScreenTransition.Fade)

//フォームを送信して、成功通知を出す
SubmitForm(Form1); Notify("保存しました！", NotificationType.Success)

//変数のオン・オフを切り替える（表示の出し分けなどに）
Set(IsVisible, !IsVisible)

//確認ダイアログを出して、OKならレコードを消す
If(
    Confirm("このアイテムを削除しますか？"),
    Remove(Collection1, ThisItem)
)

フォーム送信とセットで使うことが多いので、フォームコントロールの使い方とあわせて覚えると一気に実戦的になりますよ。

Appearance ― 見た目を「選ぶだけ」

ここがモダンボタンの一番のキモです。

色を一つひとつ設定しなくても、Appearance で見た目のスタイルを選ぶだけで、テーマに合った配色にしてくれます。

値	どんな見た目か
`ButtonAppearance.Primary`	ブランド色で塗りつぶし。一番目立つ。既定値。
`ButtonAppearance.Secondary`	控えめな塗り。二番手のボタンに。
`ButtonAppearance.Outline`	背景なしで枠線だけ。
`ButtonAppearance.Subtle`	枠も塗りもなし、最小限。
`ButtonAppearance.Transparent`	ほぼ透明。背景になじませたいとき。

//主役のボタンはPrimary、キャンセルなど脇役はOutlineにすると並びがきれい
ButtonAppearance.Primary

ひとことメモ 公式では「プライマリは左、セカンダリは右」に置くのがおすすめとされています。「保存」と「キャンセル」を並べるときの定番ですね。

ボタンにアイコンを入れてみる

モダンボタンになって個人的に一番うれしいのが、Fluentアイコンが内蔵されたことです。

クラシックのころは、アイコンを付けたいとアイコン用のコントロールを別で重ねていたんですよね。

それがプロパティ一発で済むようになりました。

コードで設定するのもいいけど、プロパティペインのドロップダウンから選ぶのがかんたんです。

//Iconにアイコン名を入れるだけ（"Save" "Add" "Delete" など）
Icon: "Save"

//Layoutでテキストとの位置関係を決める
Layout: ButtonLayout.IconBefore   //テキストの左（既定）
//ButtonLayout.IconAfter         //テキストの右
//ButtonLayout.IconOnly          //アイコンだけ（文字なし）

アイコンだけのボタン（IconOnly）にするときは、直観的にわかるものかラベルを添えておくと親切です。

ここが個人的におもしろい IconStyle（塗りつぶし／アウトライン）や IconRotation（回転）まであります。矢印アイコンをくるっと回して「戻る／進む」を作る、なんて寸法です。

クラシックボタンとの違い

ここまで読んで「で、結局クラシックと何が違うの？」と思いますよね。

一枚にまとめるとこんな具合です。

ポイントは3つです。

色の扱い：クラシックは Fill HoverFill PressedFill …と状態ごとに手で色を決めていました。モダンは Appearance を選べばテーマが配色を作ってくれて、色味を変えたいときも BasePaletteColor を差し替えるだけです。
アイコン：クラシックは別コントロールが必要でした（しかも図形・アイコンには Text がありません）。モダンは Icon プロパティで内蔵されています。
プロパティ名：モダンでは FontSize → Size、FontColor → Color のように、他のモダンコントロールと名前がそろいました。

状態ごとの色をガッツリ作り込みたい場面は今もありますが、その話は図解でわかる！コントロールごとの色設定で詳しく扱っているので、こだわりたい方はそちらもどうぞ。

アイコンを単体で使うテクニックはアイコンコントロールの使い方にまとめてあります。

ここが落とし穴 クラシックから乗り換えるとき、FontSize や FontColor のままだと動きません。モダンでは Size Color に名前が変わっているので、数式を書き換えてあげてくださいね。（BorderRadius も四隅それぞれの RadiusTopLeft などに分かれています）

コピペで試せるサンプル

「送信」と「取消」を並べた、いかにもありそうな組み合わせを置いておきますね。

YAMLビューにそのまま貼れる形にしてあります。

- SubmitButton:
    Control: ModernButton@1.0.0
    Properties:
      AccessibleLabel: ="フォームを送信する"
      Height: =36
      Icon: ="Checkmark"
      Text: ="送信"
      Tooltip: ="入力内容を送信します"
      Width: =150
      X: =100
      Y: =100
- CancelButton:
    Control: ModernButton@1.0.0
    Properties:
      Appearance: =ButtonAppearance.Outline
      Height: =36
      Icon: ="Dismiss"
      OnSelect: =
      Text: ="取消"
      Width: =150
      X: =300
      Y: =100

YAMLでの編集に慣れていない方はYAMLとコード編集で爆速開発する方法を先に読んでおくと、貼り付け作業がスムーズですよ。