【Power Apps】コピペで簡単！展開・折りたたみ可能なギャラリーのサンプル

今回の記事では、Power Appsで展開・折りたたみ（開閉、拡大/縮小）ができるギャラリーを実装していきます。
コピペで簡単に実装することができるため、ぜひご自身のアプリに活用いただければと思います。

実現したいこと
実装方法
1. 展開・折りたたみ可能なギャラリーの実装
仕組み
1. ポイント①：チェックボックスによる表示・非表示の制御
2. ポイント②：高さが伸縮可能なギャラリー
まとめ

実現したいこと

完成イメージは次の通りです。

各項目の下矢印ボタンを押すと、詳細説明のラベルが展開されます。
その後に上矢印ボタンを押すと、詳細説明のラベルが折りたたまれます。

実装方法

今回は2024年8月に一般提供が開始された「コードビュー機能」を使っていきます。
プレビュー機能にはなりますが、他者が作ったコントロールを簡単に自環境に導入できます。

コードビューでアプリの機能を理解する (プレビュー) - Power Apps

キャンバスアプリのコードビューでアプリの機能を理解します。

展開・折りたたみ可能なギャラリーの実装

まずは下のYAMLコードをコピーします。（1行目右端のコピーボタンをご利用ください）

- galAccordion:
    Control: Gallery
    Variant: variableTemplateHeightGallery
    Properties:
      Items: |-
        =Table(
            {
                Title: "Power Automateとは何ですか？",
                Details: "Power Automateは、Microsoftが提供するクラウドベースのサービスで、さまざまなアプリケーションやサービス間のワークフローを自動化するツールです。これにより、手動で行っていた時間のかかる業務タスクやプロセスを効率化し、より生産的に作業を進めることができます。プログラミングの知識がなくても、ドラッグ＆ドロップのインターフェースを使用して、簡単にワークフローを作成できます"
            },
            {
                Title: "Power Automateを使用するために必要なものは何ですか？",
                Details: "Webブラウザーと電子メールアドレスが必要です。最新のデバイスやブラウザーで利用可能で、モバイルアプリも提供されています。"
            },
            {
                Title: "Power Automateでどのようなことができますか？",
                Details: "Power Automateでは、Outlook、SharePoint、OneDrive、Google Driveなどの多くのサービスと連携して、メールの自動処理、ファイルの移動、通知の送信など、さまざまなタスクを自動化できます。"
            },
            {
                Title: "テンプレートとは何ですか？",
                Details: "テンプレートは、よく使用される一般的なシナリオ用に事前に作成されたフローのことです。テンプレートを使用することで、簡単にフローを作成し、設定を入力するだけで利用できます。"
            }
        )
        // © 2025 Power 365 Medium, Hiromaru
      DelayItemLoading: =true
      Height: =640
      Layout: =Layout.Vertical
      LoadingSpinner: =LoadingSpinner.Data
      TemplatePadding: =10
      TemplateSize: =640
      X: =40
      Y: =40
    Children:
    - chkDisplayDetails:
        Control: Classic/CheckBox
        Properties:
          Text: =ThisItem.Title
          BorderColor: =Color.Transparent
          CheckboxBackgroundFill: =Color.Transparent
          CheckboxBorderColor: =Color.Transparent
          CheckmarkFill: =Color.Transparent
          Color: =Color.Black
          DisabledBorderColor: =Color.Transparent
          DisabledColor: =Color.Transparent
          DisabledFill: =Color.Transparent
          Fill: =Color.Transparent
          FocusedBorderColor: =Color.Transparent
          FocusedBorderThickness: =0
          FontWeight: =FontWeight.Semibold
          HoverBorderColor: =Color.Transparent
          HoverColor: =Color.Black
          HoverFill: =Color.Transparent
          PaddingLeft: =3
          PressedBorderColor: =Color.Transparent
          PressedColor: =Color.Black
          PressedFill: =Color.Transparent
          Size: =14
          Width: =600
    - icoExpand:
        Control: Classic/Icon
        Variant: ChevronDown
        Properties:
          OnSelect: |-
            =UpdateContext({locExpand: true})
          Color: =ColorValue("#1976D2")
          Height: =16
          Icon: |-
            =// チェックが入っている場合は上矢印、入っていない場合は下矢印を表示
            If(
                chkDisplayDetails.Value,
                Icon.ChevronUp,
                Icon.ChevronDown
            )
          Width: =16
          X: =15
          Y: =18
    - lblDetails:
        Control: Label
        Properties:
          OnSelect: =Select(Parent)
          Text: =ThisItem.Details
          AutoHeight: =true
          Height: =91
          PaddingLeft: =0
          PaddingRight: =20
          Size: =14
          VerticalAlign: =VerticalAlign.Top
          Visible: =chkDisplayDetails.Value
          Width: =550
          X: =50
          Y: =50
    - ctnAccordion:
        Control: GroupContainer
        Variant: manualLayoutContainer
        Properties:
          DropShadow: =DropShadow.Semilight
          Height: |-
            =If(
                chkDisplayDetails.Value,
                lblDetails.Y + lblDetails.Height + 10,
                chkDisplayDetails.Y + chkDisplayDetails.Height
            )
            // © 2025 Power 365 Medium, Hiromaru
          Width: =600

コピーができたら、編集画面のスクリーン上で 右クリック > 貼り付け > コードを貼り付ける（プレビュー）を選択します。