Power Apps にはローコード開発だけでなく、オリジナルのコントロールをプロ開発の言語を利用して開発することができます。
その仕組みとしてPower Apps Component Framework (PCF) が提供されています。今回はその方法について解説します。
目次
公式ドキュメント
以下のような公式ドキュメントが提供されています。
コミュニティで開発されたコントロールをすぐに利用する
PCFを使って作成された多くのコンポーネントはコミュニティで公開されています。
これにより、自分で開発しなくてもダウンロードしてソリューションをインポートすればすぐに使えるので、自前で開発を着手する前に、すでにコミュニティにコントロールが存在しているかどうか確認すると良いでしょう。
前提条件
PCFという手法はローコード開発ではなく、プロ開発でのPower Apps の拡張です。以下のような知識が必要となります。
- フロントエンド開発の知識
- TypeScript での開発
- XML の内容を見て理解できる知識
- Power Platform CLI の知識
フュージョン開発という考え方があります。ご自身で開発しなくても、プロ開発ができる人にプロコードの部分 = PCFを開発してもらい、市民開発者は利用して、ユーザー側が使いやすい「画面側の開発をする」という役割分担もPower Apps は非常に親和性が高いです。
そういった、チームでの開発も考えてみましょう。
- プロ開発ができる人にプロコードの部分 = PCFを開発する
- 市民開発者は利用して、ユーザー側が使いやすいような画面側の開発をローコードで行う
Power Platform でのフュージョン開発 – Power Platform | Microsoft Learn
1: フュージョン開発アプローチとは? – Power Apps | Microsoft Learn
事前準備
各種環境の準備を整える必要があります。ローコードがメインの方は、いきなり面食らう方もいるかもしれません。
プロ開発ではこういった開発前の準備が多く必要なのはよくあることです。今回が初めて、という方はぜひCopilot に教えてもらいながら試してみてください。
| 必要な項目 | 説明 |
|---|---|
| Visual Studio Code | Visual Studio Code はPower Platform CLI を実行するために必要 |
| Power Platform Tools Visual Studio Code 拡張機能の インストール | Visual Studio Code にて、 Visual Studio 拡張機能から Microsoft Power Platform CLI をインストールする |
| Visual Studio 2022 IDE | プロジェクトの確認やNuget パッケージ管理を行うために必要 |
| PCFを環境で有効にする | Power Platform 管理センター > 環境 > [環境名] > 設定 > 機能 以下の項目をオンにする  |
| Visual Studio Tools | Build Toolをダウンロードする。Build する際にDeveloper Command Prompt を利用するため必要 |
| Visual Studio用 .NET SDK | Build Tool を利用する場合は不要だが、必要に応じて.NET SDK も利用する |
| Nuget をパッケージ マネージャーに追加する | Visual Studio > ツール > Nuget パッケージマネージャーの設定にて、以下のソースが登録されていることを確認します。 登録されていなかった場合登録します。 名前: nuget.org |
開発の全体像
このようなフォルダ階層を作成し、最終的にはPower Platform にZip形式で取り込むことができるソリューションを作成します。ソリューションは以下の図では一番右に位置しているStarRatingView です。
作成手順概要
以下のようなステップで開発を行います。今回は以前作成したStar Rating View プロジェクトを参考にソリューションの出力方法を紹介します。
PCFを作成するフォルダを作成し、そこにプロジェクトを作成します。
作りたいコントロールを開発します。
Power Platform に取り込めるソリューションを出力するためにプロジェクトを作成します。
Power Platform をソリューションを取り込み動作を確認します。
プロジェクト初期化
PCFのプロジェクトを作成し初期化します。この時、GeekNamespace と StarRatingControl の部分は開発するテーマに応じて設定します。
コピーしました！
pac pcf init --namespace GeekNamespace --name StarRatingControl --template field --run-npm-install開発
コードは別途開発する必要があります。今回利用している私が開発したサンプルコンポーネントは以下の記事でソースコードを確認できます。
補足: リアルタイムにプレビューする方法
以下のコマンドを利用することでリアルタイムでプレビューを見ながら開発することができます。
コピーしました！
npm start watchビルドの実行
データ型を更新します。
コピーしました！
npm run refreshTypesビルドを実行します。
コピーしました！
npm run buildコンポーネントをCDSプロジェクトに登録
PCFプロジェクト作成時に作成したプロジェクトのディレクトリに移動します。今回参考にしているコントロールのプロジェクトはStarRatingControl としており、こちらに移ります。
コピーしました！
cd StarRatingControlCDSプロジェクトを格納するディレクトリを作成します。今回は、StarRatingControl のディレクトリにて、ソリューションのフォルダ StarRatingViewを作成し、そのディレクトリに移ります。
Dataverse ソリューション名としたい名前をディレクトにつけるとわかりやすく便利です。
コピーしました！
mkdir StarRatingView
cd .\StarRatingControl\StarRatingViewCDSプロジェクトを初期化します。これによりCDSプロジェクトが作成されます。
発行者は自分のものを利用するようにしてください。
コピーしました！
pac solution init --publisher-name geekfujiwara --publisher-prefix geek作成されたCDSプロジェクトファイルは、以下のようにフォルダ名を自動的に継承されて作成されます。
開発したPCFソリューションをリファレンスに追加します。
コピーしました！
pac solution add-reference --path ..\..\ソリューションの出力
ソリューションのメタデータの設定を行うため、以下の階層に存在しているSolution.xmlを編集します。
自動作成された状態から、以下の情報の更新がおすすめです。必要に応じてメタデータを更新してください。
それぞれの情報は以下のように使われますが、既定では作成したディレクトリ名が利用されます。
| XML での見え方 | ソリューションでの見え方 |
|---|---|
 |  |
Developer Command Prompt を起動します。Windows キーをクリックし、Developer Command Prompt と検索して起動します。
CDSプロジェクトの存在しているディレクトリにて作業するため、テキストとしてクリップボードにコピーします。
クリップボードにコピーしたディレクトリに移動します。
コピーしました！
cd C:(..)StarRatingControl\StarRatingViewパッケージを利用して更新します。
コピーしました！
msbuild /t:build /restoreCDSプロジェクトをビルドしてソリューションを出力します。
コピーしました！
msbuild出力が完了すると、ビルドに成功しましたというメッセージが表示されます。
bin フォルダが作成されていますので、この中に移ります。
さらに、Debug フォルダが内包されております。
このフォルダの中に、Power Platform にインポートできるソリューションファイルが出力されています。
Power Platform でソリューションをインポートする
Power Apps 作成者ポータル で開発したソリューションをインポートします。
暫く待つとインポートされます。
カスタムコントロールが一つだけ含まれているソリューションがインポートされました。
Star Rating View ソリューションの入手
GitHub にソリューションが公開
今回紹介したソリューションはGitHub に公開されております。ご興味がございましたらご利用ください。
geekfujiwara/PCF-StarRatingView: 星印で表示するPCFコントロール
以上
ご参考になれば幸いです。
