Power Appsにはギャラリーというコントロールがあって、これが地味にかなり便利なのでは！と気づいた今日この頃。
というわけでそんなギャラリーコントロールの簡単な使い方検証も含めてパズルゲームを作ってみたよ、といお話し。
ギャラリーコントロールについて
詳しくは公式情報を見てほしいのだが、ギャラリーコントロールについてざっくり言うと、
あるデータの集まりを、こちらが設定したデザインで繰り返し表示することができるコントロール
と僕は説明している。
と言っても正直わかりにくいと思うので、今回はパズルゲームっぽいものをギャラリーコントロールを使って作成。
スライディングブロックパズル
今回作ったパズルはこんなパズルで、正式名称はスライディングブロックパズルと言うらしい。
ルールはとにかく簡単で、空いたタイルの上下左右のタイルを選択するとそのタイルが入れ替わるので、その入れ替えを繰り返してタイルを正しい順番に並べ替えるというルール。
作り方
パズルゲームを作るためにはこんなステップになるのだけれど、
- 見た目の準備
- データの準備
- 見た目とデータをくっつける
- ゲームの処理(クリックされたときの動作、クリア判定とか)を作る
今回の記事はあくまでギャラリーコントロールのご紹介なので、上3ステップについて書いていこうかなと。
ゲームの処理まで書いちゃうとちょっと長くなりすぎちゃうのでごめんなさい。。。
見た目の準備
まずは見た目の準備から。
ラベルとアイコンはLoadingの表示と戻るボタンで、タイマーはループを実現するためのものなので、実際にパズルの見た目を作っているのはギャラリーとボタンのたった2つ。
ちなみに、縦とか横とかのテンプレートは電話帳とかを作るときに便利。
あとは高さやら幅やらを適当に整えて見た目の準備はいったん完了。
データの準備
続いてギャラリーに表示するデータを準備する。
[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のスタートとか画面のOnVisible辺りに入れてもらえれば。
見た目とデータをくっつける
最後に、コントロールとデータをくっつける。
縦に長すぎるので、
- ボタンのサイズ
- ギャラリーの大きさ
- ギャラリーのテンプレートサイズ
- ギャラリーの折り返しを4
を適当にいじってあげると、
If(ThisItem.value=0,"",ThisItem.value)
あとはゲームの処理だけ
ここまでくれば、あとはゲームの処理を書くだけ。
ボタンのOnSelectアクションにはすでにSelect(Parent)が設定されている（はず）なので、ギャラリー側のOnSelectでタイルをクリックされたときの入れ替え処理を書けばタイルの入れ替えは実現できる。
クリックされたタイルのインデックスはglyPuzzle.Selected.indexみたいに指定すれば取得できるし、そのvalueはLookUp(Tiles,index=glyPuzzle.Selected.index,value)みたいにやれば取得できるので、それほど難しくはないはず。
ちなみに、当然だけどTilesの中のデータ（今回はvalueかな）を変更するとギャラリーのボタンのテキストも変更される。
まとめ
けっこう雑になってしまったかもしれないが、ギャラリーコントロールはかなり便利なコントロールということが少しでも伝わってもらえればうれしいなと。
Power AppsはSharePointリストといったデータの集まりを表示する機会がそれなりにありそうなので、このコントロールを使うことがたくさんあるかもしれませぬ、的なお話でした。
コメント