Power Appsでモダンなサイドバーをコンポーネントとして作成する

# はじめに
`Power Apps`はスピーディーにアプリケーションを作成できる私の大好きな製品です。
しかしながら一からアプリケーションを作ると、GUI形式で画面を構成することが手間に感じます。

`GhatGPT`や`Claude`をはじめとして、~~AI驚き屋さんが拡散しまくっている通り~~コードで作成したほうが速いのでは??という場面も少なくありません。
特に**自分がよく使う部品を再利用する**という観点で、[コンポーネント ライブラリ](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/component-library)を活用することがベターチョイスでしょう。

今回はモダンなカッコよさげな`折りたたみできるサイドバー`をコンポーネントとして作っていきたいと思います。

# [コンポーネント ライブラリ](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/component-library)
[コンポーネント ライブラリ](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/component-library)は、**複数のアプリケーションで再利用できるハコのようなものです。**
**こちらで作成・更新された内容は同期され、複数のアプリケーションに機能を共有します。**

複数の作成者で共有することができ、いわゆる**二度手間を防ぎます。**

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/component-library

今回はコチラで`折りたたみできるサイドバー`を作っていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/cfa9b029-9770-8401-bfb2-db8b0a038be8.png)

# 折りたたみできるサイドバー - Collapsible Sidebar
全て`クラシック コントロール`を用いて、`折りたたみ式サイドバー`を作成しました。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">サイドバーのコンポーネントをもくもく作っていたら終わっちゃいました（まる <a href="https://t.co/XdBOLtOWvy">pic.twitter.com/XdBOLtOWvy</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1830227156699660297?ref_src=twsrc%5Etfw">September 1, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

`ChatGPT`の画面構成しかり、このようなレイアウトを採用しているサービスは数多く見受けられます。
見慣れたコンポーネントは、ユーザーにとっての使いやすさを提供することにもつながるのではないでしょうか。

~~(個人的にしょっちゅう作ることがつらい)~~ 頻繁に採用する要素は、コンポーネントとして設けておくことが今後の生産性向上にもつながります。

**サイドバー然り、ヘッダーなどよく使うものは、じゃんじゃんコンポーネント化していきましょう。**

:::note info
作者本人の体験として、よくつかうほど再利用できることが望ましいといえます。
:::

## 機能
サイドバーの機能は主に4つ。
 - **展開・折りたたみができること**
 - **メニューを`テーブル`でカスタマイズできること**
 - **カラーやフォントは、入力形式でカスタマイズできること**
 - **レスポンシブに調整できること**

あまり一画面に要素を詰め込みすぎることも、構成としてアンマッチな気もしますが、サイドバーの選択によって機能が変わる画面も、個人的にはイケてる感じで好きです。

### 作り方
まずは構成から。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/6b804f97-6aff-e5fb-7818-3aebb30fe37a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/bab716ad-cb06-f1d2-e332-c774853bb2e1.png)

```plaintext:コントロールの構成
CollapsibleSidebar
└── con_sideMenu (垂直コンテナー)
    ├── ico_sideToggle (クラシック アイコン)
    └── gal_sideMenuItems (垂直ギャラリー)
        └── itm_sideMenuItem (GroupContainer: 水平コンテナー)
            ├── icn_sideMenuItemIcon (クラシック アイコン)
            └── lbl_sideMenuItemText (テキスト ラベル)
```

コントロールこそ少ないものの、各コントロールで設定するプロパティこそ統一性をもたせないと、ゴチャついた見た目になってしまいます。

:::note info
徹底的に統一させたい部分は`パディング`や`コントロールの位置`です。
ここを`Power Appsを作る度`に毎回設定することが、ぶっちゃけ手間、今すぐにやめたい。
:::

### OnSelect プロパティ
画面の折りたたみを制御しているのは、画面上部の`ico_sideToggle`名称の`ハンバーガーアイコン`です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/4bde7ddd-c46d-3da4-e1c6-7eeab94518cd.png)

`OnSelect`プロパティに下記を仕込みます。

```javascript:OnSelect
// # Toggles the sidebar expansion state
Set(isSidebarExpanded, !isSidebarExpanded)
```
`ico_sideToggle`で画面の展開、折りたたみを定義します。
実はこのコンポーネントで書いている`OnSelect`は、上記のみ。

あとは`カスタム プロパティ`を活用して、設定値を統一します。

## [カスタム プロパティ](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-component#custom-properties)

