本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つReact Controls & Platform Librariesについてです。
React Controls & Platform Libraries
React Controls & Platform LibrariesはGitHub Copilot を「Reactベース PCF（Power Apps Component Framework）専門エンジニア」にするルールです。
以下のページからGenaiscriptのインストールボタンをクリックして取得します。
github.com
インストールボタンを押してReact Controls & Platform Librariesをダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。
インストールしたインストラクションはCopilotの動作に自動的に適用されます。
このインストラクションを読み込むと、Copilotは以下のプロジェクトに対してPower Apps PCF + React platform libraries前提でコード生成するようになります。
- TypeScript
- React (TSX)
- JavaScript
- manifest XML
- pcfproj
- csproj
以下の関連ファイルを対象に動作します。
- **/*.{ts,tsx,js,json,xml,pcfproj,csproj}
具体的にはCopilotは以下のような行動をとります。
Reactコンポーネント作成方法
通常のPCF作成時に、--framework reactを指定します。
pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm
| パラメータ | 意味 |
|---|---|
| -n | コンポーネント名 |
| -ns | namespace |
| -t field | フィールド型PCF |
| -fw react | React Control化 |
| -npm | npm install自動実行 |
起動方法は通常PCFと同じです。
npm start
作成後は以下で利用可能です。
- Model-driven app
- Custom pages
- Canvas app
通常PCFとの違い
Manifestのcontrol-type
control-type="virtual"になります。
platform-libraryが追加される
Manifest内に以下が入ります。
<resources> <code path="index.ts" order="1" /> <platform-library name="React" version="16.14.0" /> <platform-library name="Fluent" version="9.46.2" /> </resources>
Power Apps提供React、Power Apps提供Fluent UIを使うことになります。
index.tsの実装が変わる
updateView()でReactElementを返す方式になります。
「Reactコンポーネントを返す」という設計変更です。
bundle.jsが小さい
React/Fluentが同梱されないため、bundle.jsが軽量化されます。
サンプル
以下のReact化サンプルを提供します。
| サンプル | 内容 |
|---|---|
| ChoicesPickerReact | ChoicesPickerControlのReact版 |
| FacepileReact | ReactStandardControlのReact版 |
Virtual Controlなので高性能です。
対応ライブラリバージョン
現在Power Appsが提供する上限バージョンは以下の通りです。
| ライブラリ | Runtime |
|---|---|
| React | Model: 17.0.2 / Canvas: 16.14 |
| Fluent 8 | 8.121.1 |
| Fluent 9 | 9.68.0 |
注意点
Fluent 8とFluent 9は同時利用不可なのでManifestでどちらか一方のみを指定します。
