PowerApps│アバターコントロールの使い方

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

最近のPower Appsには「モダンコントロール」という新しいコントロール群が増えています。

ざっくり言うと、Microsoftの新デザイン体系（Fluent 2）に沿って作り直されたボタンやラベルたちですね。

クラシックとはプロパティ名や色の指定方法が少し違いますが、テーマで配色をまとめて管理できたりと、地味にうれしい子たちです。

初期状態では利用できないので、Power Apps Studioの設定 → 機能 →「モダンコントロールとテーマ」のトグルをオンにしてみてください。

今回はそのなかでもあると地味に嬉しい、アバターコントロールにフォーカスして、使い方を逆引きでまとめていきます。

社内アプリのヘッダーにこれをひとつ置くだけで、ぐっとそれっぽくなりますよ。

例によってコピペで試せるようにしておきますね。

[ad1]

おしながき

1 アバターコントロールとは
2 押さえるのは4つのプロパティだけ
3 Teamsの在席と連動させたいときは？
4 応用編：Badgeを「在席以外」に使う
5 ハマりやすい罠まとめ
6 アバターコントロールの使い方のまとめ

アバターコントロールとは

アバターコントロールは、**ユーザーやチームを“顔つき”で表現する**ためのコントロールです。

顔写真があれば写真を、無ければ名前の頭文字（イニシャル）を丸の中に表示してくれます。

さらに右下に小さなバッジを付けて、在席状況（応対可能・取り込み中など）まで示せます。

Teamsのアイコンを思い浮かべてもらうと早いですね。あれをアプリ内に置けるイメージです。

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

アバターは多機能そうに見えて、実質この3つを押さえればOKです。とてもシンプル。

プロパティ	役割
`Image`	表示する顔写真（画像）
`Name`	写真が無いときの頭文字／読み上げ用の名前
`Shape`	画像の形状
`Badge`	右下のバッジ（在席状況）

ここから1つずつ、コピペで試していきましょう。

まずは一番かんたんなパターン、ログインユーザーの名前を表示してみましょう。

いまアプリを開いている本人の情報を出してみます。

コード例

//アバターのNameプロパティ
User().FullName

User()関数は、いまログインしている本人の情報を返してくれる便利な関数です。

FullNameで氏名、Emailでメールアドレスが取れます。

これをNameプロパティに入れておけば、写真が無いときに頭文字が表示されますよ。

次に、頭文字だけだと少しさみしいので、顔写真を出しましょう。

コード例

//アバターのImageプロパティ
User().Image

これだけで本人のプロフィール写真が丸く表示されます。

NameにUser().FullName、ImageにUser().Imageをセットしておけば、写真があれば写真、無ければ頭文字と勝手に出し分けてくれます。

ほかのユーザーの写真を出したいときは、Office365Usersコネクタを使います。

コード例

// ギャラリー内などで、ほかの人の写真を表示
Office365Users.UserPhotoV2(ThisItem.Email)

ギャラリー内でメンバー一覧を出すときなどに便利ですね。

💡 ひとことメモ
Office365Usersを使うには、事前に「データの追加」からコネクタを接続しておく必要があります。接続を忘れると関数が候補に出てこないので注意してくださいね。

続いて、画像の形状を変えてみましょう。

計上は2種類あり、丸Circularと四角Squareです。

イメージが大きく変わるので使い分けは大事です。

コード例

// アバターのShapeプロパティ
'Avatar.Shape'.Circular

最後に、バッジで在席状況を表してみましょう。

アバターらしさが一番出るのがこのバッジです。

Badgeプロパティに専用の値を入れると、右下の小さな丸が状態に応じて変わります。

コード例

//アバターのBadgeプロパティ
'Avatar.Badge'.状態名

状態名は次の通りです。たくさんありますね。

