見出し画像
Photo by tkganz

Power Appsでサイコロ指名アプリを作ってみた

mk

「すべらない話みたいなサイコロで人を指名できるアプリ知りませんか？」と社員から問い合わせがあり、せっかくなのでPower Appsで作ってみました。
Power Apps超初心者なので、イケてない表現やお作法的にどうなのという部分があるとは思いますが参考になれば。


キャンバスアプリを一から作成

1.キャンバスアプリを一から作成から作成をはじめる
2.アプリ名を入力し、「電話」にチェックを入れ「作成」
3.Screen1が開く

Screen1：参加者入力画面をつくる

1.「ラベル」コントロールを挿入し、Textプロパティを「"参加者入力"」に変更
2.「ラベル」コントロールを挿入し、Textプロパティを「"参加人数"」に変更
3.「テキスト入力」コントロールを挿入し、Textプロパティを「""」に変更(コントロール名NinzuInput)
4.「ラベル」コントロールを挿入し、Textプロパティを「"人"」に変更
5.「ラベル」コントロールを挿入し、Textプロパティを「"1."」に変更
6．同様に「"10."」まで作成して配置する
7.「テキスト入力」コントロールを挿入、Textプロパティを「""」に変更、クリアボタンを「オン」に(コントロール名TextInput1)
8．同様に「TextInput10」まで作成して配置する
9.「ボタン」コントロールを挿入し、Textプロパティを「"記入完了"」に変更、OnSelectプロパティを次の式に設定
（Scree2に遷移、入力した人数を変数MyVarにセット、入力した名前でコレクションMycol1を作成する式）

Navigate(Screen2);
Set(MyVar,NinzuInput.Text);
ClearCollect(Mycol1, {No:1, name:TextInput1.Text}, {No:2, name:TextInput2.Text}, {No:3, name:TextInput3.Text}, {No:4, name:TextInput4.Text}, {No:5, name:TextInput5.Text}, {No:6, name:TextInput6.Text}, {No:7, name:TextInput7.Text}, {No:8, name:TextInput8.Text}, {No:9, name:TextInput9.Text}, {No:10, name:TextInput10.Text})

Screen1できあがりイメージ

画像1

Screen2：指名画面をつくる

1.「新しい画面」から「空」を選択（Screen2が追加される）
2.「Screen2」のOnVisibleプロパティを次の式に設定

UpdateContext({varTimerS:false})

3.「ボタン」コントロールを挿入し、Textプロパティを「"スタート"」に変更、OnSelectプロパティを次の式に設定
（クリックするとタイマーが開始される式）

UpdateContext({varTimerS:true})

4.「ラベル」コントロールを挿入し、Textプロパティを「"あなたが発言者です"」に変更、Visibleプロパティを次の式に設定
（タイマーが0になると表示、それ以外は非表示）

If(Timer1.Duration-Timer1.Value = 0,true,false)

5.「四角形」を挿入（サイコロのつもり、この上に名前を表示させる）
6.「タイマー」を挿入、Textプロパティを次の式に設定、Startプロパティを「varTimerS」に変更、Durationプロパティを「3000」に変更
（カウントダウンする設定、varTimerSは変数、trueになるとタイマーがスタート。Durationはお好みの時間を設定してください（ミリ秒）、数字が大きいほうが名前の切り替わりがゆっくりになります。）

Text(Time(0, 0, (Self.Duration-Self.Value)/1000), "hh:mm:ss")

7.「ラベル」コントロールを挿入し、Textプロパティを次の式に設定
（Rand関数に参加人数を掛けることで、1～nまでのランダムな数字を表示（ｎは参加人数））(コントロール名Rand1)

RoundUp(Rand()*Value(MyVar),0)

8.同様に「Rand5」まで作成
9.手順6～8のコントロールは表示させておく必要がないので、それぞれVisibleプロパティを「false」に変更
10.「ラベル」コントロールを挿入し手順5で作成したサイコロの上に表示、Textプロパティを次の式に設定
（Mycol1コレクションの、手順7で表示された数字番目の行のname列を取得
例：手順7で「3」が表示されたらMycol1コレクションの2行目にセットされた名前を取得してくる）

Last(FirstN(Mycol1,Value(Rand1.Text))).name

Visibleプロパティを次の式に設定
（タイマーに表示された時間が、設定時間の1/6以上1/3未満の時に表示、それ以外は非表示）

If(And(Timer1.Value >= Timer1.Duration/6,Timer1.Value < Timer1.Duration/3),true,false)

11.「ラベル」コントロールを挿入し手順5で作成したサイコロの上に表示、Textプロパティを次の式に設定

Last(FirstN(Mycol1,Value(Rand2.Text))).name

Visibleプロパティを次の式に設定
（タイマーに表示された時間が、設定時間の1/3以上1/2未満の時に表示、それ以外は非表示）

If(And(Timer1.Value >= Timer1.Duration/3,Timer1.Value < Timer1.Duration/2),true,false)

12.「ラベル」コントロールを挿入し手順5で作成したサイコロの上に表示、Textプロパティを次の式に設定

Last(FirstN(Mycol1,Value(Rand3.Text))).name

Visibleプロパティを次の式に設定
（タイマーに表示された時間が、設定時間の1/2以上1/1.5未満の時に表示、それ以外は非表示）

If(And(Timer1.Value >= Timer1.Duration/2,Timer1.Value < Timer1.Duration/1.5),true,false)

13.「ラベル」コントロールを挿入し手順5で作成したサイコロの上に表示、Textプロパティを次の式に設定

Last(FirstN(Mycol1,Value(Rand4.Text))).name

Visibleプロパティを次の式に設定
（タイマーに表示された時間が、設定時間の1/1.5以上1/1.2未満の時に表示、それ以外は非表示）

If(And(Timer1.Value >= Timer1.Duration/1.5,Timer1.Value < Timer1.Duration/1.2),true,false)

14.「ラベル」コントロールを挿入し手順5で作成したサイコロの上に表示、Textプロパティを次の式に設定

Last(FirstN(Mycol1,Value(Rand5.Text))).name

Visibleプロパティを次の式に設定
（タイマーに表示された時間が、設定時間の1/1.2以上の時に表示、それ以外は非表示）

If(And(Timer1.Value >=  Timer1.Duration/1.2),true,false)

Screen2できあがりイメージ

画像2

Screen2にリセットボタンをつくる

1.「ボタン」コントロールを挿入し、Textプロパティを「"やり直す"」に変更、OnSelectプロパティを次の式に設定

Navigate(Screen1);
Reset(Timer1)


あとはお好みで背景等をつけてください。

参考サイト


この記事が気に入ったらサポートをしてみませんか？