【Power Apps】開発効率が向上！カスタムコンポーネントの作成方法のご紹介

こんにちは、MS開発部の加藤です。

今回はPower Appsで再利用可能な要素であるカスタムコンポーネントについて、
概要から作成方法、追加方法まで詳しくご紹介していきます。

カスタムコンポーネントを使用することで、再利用性と効率性を向上させるのに役立ちます。
そのため、複数の画面で同じ機能やデザインを実装する際の重複した作業の軽減や、チームでの作業の
効率化が図れるなど、PowerAppsアプリケーションの開発効率を向上させることが可能になります。

カスタムコンポーネントとは

カスタムコンポーネントとは、
Power Appsアプリケーション内で再利用可能な要素のことで、
Power Appsで作成したコントロールや要素を、複数の画面で再利用することが可能になります。
そのためカスタムコンポーネントは、繰り返し使用される要素（ヘッダーやフッター等）や
特定の機能を持つ要素を作成するために使用されます。

また、カスタムコンポーネントは、
ギャラリーやフォーム（SharePointフォームも含む）などのコンテナ内に挿入することができます。
コンポーネント内で変数を作成したり更新したりするためには、Set関数を使用する必要があります。
これらの変数のスコープはコンポーネント内に限定されますが、
カスタム出力プロパティを通じてコンポーネントの外部からアクセスすることも可能です。

カスタムコンポーネント利用のメリットは、以下3点が挙げられます。

メリット1：再利用性

カスタムコンポーネントを作成することで、
同じ機能やデザインを複数のページやアプリで再利用することが可能になります。
これにより、同じ作業を何度も繰り返す必要がなくなり、開発時間や手間を削減することができるほか、
アプリ内の異なる画面や部分で一貫したデザインや機能を提供することができます。

メリット2：拡張性

カスタムコンポーネントは、既存のPower Appsアプリに追加するだけで簡単に拡張可能です。
また、作成したカスタムコンポーネントの修正が必要な場合は、一箇所で行うことが可能なため
複数の画面や部分を個別に修正する必要がなくなり、メンテナンスの効率が向上します。

メリット3：チーム作業の効率化

複数の開発者が独自のカスタムコンポーネントを作成し、
それらを組み合わせてアプリを開発することで同時に作業を進めることが可能になります。
カスタムコンポーネントはコンポーネントライブラリで共有することができます。
そのため、開発チーム内でカスタムコンポーネントを共有し、
チーム全体で一貫性を持ったアプリの開発を行うことができます。

以上3点のメリットにより、Power Appsのカスタムコンポーネントを利用することで、
効率的なアプリ開発や柔軟なカスタマイズが可能となることが分かります。
では実際に、カスタムコンポーネントの作成方法をご紹介します。

カスタムコンポーネントの作成方法

1．「アプリ」>「コンポーネントライブラリ」>「+新しいコンポーネントライブラリ」を選択します。

2．カスタムコンポーネントの名前を入力し、作成をクリックします。

3．カスタムコンポーネントの編集画面が表示されます。
「+挿入」からカスタムコンポーネントに含まれるコントロールやプロパティを設定します。

今回は、以下のようなフッターを作成しました。
（「歯車」ボタンを押下すると「ホーム」「ログアウト」が表示される仕様です）

4．カスタムコンポーネントのプロパティを設定するために、
「カスタムプロパティ」から設定を行います。プロパティを設定することで、
カスタムコンポーネントを使用する他の画面での動作や表示を制御することが可能です。

4．1「+新しいカスタムプロパティ」> 各項目を入力 > 「作成」を選択します。

4．2「ホーム」のアイコン又はテキスト押下時にホーム画面に遷移するように設定したいので、
【OnSelect】にNavigate（コンポーネント名.先ほど作成したカスタムプロパティ名）を入力します。
※「戻る」ボタンや「更新」ボタンについての設定はここで指定しません。
理由については、後述の関数についてでご説明しています。

5．カスタムコンポーネントの作成が完了したら、保存して閉じます。

カスタムコンポーネントの追加方法

1．カスタムコンポーネントを追加したいキャンバスアプリを開きます。
2．「挿入」>「コンポーネントをさらに取得」> 該当のカスタムコンポーネントを選択 >
「インポート」を選択して、カスタムコンポーネントを追加してください。

3．カスタムコンポーネントを追加したい画面を選択 >「挿入」>「ライブラリコンポーネント」から
該当のカスタムコンポーネントを選択して追加します。

4．プロパティの設定 で設定したカスタムプロパティを指定していきます。

4．1画面遷移をするために、「+新しい画面」から新しい画面を作成します。
（今回は、「ホーム画面」ボタン押下時に遷移する、ホーム画面を作成しました。）

4．2 カスタムコンポーネントを選択し【Home】に上記で作成したスクリーン名を入力します。
（今回は、【Home】ですが、プロパティの設定 で追加したカスタムプロパティを選択してください）

以上がPowerAppsでカスタムコンポーネントを作成、追加する手順です。
カスタムコンポーネントを使用することで、再利用可能な要素を容易に作成することができ、
アプリケーションの開発効率を向上させることができます。

カスタムコンポーネントを作るときの注意点

関数について

カスタムコンポーネントを作成する際に最も気を付ける点は、関数の設定です。

例えば、カスタムコンポーネント内に配置したボタンのOnSelectに
Navigate(○○ページ)と設定すると、設置したカスタムコンポーネントの
全てのボタンから設定した○○ページに飛んでしまうことになります。
要するに、使用するページで共通して使用する関数しか書いてはいけないということです。

そのためコンポーネントはあくまでデザインで、関数等は各ページにコンポーネントを
設置したあとに書いて使う方が良いのではないかと感じました。

インポート及びエクスポートについて

この機能は廃止されたため、コンポーネントのインポートおよびエクスポート機能はデフォルトで無効になっています。 コンポーネントを操作するためにお勧めする方法として、コンポーネント ライブラリ を使用すると、機能が削除されるまで例外としてアプリごとにこの機能を有効にすることができます。 これをするには、Power Apps Studio のアプリを編集する に続いて、設定 > 今後の機能 > リタイア に移動し、 コンポーネントのエクスポートとインポート をオンに設定します。
引用元：コンポーネントをインポートおよびエクスポートする (廃止)

インポート及びエクスポート機能は上記の手順で利用することが可能です。
※ただ、記載がありますように廃止された機能の為、利用の推奨はしません。

まとめ

今回は、Power Appsカスタムコンポーネントの概要から作成方法、追加方法までご紹介しました。
容易に作成、拡張することが可能なカスタムコンポーネントの魅力は伝わりましたでしょうか？

カスタムコンポーネントを使用することで、再利用性と効率性が向上するのに役立ち、
重複した作業の軽減や、チームでの作業の効率化が図れる点など、PowerAppsアプリケーションの
開発効率を向上させることが可能になるというメリットがお伝えできたかなと思います。
是非キャンバスアプリ開発の際は、お試しください！

ここまでご愛読いただきありがとうございました。