値	意味
`'Avatar.Badge'.Available`	応対可能（緑）
`'Avatar.Badge'.Busy`	取り込み中（赤）
`'Avatar.Badge'.Away`	退席中（黄）
`'Avatar.Badge'.DoNotDisturb`	応答不可
`'Avatar.Badge'.Offline`	オフライン
`'Avatar.Badge'.OutOfOffice`	不在
`'Avatar.Badge'.None`	バッジを出さない

⚠️ ここが落とし穴
このバッジ、Teamsの在席状況とは自動では連動しません。あくまで「こちらで指定した状態」を表示するだけなんです。まずはステータス列の値や固定値で表示するところから始めるのがオススメですよ。

[ad1]

Teamsの在席と連動させたいときは？

「じゃあTeamsの“応対可能／取り込み中”を自動で持ってこられないの？」とよく聞かれます。

残念ながらBadge単体では持ってきません。

本物の在席とつなぐには、自分で情報を取りに行く必要があります。

流れはこんな感じです。

Microsoft Graphから在席状況を取得する（/me/presence など）。
標準のOffice365Usersコネクタには在席が無いので、カスタムコネクタやPower Automate経由で呼び出します。Presence.Read（自分）／Presence.Read.All（他人も）の権限が必要です。
返ってきた文字列（Available／Busy／Away／DoNotDisturb／Offline など）を変数に入れておきます。
その文字列をSwitchでBadgeの値に変換して、Badgeプロパティに流し込みます。

コード例

Switch(
    varPresence,                           // Graphから取った在席文字列
    "Available",    'Avatar.Badge'.Available,
    "Busy",         'Avatar.Badge'.Busy,
    "Away",         'Avatar.Badge'.Away,
    "BeRightBack",  'Avatar.Badge'.Away,
    "DoNotDisturb", 'Avatar.Badge'.DoNotDisturb,
    "Offline",      'Avatar.Badge'.Offline,
    'Avatar.Badge'.None                    // それ以外
)

⚠️ 注意
リアルタイムにプッシュされるわけではないので、タイマーで数十秒おきにフローを叩いて変数を更新する作りになります。カスタムコネクタはプレミアム扱いになることもあるので、ライセンスも確認してくださいね。

応用編：Badgeを「在席以外」に使う

ここが個人的に一番おもしろい使い方です。

さきほどのSwitchを見て気づいた方もいるかもですが、Badgeは結局ただの“色つきの丸”なんですよね。

ということは、在席状況に限らず好きな意味を持たせて流用してOKなんです。

たとえば「提出済み／未提出」をアバターのバッジで見える化してみましょう。

trueなら緑、falseなら赤、みたいな感じですね。

文法

アバターのBadgeプロパティ
If(条件, 'Avatar.Badge'.状態A, 'Avatar.Badge'.状態B)

コード例

// 提出済みなら緑（Available）、未提出なら赤（Busy）
If(ThisItem.提出済み, 'Avatar.Badge'.Available, 'Avatar.Badge'.Busy)

3状態以上にしたいときはSwitchが便利です。

コード例

// ステータス列の値で出し分け
Switch(
    ThisItem.ステータス,
    "提出済み",  'Avatar.Badge'.Available,   // 緑チェック
    "差し戻し",  'Avatar.Badge'.OutOfOffice, // 戻り矢印
    "未提出",    'Avatar.Badge'.Offline,     // 白抜きの丸
    'Avatar.Badge'.None                       // それ以外
)

[ad1]

ハマりやすい罠まとめ

最後に、わたしが実際に「うーんこの」となったポイントを置いておきますね。

日本語名だとイニシャルが出ない
Nameに漢字のお名前を入れると、頭文字ではなく汎用の人型アイコンが表示されることがあります。英字名なら「YN」のように出るのですが、日本語は今のところ苦手みたいです。写真を併用するか、割り切るのが無難です。
バッジは自動で在席連動しない（05で書いたとおり）
見た目に騙されがちですが、指定した状態を出しているだけです。
コネクタの接続忘れ
ほかのユーザーの写真が出ないときは、たいていOffice365Usersの接続忘れです。まず「データの追加」を確認しましょう。