Power Apps Component Framework の概要

  • 5 分

Microsoft Power Apps Component Framework を使用すると、Power Apps アプリケーションおよび Power Pages Web サイトで使用できる再利用可能なコード コンポーネントを作成できます。 標準のコンポーネントではアプリ開発者のニーズが満たされないときは、Component Framework を利用してコード コンポーネントを構築することができます。 コード コンポーネントは、カスタム ユーザー エクスペリエンスを生み出すのに役立つビジュアル コントロールです。 これらのコンポーネントには、実装されているシナリオに固有のルールを適用するために、ビジュアル化を補完するビジネス ロジックを含めることもできます。

たとえば、既存のアプリの詳細フォームは、次の画像のようになります。

Power Apps Component Framework の既存の画面のスクリーンショット。

しかし、カスタム コード コンポーネントを使用するようにアプリを再構成した場合、アプリは次の図のようになります。

カスタムな Power Apps コンポーネントを使用してアプリを再構成したビューのスクリーンショット。

Power Apps Component Framework が存在する前は、HTML Web リソースを利用して、カスタムなあらゆるプレゼンテーションをアプリのフォームに提供していました。 現在では、より最新のフレームワークを使用することにより、他の方法ではアクセスできない機能や、さらに悪いことには Microsoft によってサポートされていない機能をアプリで利用できます。

Power Apps Component Framework の利点

Power Apps コンポーネントは、最新の Web プラクティスをサポートする堅牢なフレームワークを基にして構築されます。 その結果、次のような利点があります。

  • コンポーネントのライフサイクル管理、コンテキスト データ、メタデータなどの機能を公開する、豊富なフレームワーク API へのアクセス。

  • React や AngularJS などのクライアント フレームワークのサポート。

  • Web API、ユーティリティとデータ書式設定のメソッド、カメラ、場所、マイクなどのデバイス機能を介したシームレスなサーバー アクセス。

  • パフォーマンスの最適化。

  • 再利用可能性。

  • 画面サイズ、デバイス、表示方向を問わずに最適な表示と対話エクスペリエンスを提供するためのレスポンシブ Web デザイン原則の使用。

  • すべてのファイルを他のアプリ リソースと共に 1 つのソリューション ファイルにバンドルする機能。

作成できるコンポーネントのタイプ

  • フィールド - フォーム上のフィールドのカスタム コントロール。 たとえば、数値を入力する単純なテキスト ボックスの代わりに、カスタム コード コンポーネントを使用してスライダーをレンダリングできます。 スライダーには、コンポーネントにバインドされている、使用可能な他のデータに基づいてスライダーのストップを制限するカスタム ビジネス ロジックを追加できます。

  • データセット - データの行を表示するカスタム コントロール。 たとえば、本日の予定を表示するための、行と列を含む一般的なグリッドの代わりに、日次のスケジューラ コード コンポーネントを構築できます。 コード コンポーネントには、予定を再スケジュールするためのドラッグ アンド ドロップなどの機能を含めることができます。

クリエーター キットのコンポーネント

Power Platform Creator Kit には、Power Apps Component Framework でよく使用されるコントロールがいくつも集められています。 また、開発の生産性を高めるために役立つテンプレートや、その他のユーティリティも含まれています。 このキットのすべてのコンポーネントに Fluent UI フレームワークを使用することで、一貫性が保たれています。 これらのコンポーネントは、そのまま使用することも、ここからヒントを得て自分でコード コンポーネントを作成することもできます。 コンポーネントのすべてのソース コードを GitHub から入手できます。

コミュニティ コンポーネント

Power Apps コミュニティでは、オープンソース コード コンポーネントを構築し、他のユーザーと共有する活動を行っています。 たとえば、ユーザー入力を正規表現でチェックするなどの一般的な要件がある場合、 クライアント スクリプトを作成してユーザー入力を検証するか、Power Apps のコード コンポーネントを作成し、使用するのも良いですが、 他の誰かが同じ目的で既にコードを作成している可能性があるため、チェックすることをお勧めします。 多数のサンプルが PCF Gallery に含まれています。

ヘルプの参照先

支援が必要になった場合、まずは Power Apps Component Framework、ALM、Pro Dev コミュニティ フォーラムをチェックしてください。 ここでは、さまざまなトピックに関する豊富な質問と回答を見つけたり、自分の質問を送ったりすることができます。