PowerAppsで担当決めルーレット(?)をつくった🧐 #個人開発

なぜにルーレット？

担当を決めるのってなんかきまずくないですか🤐？？？
飲み会の幹事、ちょっとめんどくさいことの担当など
仕事や会社のイベントの担当を決めなきゃいけない機会はいろいろありますよね🤔
その時のために、バッと担当を決めてくれるルーレットをつくりました🥰

どんなもの？

ルーレット対象を下記3つから選べるものをつくりました🎉

事前にExcelに登録しておいたメンバーから選べるもの
全社員から選べるもの
↑2つの両方から選べるもの

検索した結果から、ルーレットの対象を選び、スタートを押すと、選ばれた人たちのアイコンが一定秒数ごとに入れ替わり、ストップを押すと入れ替わりを止めれる(担当が決まる)ようなものになっています🎯

※ほんとはO365のアイコンの画像が回りますが、さすがにそのまま出せないので、変わりにぬこさまの画像が回るようにしています

作り方🎨

全部話すと大変なことになってしまうのでざっくり作り方をお話しします。

左側

左の枠は、「テキスト入力」と「ギャラリー」と「ボタン」で構成されています。
ギャラリーには、テキスト入力で入力された値でフィルターしたものをギャラリーのItemsに設定しています。

例1 Excelからとる
Filter(テーブル1,group=Nameinput.Text)
例2 会社の社員を検索する
Office365ユーザー.SearchUser({searchTerm:Nameinput_3.Text,top:30})

ギャラリーのonSelectで、右側のギャラリーで選択した画像を載せるために、選択したものをコレクションに入れるように設定しています。

右側

右の枠は、「ギャラリー」「画像」「タイマー」で構成されています。
選択したメンバーが表示される「ギャラリー」と、ルーレット用のコロコロ変わる画像が表示される「画像」と、「タイマー」のテキストを変更して、押すとスタートストップするボタンとしました。

画像は、0.1秒ごと選択されたメンバーのもので切り替わっています。

ポイント👆

作っててつまづいたところや、工夫したとこだけおはなしします！

タイマーを使ってぐるぐる画像を回す

タイマーの期間(Duration)を100(ms)とし、0.1秒ごとに時間を数えなおすようになっています。
タイマーがスタートしたタイミング(0.1秒ごと)に画像が切り替わるように、onTimerStartで下記のような仕掛けを仕込んでいます。

// 何回タイマーがスタートしたかをカウントしておく
Set(repeatCount,repeatCount+1);
// 選択されたメンバーの中から、repeatCountを選択してメンバーの数で割った余り番目の画像をを現在の画像に設定する
Set(nowImage,Index(selectedList,Mod(repeatCount,CountRows(selectedList))+1).Image);

こうすることで、タイマーがスタートする0.1秒ごとに画像を切り替えることができます

エラーの発生を抑制する

Office365ユーザー.UserProfileV2(ThisItem.email).displayName

↑のようにO365コネクタ？を呼び出す際に、検索した結果が0人(ThisItem.emailが空白)のときに、
「存在しない人(空白)のプロフィールは取れないぞ！」エラーが発生して、画面上部に赤いエラーメッセージが表示されます。↓こんなん

毎回出るのと、エラーが蓄積されて画面が見えなくなって、さすがにうざいので、
エラーが発生しないように、下記のように書き換えました。

If(
    !IsBlank(ThisItem.UserPrincipalName),
    Office365ユーザー.UserProfileV2(ThisItem.UserPrincipalName).displayName
)

選択した画像をコレクションに格納する

O365のアイコン画像はOffice365ユーザー.UserPhotoV2("xxx@example.com")で取得できますが、画像を入れ替えるごとにコレを呼ぶと、めちゃリクエストをしなくてはいけないのと、入れ替えの際にアイコンの画像取得が間に合わなくて、ルーレットっぽくならないです・・・。(めっっちゃぎこい感じになる；；)

そのため、人を選択したタイミング(左側ギャラリーのonSelect)で、コレクションに画像を保存するようにしました

Collect(
    selectedList,
    {
        Email: kouhoList.Selected.email,
        Image: Office365ユーザー.UserPhotoV2("xxx@example.com")
    }
);

Listの全員を選択された人として追加する

「全員追加ボタン」を押すと、フィルターされた全員を選択したメンバに追加するようにしています。
めっちゃわかりにくいですが、こんな感じで書くといい感じになります。

// kouhoList(左側ギャラリー)の全アイテムに対して、Email,画像を設定した値を選択されたメンバー一覧にぶちこむ
ClearCollect(
    selectedList,
    ForAll(
        kouhoList.AllItems,
        {
            Email: ThisRecord.email,
            Image: Office365ユーザー.UserPhotoV2(ThisRecord.email)
        }
    )
);
// 選択されたメンバーの一番目をはじめの画像とする
Set(
    nowImage,
    First(selectedList).Image
);

正直わたしもようわかってはないですが、こんな感じでFor文が書けるみたいですね、むずい！！

やったね！！

これを部のチャネルに追加して、何かあった時はルーレットで色々決めることができるようになりました！
最近は飲み会の幹事をこれで決めました🤗

この記事以降久々にPowerAppsで遊びましたが、やっぱりちょっと難しかった・・・😂
PowerAppsって開発者向けじゃないから？なのか逆にむずいとこがありますね😥（For文とかちょっとしんどい）
またいいネタあったら作ってお勉強します😎