Power Appsで簡単に再利用できるコントロールを作る方法

![neven-krcmarek-V4EOZj7g1gw-unsplash.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/f78dbc25-e835-da78-cd4f-9dcff52ed8ab.jpeg)

Power Appsを開発するとき、私はどれだけ簡単に作成できるかを考えています。つまり、必要な機能がすでに構築している場合は、コードを再利用します。 Power Appsキャンバスコンポーネントを使用すると、開発者はカスタムコントロールを作成し、それらを複数のアプリで使用できます。コンポーネントを再利用することで、個人的に何百時間もの作業を節約し、アプリのバグの数を減らすことができました。この記事では、最初のPower Appsキャンバスコンポーネントを作成する方法を紹介します。

# はじめに：ヘッダーコンポーネント
ヘッダーコンポーネントは、さまざまなアプリで利用できるレイアウトを簡単に追加することができます。

![プレゼンテーション2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/54db53b3-240a-2f6e-8c51-78ed158b0366.gif)


# 新しいPower Appsキャンバスコンポーネントを作成する
Power Apps Studioを開き、空白から新しいアプリを作成します。ツリービューから[コンポーネント]を選択し、[新しいコンポーネント]をクリックします。コンポーネントに *Header* という名前を付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/8cc1117e-01f8-d7fd-163e-ad401b55beaa.png)

コンポーネントの*Width*プロパティを*App.Width*に、*Height*プロパティを100に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/e8cba09e-4edd-8fe8-5013-95a2c8273e90.png)


次に、タイトルとイメージを表示させるためのコントロールをコンポーネントに追加します。ラベルをコンポーネントと同じサイズで配置し、コンポーネントの左側に画像を配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/8b77f16f-05f6-00b1-0e0f-8e2b94dd0257.png)

次に、画面遷移させるためのコントロールをコンポーネントに追加します。コンポーネントの左側に戻るアイコンを挿入し、コンポーネントの右側に次へアイコンを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/04dac385-4428-ff0b-984b-110ef6ec2dff.png)


# Power Appsコンポーネントに入力プロパティを追加する
Power Appsのすべてのコントロールには、画面上での動作を定義するプロパティがあります。Power Appsコンポーネントも、プロパティを自分で作成する必要があります。ツリービューからコンポーネントを選択し、新しいカスタムプロパティを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/24b6b358-b7ce-7661-1d2b-5d4b6a498094.png)

ヘッダーラベルの値を設定させるために、*Label*という入力プロパティを作成します。表示名と名前に*Label*という単語を入力します。プロパティの型は[入力]を選択し、データ型は[テキスト]を選択します。次に[作成]をクリックします。作成すると、入力プロパティLabelが右のメニューに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/1ff11c84-0898-6044-2522-83e96bf27d6f.png)

次に、コンポーネントの入力プロパティに値を設定します。Labelの*Label*プロパティを選択し、*Power Apps Component*を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/3fc2a7c7-567d-e5ab-1397-46b47f527170.png)

ラベルに値を表示するには、その値をコンポーネントのLabelプロパティにリンクする必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/4d6c22fd-7e30-53d6-163c-f167eb3bf763.png)

このコードをラベルの*Text*プロパティに記述します。

```
Header.Label
```


# 画像とアイコンの表示プロパティを設定する
今度は、画像とアイコンの表示を制御するための入力プロパティを追加します。表示名と名前にそれぞれ*Image*、*Back*、*Next*という単語を入力します。プロパティの型は[入力]を選択し、データ型は[ブール値]を選択します。次に[作成]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/c38ed2e3-303f-54ad-91ca-085d20eb28f0.png)

次に、コンポーネントの入力プロパティに値を設定します。Imageの*Image*プロパティを選択し、*true*を、Backの*Back*プロパティに*false*、Nextの*Next*プロパティに*false*を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/78c9e5d7-7cb1-622d-f944-2a5bc5630e80.png)

画像やアイコンの表示に適用させるには、その値を各コントロールの*Visible*プロパティに設定する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/c92aaecf-f8db-8c4d-58a8-9681d8a1d950.png)

例として、このコードは、次へアイコンの*Visible*プロパティに記述します。

```
Header.Next
```

# アイコンの動作プロパティを設定する
最後に、2つのアイコンに画面遷移の動作をさせるために動作プロパティを設定します。戻るアイコンの*OnSelect*プロパティを *Back()* に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/687daf30-8c92-7024-3625-5c445a1d19e0.png)

次に、次へアイコンの画面遷移をするための入力プロパティを追加します。表示名と名前にそれぞれ*Next Screen*という単語を入力します。プロパティの型は[入力]を選択し、データ型は[画面]を選択します。次に[作成]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/681e94fd-e1c7-98d5-4ea5-464726c26a21.png)

次へアイコンの動作に適用させるには、追加した入力プロパティをアイコンにリンクさせる必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/79865c6e-23e4-4d30-213f-737189237478.png)

このコードを次へアイコンの*OnSelect*プロパティに記述します。

```
Navigate(Header.NextScreen,ScreenTransition.Fade)
```

# Power Appsコンポーネントをキャンバスアプリに挿入します
ヘッダーとなるPower Appsキャンバスコンポーネントが完成しました。それでは、キャンバスアプリに追加しましょう。ツリービューの[画面]タブに移動し、[カスタム]メニューからコンポーネントを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/588905d7-dd8c-a181-8f1e-0864b1ac58ef.png)

これで、コンポーネントが画面に挿入されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/8046592a-fada-54b6-6d72-9650aef3f825.png)


# Power Appsコンポーネントについて詳しく知りたい方へ
Power Appsコンポーネントは開発者が再利用できるコントロール、プロパティを作ることができる機能となってます。[Power Appsの概要](https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-component)をもっと活用してキャンバスアプリの幅を広げていきましょう。