【Power Apps】コンポーネント（共通部品化）についてのご紹介

Power Appsカスタムコンポーネントについての
最新情報を記載した記事を公開いたしましたので、 こちらからご覧ください。

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

開発を行う上で、共通部品化（共通コントロール）を行う事が多いと思います。
業務でPower Appsを触れていく中で、
Power Appsにも同等の機能がないか調べた所、「コンポーネント」という機能があることを知り、
とても便利な機能だと感じたため、今回ご紹介していきたいと思います。

※Power Appsのコンポーネント機能は2022/3/11時点でプレビュー機能であるため、
ご利用の際は公式サイトにて最新情報をご確認ください。

コンポーネントとは

公式サイトによると

コンポーネントはキャンバス アプリの再利用可能なビルディング ブロックであるため、アプリ メーカーは コンポーネント ライブラリ を使用してアプリ内でまたはアプリ間で使用するカスタム コントロールを作成できます。 コンポーネントは、カスタム プロパティなどの高度な機能を使用して、複雑な機能を有効にすることができます。 この記事では、コンポーネントの概念およびサンプルを紹介します。

コンポーネントは、類似したコントロール パターンを持つ大きなアプリを作成するのに役立ちます。 アプリ内のコンポーネント定義を更新すると、アプリ内のすべてのインスタンスに変更が反映されます。 コンポーネントは、コントロールのコピーや貼り付けの必要性を排除し、パフォーマンスを改善することにより、工数の重複を減らします。 また、コンポーネントは コンポーネント ライブラリ の使用時に共同開発を作成し、組織内でのルック アンド フィールを標準化するのに役立ちます。

引用元：公式サイト【キャンバス アプリのコンポーネントを作成する (プレビュー)】

上記のように、
作成したヘッダーやフッダーを別ページでも利用したいと考えたとき、コピー＆ペーストをすると、
カラーや大きさなどデザインに変更点があった場合、全画面で同じ変更を加えなければいけません。

これはかなり手間になり、
画面ごとに少し色やサイズがずれてしまうなどの、人為的なミスにつながってしまうリスクもあります。

しかしコンポーネントとして作成したものを使用することで、
変更点があったときはコンポーネントの変更で全画面に反映させることができるため、
手間が省けることや人為的なミスを防ぐことができます。

実際にコンポーネントを作ってみた

では、実際にPower Appsでコンポーネントを作っていきたいと思います。

コンポーネントの作り方

Power Appsを開き、
【アプリ】＞【コンポーネント ライブラリ（プレビュー） 】＞【コンポーネント ライブラリの作成】
をクリックしてください。

すると以下の画面が表示されるので、任意の【名前】入力後 ＞【作成】をクリックしてください。

【コンポーネント】タブをクリックすると
【Component1】と新規のコンポーネントが作成されます。
右横にある3点リーダーの【名前の変更】からコンポーネントの名前が変更できるため、
分かりやすい任意の名前に変更しておくと、編集する際に分かりやすいのでお勧めです。

ここから左横の【＋】タブから【挿入】プロパティから選択し、
コンポーネントとなる、ヘッダーやフッターを作っていきます。

今回以下のような、よく見かけるショッピングサイトのヘッダー部分を作成しました。

Power Appsを使うと、とても簡単にヘッダーのコンポーネントを作成することができます！

作成したコンポーネントは
画面左上の【ファイル】>【名前を付けて保存】>【クラウド】>【保存】で保存することができます。

コンポーネントのインポート方法

続いて作成したコンポーネントを呼び出す方法を説明していきます。

Power Appsで、【作成】>【空のアプリ】>【空のキャンバスアプリ】>【作成】
で新規のキャンバスアプリを立ち上げます。

作成画面の左側サイドバーから【＋】>【挿入】をクリックすると、
一番下に【コンポーネントをさらに取得】というボタンが表示されるのでクリックします。

すると、画面右側に【コンポーネントをインポートします】というタブが表示されるので、
先ほど作成したコンポーネントを選択し【インポート】をクリックします。

すると、画面左側の【挿入】タブに
【ライブラリ コンポーネント】>【Component1】と表示されるのでクリックします。

これで、コンポーネントのインポートが完了します。

コンポーネントを作るときの注意点

関数について

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

例えば、ボタンのOnSelectにNavigate(○○ページ)などと設定すると、
全ての画面のボタンから設定した○○ページに飛んでしまうことになります。

要するに、使用するページで共通して使用する関数しか書いてはいけないということです。

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

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

インポートの方法は、上記の作成方法にてご紹介しました。
Power Appsの同じ環境下のアプリではコンポーネントを使いまわすことができます。

では、別の環境下でコンポーネントを使いまわすことはできるのでしょうか。

結論から言うと、
現在は別の環境下で作成されたコンポーネントをエクスポートすることはできませんでした。

ローカルに保存されたコンポーネント ライブラリ ファイルからコンポーネント ライブラリを使用してコンポーネントをインポートすることはできません。 ファイル > ファイル名を付けて保存 > このコンピューター を使用して、ローカルに保存されたコンポーネント ライブラリをインポートし、アプリとしてコンポーネント ライブラリ アプリをダウンロードしようとする場合、次のエラー メッセージが表示されます:

エラーメッセージ

引用元：公式サイト【コンポーネント ライブラリ (プレビュー)】

このように、同じ環境下ではコンポーネントを使いまわすことはできるが、
別の環境で使いたい場合は１から再度コンポーネントを作る必要があるため、注意が必要です。

まとめ

Power Appsのコンポーネントについての説明から、
実装方法や注意点までまとめていきましたが、いかがでしたか？

本章でもご紹介した通り、コンポーネントとして作成することで、
同じものを使いまわすことができ、作業時間を短縮することができます。

今回ご紹介させていただいたPower Appsや、
Power Platformについて興味をお持ちいただいた方は、下記からご連絡ください。

また、弊社の記事ではありますが、
社会人1年目がPower Platform・Power Appsについて調べてみた
にてPower PlatformやPower Apps のモデル駆動型やポータルについても、
概要を記載させていただいていますので、併せてご確認ください。

ここまでお読みいただき、誠にありがとうございました。