Power Apps ギャラリーコントロールが便利だったのでパズルゲームを作ってみた

Power Appsにはギャラリーというコントロールがあって、これが地味にかなり便利。

というわけでそんなギャラリーコントロールの簡単な使い方検証も含めてパズルゲームを作ってみた。

ギャラリーコントロールについて
スライディングブロックパズル
作り方
まとめ

ギャラリーコントロールについて

ギャラリーコントロールについてざっくり説明すると、『あるデータの集まりを、こちらが設定したデザインで繰り返し表示することができるコントロール』。

以前書いたこちらの記事では、「SharePointリストのリストアイテムの中にある選択肢」というデータの集まりを、チェックボックスとラベルを使って繰り返し表示してみた。

Power Apps SharePointリストの複数選択列をリストボックスやチェックボックスで選択可能にする

SharePointのリストからPower Appsでカスタムフォームを作ると、複数の項目を選択できる列はコンボボックスで作られる。機能的には全く問題ないんだけど、これをチェックボックスに変更できないか試してみた。SharePointの複数...

今回はパズルゲームっぽいものをギャラリーコントロールを使って作成。

スライディングブロックパズル

今回作ったパズルはこんなパズルで、正式名称はスライディングブロックパズルと言うらしい。

ルールはとにかく簡単で、空いたタイルの上下左右のタイルを選択するとそのタイルが入れ替わるので、その入れ替えを繰り返してタイルを正しい順番に並べ替えるというルール。

作り方

パズルゲームを作るステップは以下の通りで、

見た目の準備
データの準備
見た目とデータをくっつける
ゲームの処理(クリックされたときの動作、クリア判定とか)を作る

今回の記事はあくまでギャラリーコントロールの紹介なので、上3ステップについて書いていく。

※ゲームの処理まで書くと記事が長くなりすぎるため。。。

見た目の準備

まずは見た目の準備から。

単純にこのパズルをPower Appsで作ろうとするとボタンコントロールが16個必要だけど、ギャラリーコントロールを使用するとこれだけでできてしまう。

今回のパズルでは『空のギャラリー(縦)』を使用。

ギャラリーにボタンを1個配置する。

※画像のようにボタンとギャラリーが並列になってしまうことがあるので、そのときはボタンを消してもう一度追加する。

あとは高さや幅を適当に整えて見た目の準備はいったん完了。

データの準備

続いてギャラリーに表示するデータを準備する。

今回用意したデータは16×2の二次元コレクション、名前は「Tiles」。

[index, value]のデータのペアを16個用意し、それぞれindexは左上のタイルから0,1,2…としていて、valueはそのタイルに入る数字を表している。

一応作り方をのせるとこんな感じ。左上から1,2,…となり、最後右下が空白になる。

ClearCollect( Tiles,
    { index:0, value:1 },
    { index:1, value:2 },
    { index:2, value:3 },
    { index:3, value:4 },
    { index:4, value:5 },
    { index:5, value:6 },
    { index:6, value:7 },
    { index:7, value:8 },
    { index:8, value:9 },
    { index:9, value:10 },
    { index:10, value:11 },
    { index:11, value:12 },
    { index:12, value:13 },
    { index:13, value:14 },
    { index:14, value:15 },
    { index:15,value:0 } );

これをApp.OnStartや画面のOnVisibleに設定する。
※2025/1/30追記：今はSequence関数を利用するともっと簡単に作れます。