Power Appsで顔写真付き飲み会名簿アプリを作成しました！

はじめに

会社の大規模な飲み会の幹事になったものの、
お互い「はじめまして」の人が多く、名前と顔が一致しない問題がありました。
また新人の子たちもいたので「誰が来るのか」「どんな人なのか」をスマホで簡単に確認できる仕組みがあれば便利だと思い、Microsoft Formsで集計した出欠データをもとに、Power Appsで顔写真付きの飲み会名簿アプリを作成しました。

使用技術

• Microsoft Forms：出欠確認用
• Excel：Formsの回答結果、今回のアプリの元データ
• Power Automate：Formsでの回答結果にばらつきがあり、参加者の組織情報などを自動修正するために使用
• Power Apps：名簿UI

Formsで出欠確認したこと、Power Automateで回答データを整えた話は
別記事にまとめていますので、よろしければご確認ください！
※まじで自分の尻をぬぐうだけの意味のない作業でした…

Power Appsアプリ

レイアウト

ほぼ黒塗りですがこんな感じです。

レイアウトは「画像、タイトル、サブタイトル」を使用しています。
ここにオリジナル要素としてしゃべった人を記録できるチェックボックスを追加しています。

工夫したポイント

• 出席者のみフィルタ＋名前検索
• メールアドレスから顔写真を取得
• 「しゃべった！」チェックボックスの実装、履歴保持
• 新人を赤枠で強調

以下で１つずつ紹介します。

出席者のみフィルタ＋名前検索

回答結果のExcelには参加しない人も含まれているため、
飲み会列が「はい」になっている人だけを表示するようにしました。
さらに、名前で検索できるようにしています。

Items（ギャラリー）

SortByColumns(
    Filter(
        [@'OfficeForms.Table'],
        飲み会 = "はい" &&
        StartsWith(名前, TextSearchBox1.Text)
    ),
    "名前"
)

メールアドレスから顔写真を取得

お気に入り機能です！
メール列からTeamsのアイコンを取得し、顔写真を表示します。
メールが空の場合は、デフォルトのサンプル画像を表示します。

Image（ギャラリー内のイメージ）

If(
    !IsBlank(ThisItem.メール),
    Office365ユーザー.UserPhotoV2(ThisItem.メール),
    SampleImage
)

「しゃべった！」チェックボックスの実装、履歴保持

誰と話したかを記録し、後で見返せるようにしました。
さらに、アプリが落ちても履歴が消えないようにローカル保存を追加しました。
ちなみにステータス管理はスマホ版のみの機能です

OnCheck（チェックボックス）

Collect(colChecked, {ID: ThisItem.Id});
IfError(SaveData(colChecked, "CheckedState"), Blank())

OnUncheck（チェックボックス）

RemoveIf(colChecked, ID = ThisItem.Id);
IfError(SaveData(colChecked, "CheckedState"), Blank());

Default（チェックボックス）

!IsBlank(LookUp(colChecked, ID = ThisItem.Id))

OnVisible（アプリ表示時）

IfError(
    LoadData(colChecked, "CheckedState", true),
    Blank()
)

TemplateFill（ギャラリー）

If(
    !IsBlank(LookUp(colChecked, ID = ThisItem.Id)),
    ColorFade(RGBA(0, 200, 0, 1), 0.7), // 明るい緑
    Color.White
)

こちらは必要ない機能かもですが、
チェック済みのレコードを緑色で表示することで、視覚的にわかりやすくしました。

新人を赤枠で強調

先輩社員たちに大事なこと、それは新人が誰かを特定し、話しかけに行くことです。
そうすることで飲み会の絆が生まれます。（諸説あり）

BorderColor（ギャラリー内のイメージ）

If(!IsBlank(ThisItem.新人), Color.Red, Color.Transparent)

BorderThickness（ギャラリー内のイメージ）

If(
    !IsBlank(ThisItem.新人),
    3,   // 枠の太さ（ピクセル）
    0    // 枠なし
)

公開

作成した後はいよいよ公開です。
公開するには以下の権限が必要です。

• Excel（データソース）：編集権限
• Power Appsアプリ：共有権限

私は一般ユーザーなので、組織全体公開はできず、参加者一人一人に権限を付与しました。
地味に面倒な作業でしたが、アプリを使ってもらうために頑張りました。

さいごに

結果は大成功でした！
みんなに使ってもらえましたし、幹事兼アプリ作成者として顔と名前を覚えてもらえたのは嬉しかったです。
ただ、自分のTeamsアイコンが入社当時のままで古すぎて「誰？」と言われたのはショックでした…
Teamsのアイコンは定期的に更新しましょう。笑