こんにちは、あんこ先生です。
アプリのアイコンの右上に、ちょこんと乗っている「3」みたいな数字、見たことありますよね。
未読が3件あるよ、を伝えてくれる、あのバッジです。
自分のアプリにも付けたいけど、図形とテキストを重ねて自作するのは正直めんどう……。
そんなときに使えるのが、モダンコントロールのバッジコントロールです。
この記事を読み終えると、ギャラリーやアイコンに件数・状態を表す小さなバッジを乗せられるようになります。
色や形の選び方、0件のときに自動で隠すコツ、そして「バッジって押せないの？」というつまずきまで、例によってコピペで試せるようにしておきますね。
結論から言うと、バッジは Content に数式を入れて件数や状態を出す”表示専用”の飾りです。
色は ThemeColor で意味から選び、0件のときは Visible で隠す。まずはこれだけ押さえればOKです。
バッジコントロールはモダンコントロールのひとつです。初期状態では出てこないので、Power Apps Studio の 設定 → 機能 →「モダンコントロールとテーマ」をオンにしておいてください。
バッジコントロールとは
ざっくり言うと、数字や短いテキストを小さな図形の中に表示するための飾りです。
それ単体で主役になるというより、ギャラリーの行やアイコン、アバターに添えて「いま何件か」「どんな状態か」をひと目で伝える脇役、というイメージですね。
通知やタスクの件数、ステータス（新着・要対応など）、在庫の残数といった「パッと見で伝えたい小さな情報」と相性ばつぐんです。
とくにギャラリーコントロールの各行に件数を出したいとき、よく出番がきます。
押さえるのは3つのプロパティだけ
多機能そうに見えて、主役は Content・Shape・Appearance の3つ。
あとは色を ThemeColor で足すだけです。とてもシンプル。
| プロパティ | 役割 |
|---|---|
| Content | バッジの中に出す数字やテキスト |
| Shape | 形（円形／正方形／丸め） |
| Appearance | 見た目（塗りつぶし／アウトライン／ゴースト／反転） |
| ThemeColor | 状況に応じた色（成功・警告・危険 など） |
ここから1つずつ、コピペで試していきましょう。
Content（中身）
いちばん大事なのが Content です。
ここに出したい数字やテキストを入れます。
固定の数字でもいいですが、せっかくなら動的にしましょう。
たとえば「未読の通知の件数」を出すなら、こう書きます。
// バッジのContentプロパティ：未読の件数を表示
With({通知:["未読","既読","未読","未読","未読","既読"]},
CountRows(Filter(通知, Value = "未読"))
)
データソース(今回はWithでテーブルを仮作成)から未読だけを数えて、その数をそのままバッジに出しています。
件数が増えれば表示も勝手に変わってくれますよ。
Contentは数値でもテキストでもOKです。「NEW」や「！」のような短い文字を入れると、件数以外の用途にも使えます。
Shape（形）と Appearance（見た目）
形と見た目は、プロパティペインのドロップダウンから選ぶのがいちばんかんたんです。
- Shape
円形（Circular）／正方形（Square）／角丸四角（Rounded）の3種類。通知の数字なら円形、ラベルっぽく使うなら丸めが収まりよいです。 - Appearance
塗りつぶし（Filled）／アウトライン（Outline）／ゴースト（Ghost）／反転（Inverted）。しっかり目立たせたいなら塗りつぶし、控えめにしたいならアウトラインやゴースト。
数字のバッジは「円形＋塗りつぶし」、ステータスのラベルは「丸め＋塗りつぶし」あたりが定番ですね。
ThemeColor（色）
色は ThemeColor で、シナリオに合わせた名前から選びます。
成功・警告・危険・重要・有益…といった具合に、色の名前ではなく意味で選べる作りになっています。
- 成功（Success）… 完了・OK系（緑）
- 警告（Warning）… 注意してほしいとき（黄）
- 危険（Danger）… エラーや未対応（赤）
- 重要（Important）／有益（Informative）／微妙（Subtle）… 強調したい度合いで使い分け
「赤にしたいから赤を選ぶ」ではなく「危険だから危険を選んだら赤になった」と、意味から選べるのがモダンコントロールらしいところです。
色そのものを細かく作り込みたい人は、コントロールごとの色設定の記事も合わせてどうぞ。
ThemeColorを「Brand」にしたときだけ、BasePaletteColorでさらに細かく色を指定できます。逆に言うと、ほかの色を選んでいるときにBasePaletteColorをいじっても効きません。「色が変わらないぞ？」と悩んだら、まずThemeColorの値を確認してくださいね。
0件のときはバッジを隠す
数字バッジでありがちなのが、「0件なのに0と表示されて、ちょっとかっこ悪い」問題。
Visibleプロパティで、件数が0のときはバッジごと隠してしまいましょう。
// バッジのVisibleプロパティ：未読が0なら非表示
CountRows(Filter(通知, Value = "未読")) > 0
未読が1件以上のときだけ true になって表示される、という仕掛けです。
これだけで一気に「ちゃんと作り込んだアプリ」っぽくなりますよ。
バッジはタップに反応する？
ここ、つまずく人が多いところです。
結論を先に言うと、バッジ自体は押しても反応しません。
バッジには OnSelect プロパティがなく、あくまで表示専用の飾りだからです。
「バッジを押したら詳細画面に飛ばしたい」みたいなことをやりたいときは、ひと工夫します。
- 透明なボタンを重ねる
バッジの上に、Fill を透明にしたボタンを同じ位置・大きさで置き、そのボタンの OnSelect に処理を書く。見た目はバッジ、動きはボタン、というわけです。 - ギャラリーの選択に乗せる
ギャラリーの行の中にバッジを置けば、行そのものの選択（Gallery の OnSelect）に乗っかれます。件数バッジ付きの一覧なら、こちらが自然です。
「押せない＝使いにくい」ではなく、「役割が表示に特化している」と捉えると、組み合わせ方が見えてきますよ。
バッジコントロールの使い方のまとめ
今回は、バッジコントロールで件数や状態を表示する方法を紹介しました。ポイントは3つです。
- 主役は Content・Shape・Appearance、色は ThemeColor で意味から選ぶ
- Content は CountRows などで動的にすると一気に実用的になる
- バッジは表示専用（押せない）。タップさせたいときは透明ボタンを重ねる
まずはギャラリーの行に、未読や件数のバッジをひとつ乗せるところから試してみてください。ユーザーの顔写真に在席状況を乗せたいなら、アバターコントロールのバッジ機能も便利です。
それでは、また次の記事でお会いしましょう。
コメントを残す