はじめに
こんにちは。酒井です。もう少しで入社して2か月になります。研修ではPower Platform(特にPower Apps)で
開発する機会が多く、意外と使いこなせるようになってきた気がします。
今回は研修中に見つけたPower Appsの小ネタをご紹介します。あまりにニッチなネタですがどこかで
役に立つかも?
完成イメージ
こちらが完成イメージです。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-001-1-1024x471.png)
ギャラリー(画像の赤線部分)のアイテムの数値に応じて、高さが変わっていることが確認できると思います。
作成手順
それではさっそく作成手順を見ていきましょう。
1. 空のキャンバスアプリを作成
まずは空のキャンバスアプリを作成しましょう。これが無いと始まりません。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-002-1024x519.png)
2. ボタンを追加する(スキップ可)
適当にボタンを追加します。そして、ボタンのOnSelectにClearCollect関数を設定します。
このボタンを押すとSampleItemsというコレクションが作成されます。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-003-1024x518.png)
この手順はギャラリーのデータソースとなるコレクションを作成するために行っております。
そのため、他にデータソース(Microsoft Dataverseのテーブル、SharePointのリストなど)がある場合には、
この手順をスキップできます。
作成したコレクションは画面左上の「ファイル」メニュー(画像の青線部分)のコレクションから
確認することができます。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-004-1024x518.png)
3. ギャラリーを追加する
画面右上の下向き矢印をクリックすると出てくるメニューからギャラリーを選びます。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-005-1024x516.png)
ギャラリーは「高さ(伸縮可能、空)」を使用します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-006-1024x515.png)
空のギャラリーが追加できました。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-007-1024x518.png)
データソースは先ほど作成したSampleItemsを選択します。実際に試してみるときは各自で好きなデータソースを
設定してください。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-008-1024x517.png)
4. ギャラリーに項目を追加する
データソースに接続できましたが、何も表示されていないので項目を追加します。
「[挿入]ペインから項目を追加する」をクリックします。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-009-1024x516.png)
[挿入]ペインが表示されました。次にテキストラベルを挿入します。valueの値が表示されました。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-010-1024x515.png)
このままではわかりづらいので見た目を適当に調整します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-011-1024x517.png)
次に四角形を追加します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-012-1024x517.png)
適当にサイズを変更して境界線っぽくします。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-013-1024x517.png)
わかりやすいようにギャラリーの背景色を変更します。
背景色はギャラリーの「TemplateFill」プロパティから変更できます。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-014-1024x517.png)
5. ギャラリーの高さを変更する
下準備が終わりましたので、ここからいよいよ本題に入ります。
とは言ってもそんなに難しくはありません。一瞬で終わります。
先ほど追加した四角形のY座標を弄るだけです。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-015-1024x517.png)
試しに四角形のY座標を「ThisItem.value * 100」にしてみましょう。
こうすることでY座標の値が「ギャラリーの各アイテムの値×100」になります。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-016-1024x518.png)
実行してみましょう。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-017-1024x554.png)
アイテムの値によってギャラリーの大きさが変わっていることが確認できました。
少しわかりづらいので、四角形のY座標を「ThisItem.value * 50」にセットしてギャラリーのサイズを
変更しました。その結果がこちらになります。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2021-05-21-power-apps-gallery-minor-topic-018-1024x557.png)
以上です。
予定表アプリなんかを作るときに活かせるかもしれません。一度お試しあれ。