コミュニティのサンプルからダウンロードして遊べます。
ジグソーパズルを作った際のポイント
1. ギャラリーで複数のアイテムにドラッグ＆ドロップ機能を追加
Power Apps でドラッグ＆ドロップ機能を作るためにはタイマーとスライダーが必要になります。 詳細な解説は、開発者であるパパセンセイのブログを参照してください。
１つのコントロールでドラッグ＆ドロップを追加した際には、タイマーのOnTimerStartにスライダーの水平・垂直のフリップを入れていました。また、スライダーが触られているかを疑似的なPressedという変数で判定しています。
ギャラリーの中で複数のアイテムにドラッグ＆ドロップ機能を追加する際も同様に、ギャラリー内のコントロールとしてタイマーとスライダーを追加します。
スライダーのレイアウトを水平・垂直どちらにするかという変数は、この場合コレクションの中の1つの列として格納することになります。同様に、Pressedについてもレコードの1つの列として扱います。
ギャラリーでドラッグ＆ドロップを実装するときには、必ず2つのコレクションが必要になります。
1つはギャラリーコントロールに指定する、何らかの連番を持ったコレクション。もう一つが、同じ連番をもち、アイテムのXY座標、水平・垂直を表す列、選択されたレコードを示すselectedの合計5列で構成されるコレクションです。
1つのコレクション (Collection B)だけでもよさそうですが、コレクションの中の座標部分を更新するとギャラリーが再描画されてしまうので、ドラッグ＆ドロップが機能しなくなります。これを抑えるためにダミーのコレクションを用意して、ギャラリーに設定し座標はもう一方をLookUpさせています。
2. SVG画像をclipPathで切り抜き
前回のアプリでもSVGを使って画像を分割していました。今回は少し頑張って、任意の形で画像を切り抜いています。これにはSVGのclipPathを使っています。
clipPathは指定したSVG図形の形で対象の要素を切り抜くというもので、pathを使うと自由な形に画像を切り抜けます。clipPathについては以下の投稿で説明しています。
今回のアプリでは3x3のパズルになるように、頑張ってSVGのpathを作成し、それを使って切り抜きました。（ここが一番時間かかる）
SVGのPathを作るときにはSVGPathEditorが便利です。
それぞれのピースが違うパスを持っているので、このパスの定義もコレクションに入れておきます。（Collection Aのほう）
あとは画像コントロールでそのパスを参照して、切り抜くだけです。
おわり
SVGで（ほぼ）任意の形にずけいを切り抜くことでジグソーパズルをPower Appsで作ることができました。
もしドラッグ＆ドロップの操作性が微妙だなーという場合には、『ギャラリーを2つ用意して、ピースと土台をタップしたらそこにピースを移動させる』みたいなことも割と簡単にできます。
外観を整えればお子さんとも遊べると思いますので、ぜひ楽しんでください。
