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

2020.08.07

Power Appsにはギャラリーというコントロールがあって、これが地味にかなり便利なのでは！と気づいた今日この頃。

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

スポンサーリンク

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

詳しくは公式情報を見てほしいのだが、ギャラリーコントロールについてざっくり言うと、
　あるデータの集まりを、こちらが設定したデザインで繰り返し表示することができるコントロール
と僕は説明している。

以前書いたこちらの記事では、「SharePointリストのリストアイテムの中にある選択肢」というデータの集まりを、チェックボックスとラベルを使って繰り返し表示してみた。
Power Apps SharePointリストの複数選択をリストボックスやチェックボックスで選択可能にする
SharePointのリストからPower Appsでカスタムフォームを作ると、複数の項目を選択できる列はコンボボックスで作られる。 機能的には全く問題ないんだけど、これをチェックボックスに変更できないか試してみた。 SharePointの...
ippu-biz.com
2020.04.24

と言っても正直わかりにくいと思うので、今回はパズルゲームっぽいものをギャラリーコントロールを使って作成。

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

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

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

作り方

パズルゲームを作るためにはこんなステップになるのだけれど、

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

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

ゲームの処理まで書いちゃうとちょっと長くなりすぎちゃうのでごめんなさい。。。

見た目の準備

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

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

ラベルとアイコンはLoadingの表示と戻るボタンで、タイマーはループを実現するためのものなので、実際にパズルの見た目を作っているのはギャラリーとボタンのたった2つ。

今回のパズルでギャラリーを選ぶときは空のギャラリー(縦)を選ぼう。

ちなみに、縦とか横とかのテンプレートは電話帳とかを作るときに便利。

続いてその中にボタンを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のスタートとか画面のOnVisible辺りに入れてもらえれば。

見た目とデータをくっつける

最後に、コントロールとデータをくっつける。

まずギャラリーコントロールとこのデータをくっつけるため、ギャラリーのItemsにデータTilesを設定する。
こっちから選んでもOK
そうすると、こんな感じで縦にひたすら長くボタンが16個表示される。

縦に長すぎるので、

  • ボタンのサイズ
  • ギャラリーの大きさ
  • ギャラリーのテンプレートサイズ
  • ギャラリーの折り返しを4

を適当にいじってあげると、

けっこういい感じ。
ボタンにvalueの値を表示するため、ボタンのTextプロパティをこんな感じに変えてあげればひとまず見た目は完成かな。

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リストといったデータの集まりを表示する機会がそれなりにありそうなので、このコントロールを使うことがたくさんあるかもしれませぬ、的なお話でした。

ギャラリーの公式はこちら：
Power Apps での ギャラリー コントロール - Power Apps
Power Apps でのギャラリー コントロールについての詳細、プロパティ、例について説明します。
learn.microsoft.com

コメント

タイトルとURLをコピーしました