Power Apps で神経衰弱を作ってみた その2

前回 PowerApps を使って神経衰弱を作ってみたのですが、カードがたったの4枚でしたので、ゲームとしてはちょっと物足りないですよね。よりゲームを面白くするためには、カードの枚数を増やした方が良いのですが、カードの枚数分同じ設定を何度も繰り返すのは大変です。

今回は出来る限り簡単に、少ない手順で、カードを増やし、合計18枚のカードで遊べる神経衰弱にしてみたいと思います。カードの枚数が増えましたので、アプリのサイズはタブレット形式にしています。

最初にイラストカードを作成しPowerAppsにアップします。カードは前回から7枚作成して追加しています。それと、今回は全てのカードがめくれたときのメッセージ画像（GoodJob.jpg）も用意しました。

ツリービューからAppのプロパティ「OnStart」を下図のように設定します。ClearCollectでカードデータの用意をしています。合計18枚のカード情報をセットしています。

続いて前回作成したアプリから以下のコントロールをコピー＆ペーストします。
・Image1…カード
・Timer1…ペアが出来なかったときに自動で伏せるアクションを設定
・Button_Start…「はじめる」ボタン

Image1のプロパティ「Image」と「OnSelect」の内容を少し修正します。「Last(FirstN(ShuffleCard,1))」の"1"の部分を「Image1.TabIndex」に変更します。"TabIndex”はTabキーで移動する順番を指定するためのものなのですが、今回はカード番号をセットするためにも使用します。

この状態で、カードをコピー&ペースするとどうでしょう。新しいカードでは「Image1.TabIndex」が「Image1_1.TabIndex」となり、自動的に新しいカードの「TabIndex」を参照しているのがわかるでしょうか。

続いてカードが18枚になるまでコピー＆ペーストで張り付けていきます。各カードのプロパティ「TabIndex」には番号が被らないように1～18のの値をセットします。

最期にカードが18枚めくれたときにメッセージカードを表示するようにしましょう。「挿入」から「画像」を選択して「メッセージ画像（GoodJob）」を選択。プロパティ「Visible」には以下のように入力します。

If(CountIf(ShuffleCard,Flg=3)=18,true,false)

背景をお好みの画像に設定すれば、作業は完了です。

実行するとこのようになります。

Power Apps で神経衰弱をつくってみました。https://t.co/ItMo8PvGh0#PowerApps pic.twitter.com/HHSRwRqUUM

— Masahiro Mishima (@MMishima_3) 2021年9月4日

前回作成したパーツを流用しているので30分程度で作成出来るのかなと思います。Power Apps のコントロールは、複写すると参照先の情報などはある程度自動で修正してくれますので、コツを掴んでいくと、今回のように同じ設定を大量にしなくてはならない場合でも、短時間で、簡単に作業を終わらせる方法が見つかるのではないかなと思います。