本日はAWESOME-COPILOTの技術調査枠です。
AWESOME-COPILOTのドキュメントを読みながら実際に操作を試して記事に残します。
今回はカスタムインストラクションの一つCode Componentsについてです。
Code Components
Code ComponentsはPower Apps Component Framework（PCF）の「Code Component」開発に関するベストプラクティスです。
PCFはMicrosoft Power Appsで使うカスタムUIコンポーネントの仕組みです。
HTML/CSS/TypeScriptなどのWeb技術で作ることができ、Power Apps の画面にネイティブUIのように組み込むことができます。
以下のページからCode Componentsのインストールボタンをクリックして取得します。
github.com
インストールボタンを押してCode Componentsをダウンロードします。
すると.github/instructions配下にインストラクションがインストールされます。
インストールしたインストラクションはCopilotの動作に自動的に適用されます。
このインストラクションを読み込むと、CopilotはPCF Code Component の構造を理解した前提でコード生成・提案を行います。
具体的にはCopilotは以下のような行動をとります。
PCF Code Componentの標準構造を前提にする
CopilotはPCFコンポーネントの典型的な構造に沿ってコードを提案します。
例えば以下のような構造です。
pcf-control/ ├ ControlManifest.Input.xml ├ index.ts ├ css/ ├ resources/ └ package.json
それぞれの役割は以下の通りです。
| ファイル | 役割 |
|---|---|
| ControlManifest | コンポーネント定義 |
| index.ts | UIロジック |
| css | スタイル |
| resources | 画像など |
TypeScriptを使ったPCF開発を推奨
PCF Code ComponentはTypeScriptベースで作ることが推奨されています。
Copilotは以下を活用したコードを生成します。
- 型安全
- IntelliSense
- API型定義
Power Appsデータ連携を考慮
PCFコンポーネントはDataverse/Power Appsフィールドと連携します。
Copilot は以下を考慮したコードを提案します。
- input property
- output property
- field binding
UIコンポーネント設計
PCFはUIコンポーネントなのでCopilotは以下を考慮したコードを提案します。
- 再利用可能UI
- アクセシビリティ
- レスポンシブ
コンポーネントのライフサイクル
PCFコンポーネントにはライフサイクルがあります。
Copilotは次のメソッドを適切に使う設計を提案します。
| メソッド | 役割 |
|---|---|
| init | 初期化 |
| updateView | UI更新 |
| getOutputs | 出力 |
| destroy | cleanup |
パフォーマンス最適化
CopilotはPCF UIのパフォーマンスを考慮します。
Power Apps UIは大量のデータ表示で重くなりやすいため以下の要素は重要です。
- 不要なDOM更新を避ける
- 再レンダリング最小化
- 軽量コンポーネント
Power Platformのセキュリティ
Copilotは以下のPower Platformの制約を考慮します。
- Dataverse権限
- フィールドアクセス
- API使用制限
PCF開発ワークフロー
Copilotは次の開発手順も案内します。
- PCFプロジェクト作成
- TypeScriptコード実装
- build
- Power Apps へインポート
例えば以下のようにPCFはNode.jsツールでビルドします。
npm run build