コンポーネントの特徴ですが、`カスタム プロパティ`を設けることができます。
`カスタム プロパティ`は
 - **入力** : コンポーネントで使用するデータを受け取る
 - **出力** : コンポーネントで使用した値を参照させる

このようなことが実現できます。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-component#custom-properties

### `入力`を活用する
まずは`入力`カスタム プロパティを活用していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/371dbb11-8602-4a7c-7127-b29363cf0789.png)

カスタマイズ性の高いコンポーネントにしたいため、下記を定義しました。

| プロパティ名          | データ型 | 用途                             |
|----------------------|----------|----------------------------------|
| SidebarPadding       | 数値   | コンテンツのパディング |
| SidebarIconSize      | 数値   | アイコンのサイズ        |
| SidebarMenuTable     | テーブル    | サイドバーのメニュー項目を定義    |
| SidebarPrimaryColor  | 色    | 主要なカラー |
| SidebarSecondaryColor| 色    | 二次的なカラー |
| SidebarPrimaryFont   | テキスト   | フォント|

結構モリモリですね。
上記を`サイドバー`内のコントロールに仕込むことにより、`カスタマイズ性`を持たせています。

:::note info
[記事の最後にコンポーネントのYAMLソースコードのリポジトリを置いておきますので、どう設定しているかはそちらからご確認ください。](https://github.com/DEmodoriGatsuO/powerapps_component/blob/main/components/collapsible_sidebar/Collapsible_Sidebar.yaml)
:::

### `出力`を活用する
- サイドバーの折りたたみ
- 選択されたメニューとアプリを連動させる

上記を目的に、下記のプロパティを設けています。

| プロパティ名          | データ型 | 用途                             |
|----------------------|----------|----------------------------------|
| SidebarWidth         | 数値   | サイドバーの幅を出力、展開または折りたたみの状態に応じて変化 |
| SidebarSelectedText  | テキスト   | 選択されたメニュー項目のテキストを出力       |

コンポーネントそのものの幅を、コンポーネント内のコントロールから制御することはできません。
そのため、コンポーネントの背景は`Color.Transparent`で透過させ、**伸縮するサイドバーは、`con_sideMenu`というコンテナーに格納しています**

```plaintext:幅(Width)
// Width of the container, adjusts with sidebar expansion
Max(76, If(isSidebarExpanded, App.Width * 0.2, 96))
```

## アプリで活用する
実際にアプリケーションで活用するときは、このコンポーネントを、`コンテナー`に格納して使ってみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/8688d66f-3f39-8cfc-d075-0bf7fbc923b7.png)

コンテナーの種類は何でも構いません。

例のアプリケーションでは、`水平コンテナー`にコントロールを格納します。
`水平コンテナー`に、コンポーネント全てが表示される形で配置し、幅を下記に設定すると

```plaintext:幅(Width)
CollapsibleSidebarDemo.SidebarWidth
```

**コンポーネントの出力プロパティから、コンポーネントの親のコンテナーの幅を定義できます。**
**この設定によりサイドバーが伸縮します。**

:::note info
幅(伸縮可能)はオフにすることを忘れずに実施してくださいね！
:::

アプリケーションでカスタマイズする場合は、フォントを調整したり、アプリのテーマカラーに合わせたりすることが可能です。

# おわりに

あくまで「個人的に調整できればいいな」と思っている範囲の項目を設けておりますので、状況に応じてカスタマイズしてください。

**繰り返しになりますが、クイックにアプリケーションを作成できるPower Appsでも同じ作業を繰り返し、忙殺されるということは、元も子もありません。**

短期的に見れば効果が薄いものの、設けることによって累進的に効果を発揮するものですので、ぜひコンポーネント活用を進めてみてください！

**本日も読んでくださり、ありがとうございました🐟✨**

https://github.com/DEmodoriGatsuO/powerapps_component/tree/main/components/collapsible_sidebar

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Power AppsをPC(ブラウザ)でユーザーに使ってもらうときのTips。共有するAppsのリンクに &amp;source=portal&amp;hidenavbar=true を付けると、<br>- レイアウトが開発で作っているときのアプリの画面と同様になり<br>- またPower Apps特有のナビゲーションバーが隠れます <a href="https://t.co/3vLhVzxiSh">pic.twitter.com/3vLhVzxiSh</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1830223563959509287?ref_src=twsrc%5Etfw">September 1, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>