AI コード生成ツールを使用して生成ページを作成および編集する

この記事では、GitHub Copilot CLI などの AI コード生成ツールを使用して、Power Appsでモデル駆動型アプリの生成ページを作成および編集する方法について説明します。 このアプローチを使用すると、高度なコード生成機能を開発ワークフローに直接統合して、新しい生成ページを作成したり、自然言語命令を使用して既存のページを反復処理したりできます。 ページでは、Microsoft Dataverse テーブル、Power Platform コネクタ (プレビュー)、Dataverse カスタム API (プレビュー) を使用できます。

生成ページで AI コード生成ツールを使用すると、Power Apps (make.powerapps.com) での UI ベースのエクスペリエンスを補完できます。 このコード優先アプローチは、最新の AI モデルにアクセスしたい、またはローカル開発ツールや CLI ベースのワークフローを使用することを好むすべてのメーカーまたは開発者に適しています。

コード生成ツールでできること

• プレーン言語の要件から 1 回の実行で 1 つ以上の生成ページを作成する
• ページに必要なサポート Microsoft Dataverse テーブルを作成するか、新しいテーブルのサンプル データを含む既存のテーブルを再利用します
• (プレビュー)Power Platform コネクタを使用して Dataverse の外部のデータに接続 する
• (プレビュー)Dataverse カスタム API を使用してサーバー側ビジネス ロジックを呼び出す
• 成果物を新規または既存のアプリとソリューションに配置する (その場でのアプリまたはソリューションの作成を含む)
• AI ツールを使用して変更または拡張機能を要求して、既存の生成ページを更新する
• PAC CLI コマンドを使用して Power Apps 環境に直接デプロイする
• 生成されたコードに対すると IntelliSense のサポートを使用して、任意の IDE および開発ツールをnpm installする

どのように機能するのか

1. 自然言語で構築する内容について説明します。たとえば、"収益別に上位のアカウントを表示する生成ページ ダッシュボードを作成する" などです。
2. プランナー エージェントが要求を分析し、計画を提案します。 このプランには、1 つ以上のページ、Dataverse テーブル、コネクタを使用したデータ ソース、ページに必要なカスタム API、成果物が含まれるアプリとソリューションが含まれる場合があります。 その後、プランナーは特殊なエージェントに委任して、プランの説明を作成します。 たとえば、テーブル ビルダーやページ ビルダーなどです。
3. 構築する前に、計画を確認して調整します。 ページ数の変更、データ ソースのスワップまたは追加、別のアプリのターゲット設定、または成果物を別のソリューションに配置できます。
4. エージェントは、ローカル開発用のサポート ファイルと共に、ページまたはページの運用対応の TypeScript コードと React コードを生成します。
5. このツールは、 生成ページ PAC CLI コマンドを使用して成果物を環境にデプロイし、必要に応じて、生成されたテストでページを実行するブラウザー内検証ステップを実行します。
6. 生成ページがモデル駆動型アプリに表示されます。

前提条件

開始する前に、ここで説明する必要なソフトウェアとアクセス許可があることを確認します。

ソフトウェア要件

追加条件

• ページをデプロイするモデル駆動型アプリを備えた Power Platform 環境。
• ターゲット環境 に接続されている認証済みの PAC CLI セッション 。
  • 接続の詳細については、 Power Platform CLI の認証 に関するページを参照してください。
• コネクタベースのページ (プレビュー) の場合、使用する各コネクタに対して、既存の認証済み Power Platform 接続 が必要です。 エージェントは、必要に応じて接続参照を作成できます。
• Dataverse カスタム API (プレビュー) を呼び出すページの場合、ターゲット環境でサポートされている既存のカスタム API。 サーバー側ロジックを実装して生成ページに公開するには、 Dataverse プラグインを作成し、 プラグイン登録ツールを使用してカスタム API を作成 し、プラグインの種類に関連付けます。 構成の詳細については、 カスタム API の作成と使用に関するページを参照してください。
• 生成ページ テレメトリを Azure アプリケーション Insights (プレビュー) にエクスポートするには、管理者が Power Platform 管理センターで環境の Application Insights データエクスポートを設定する必要があります。 環境は、Application Insights データエクスポートの要件を満たしている必要があります。

プラグインをインストールする

インストーラーを実行して、PowerShell または Windows コマンド ウィンドウですべての Power Platform プラグインを設定します。

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

インストーラーは自動的に次の手順を実行します。

• 使用可能なツールを検出します (GitHub Copilot CLI、Claude Code)
• プラグイン マーケットプレースを登録し、すべてのプラグインをインストールします
• プラグインが最新の状態を維持するように自動更新を有効にします

インストール後、必要に応じて AI ツールを再起動します。

生成ページ プラグインのみをインストールする

GitHub Copilot CLI または Claude Code 用の生成ページ プラグインのみをインストールするには:

1. Power Platform Skills Marketplace プラグインを追加します。 /plugin marketplace add microsoft/power-platform-skills
2. Power Apps プラグインをインストールします。 /plugin install model-apps@power-platform-skills

インストールが完了したら、次のいずれかの方法でプラグインを使用できます。

• /genpage コマンドを明示的に実行する。
• 作成するページについて説明します。 このツールはプラグインを自動的に検出して使用します。

その他の AI コード生成ツールの使用

その他の AI コード生成ツールの場合は、ツールが Power Platform スキル GitHub リポジトリから生成ページ リソースにアクセスできることを確認します。 model-apps プラグイン フォルダーには、コンポーネント ドキュメント、サンプル コード、PAC CLI コマンド リファレンス、および複数の言語とリージョンをサポートするページを作成する方法など、生成ページの要件に準拠したコードを作成するために必要なワークフロー命令が含まれています。 これらのリソースにアクセスして、任意のツールで使用する方法については、リポジトリ の readme を参照してください。

スキルの概要

Power Apps プラグインは、生成ページを操作するためのこのスキルを提供します。

このスキルを使用すると、構築する内容を記述し、AI ツールで生成ページ用の完全な TypeScript コードと React コードを生成し、それを Power Apps 環境に直接デプロイすることができます。

新しい生成ページを作成する

新しいページまたは一連のページを最初から作成するときは、このワークフローに従います。

1. AI ツールを使用して会話を開始します。 作成する内容について説明します。 具体的な内容でも、自由度の高い内容でも構いません。要求が曖昧であればあるほど、エージェントが自動的に内容を補完してくれます。 また、画像やその他の素材を添付して、ビジュアル、テーマ、レイアウトをガイドすることもできます。 例えば次が挙げられます。

   • "アカウント テーブルを使用して収益別に上位 10 件のアカウントを表示する生成ページ ダッシュボードを作成する"
   • 「ボランティアのサインアップを管理するための 2 つのページを作成します。1 つはオープン シフトを参照し、1 つはサインアップを確認するために、サンプル データを使用します。
   • "インシデント テーブルを使用してマップにインシデント レポートを表示するための生成ページを作成する"
   • "Project ファイルSharePoint listからドキュメントを表示するページを作成します。"
   • " ApproveOrder カスタム API を呼び出す [承認] ボタンを使用して注文レビュー ページを作成します。"

2. 必要に応じて、[作成] または [編集] を選択します。 新しいページが必要かどうか、または既存のページを更新するかどうかが Planner エージェントで不明な場合は、確認が求められます。 このワークフローに従うには、新しいページを作成することを選択します。 編集については、「 既存の生成ページを編集する」を参照してください。

3. 何を構築すべきかに関する質問に答えます。 プランナーは、必要なページの種類を尋ね、いくつかの例を提供し、使用するデータ、レイアウト、表示する情報、操作などのカスタムの説明を受け入れる場合があります。 ビジネス ニーズとデータ要件について具体的に説明し、モバイル要件を早期に特定し、UI コンポーネントまたはレイアウトの基本設定について言及します。 また、プランナーは、Dataverse テーブル、Power Platform コネクタ、カスタム API、ハードコーディングされたサンプル データを使用するかどうか、ページを既存のアプリに追加するか、新しいアプリを作成するかなどの明確な質問をする場合もあります。

4. プランを確認して調整します。 プランナーは、ビルドするページまたはページ、Dataverse テーブル、コネクタでサポートされるデータ ソース、または使用するカスタム API、ページをホストするアプリ (新規または既存)、成果物が存在するソリューションを含むプランを提示します。 エージェントを反復処理して、変更したい内容 (ページ数、使用するテーブルまたはカスタム API、ターゲット アプリ、ターゲット ソリューションなど) を調整します。 意図と一致する場合は、プランを確認します。

5. エージェントにビルドとデプロイを行わせます。 特殊なエージェントは、ページまたはページ、サポート テーブル、コネクタまたはカスタム API バインド、およびコードを生成し、環境にデプロイします。

6. 必要に応じて、ブラウザーで確認します。 ビルド後、エージェントは、自動的に生成された Playwright テストをページに対して実行して、読み込みと機能が正しく機能することを確認する、ブラウザーでの検証手順を実行するように提案する場合があります。 これを使用して、手動でテストする前に明らかな問題をキャッチします。

7. テストと反復処理。 Power Appsでモデル駆動型アプリを開き、新しいページに移動します。 変更を加える必要がある場合は、AI ツールに戻り、自然言語で更新内容を記述します。

コネクタ データの使用 (プレビュー)

コネクタのサポートにより、生成ページでは、Power Platform コネクタ エコシステムを介して Dataverse の外部のデータを使用できます。 すべての Power Platform コネクタがサポートされています。

コネクタ データを使用するには、プロンプトでページで使用するサービスとデータについて説明します。 たとえば、SharePoint listのドキュメントを表示するページを作成するようにエージェントに依頼します。 計画中、エージェントは次の処理を行います。

1. 選択した環境で使用できる接続と接続参照を一覧表示します。
2. 接続を選択するように求められます。 接続に接続参照がない場合、エージェントは接続参照を作成します。
3. データセットやテーブル、コネクタ操作などのコネクタ データを選択するように求められます。
4. ページにコネクタ バインドを追加し、ページの展開時に含める。

ビルドを承認する前に、プランのコネクタ データ ソースを確認します。 ユーザーが使用する ID とアクセス許可を使用して、生成されたページをテストします。

カスタム API を使用する (プレビュー)

注文の承認、価格の再計算、トランザクションの検証など、サーバー側のビジネス ロジックをページで明示的に実行する必要がある場合は、Dataverse カスタム API アクションまたは関数を使用します。

カスタム API を使用するには、操作と、ページがプロンプトで呼び出す必要があるタイミングについて説明します。 たとえば、現在の注文に対して ApproveOrder カスタム API を呼び出す [承認] ボタンを追加するようエージェントに依頼します。 計画中、エージェントは次の処理を行います。

1. 選択した環境で使用できる、サポートされているカスタム API を一覧表示します。
2. ページが呼び出すカスタム API を選択するように求められます。
3. ページを生成するときに、カスタム API の要求プロパティと応答プロパティを使用します。
4. カスタム API バインドをページに追加し、ページのデプロイ時に含める。

ビルドを承認する前に、プラン内のカスタム API とその入力を確認します。 ユーザーが使用する ID とアクセス許可を使用して、生成されたページをテストします。

Application Insights を使用して生成ページを監視する (プレビュー)

Power Appsは、生成ページの運用テレメトリを Azure アプリケーション Insights に自動的にエクスポートできます。 この機能は、AI コード生成ツールで作成されたページと、Power Apps (make.powerapps.com) で作成されたページでも同じように機能します。

管理者はまず、Power Platform 管理センターで環境の Application Insights データ エクスポートを構成する必要があります。 エクスポートが構成されると、Power Appsは、発行された生成ページからサポートされているテレメトリを自動的に報告します。 プロンプトと生成されたページ コードでは、Application Insights JavaScript SDK を初期化したり、接続文字列を含めたり、テレメトリ呼び出しを追加したりする必要はありません。

自動的にエクスポートされるテレメトリには、次のものが含まれます。

• 完了したページ読み込みが pageViews テーブルに表示されます。
• exceptions テーブルの未処理のページ レンダリング エラーと Promise の拒否。
• dataApi テーブルでサポートされる dependencies 操作。
• pageViews テーブルの生成ページから開始されたナビゲーション。

生成ページの Application Insights テレメトリはプレビュー機能です。 可用性は、機能のロールアウト中に環境によって異なる場合があります。

セットアップ手順については、「 Application Insights へのデータのエクスポート」を参照してください。 モデル駆動型アプリテレメトリ スキーマとクエリ ガイダンスについては、 モデル駆動型アプリのテレメトリ イベントに関するページを参照してください。

既存の生成ページを編集する

このワークフローを使用して、環境内に既に存在するページを更新します。

1. 既存のページを取得します。 AI コード生成ツールで、サイトマップとアプリのページ ID (GUID) またはページ名を指定して、既存の生成ページの取得を要求します。 たとえば、「デモ アプリからペット導入生成ページを更新したい」などです。

2. 更新プログラムについて説明します。 行う変更を AI ツールに伝えます。 例えば次が挙げられます。

   • "アクティブなレコードのみを表示するフィルターを追加する"
   • "リストではなくグリッドにカードを表示するようにレイアウトを変更する"
   • "時間の経過に伴う導入傾向を示すグラフを追加する"
   • "ペットの気質の新しいユーザー設定フィールドを含むようにフォームを更新する"

3. 確認、発行、テスト、および反復処理を行います。 AI ツールは、要求された変更に基づいて更新された TypeScript コードを生成します。 「新しい生成ページの作成」セクションで説明されているのと同じレビュー、発行、テストプロセスに従います。 ページが要件を満たすまで、自然言語の命令を繰り返し繰り返します。

ローカル開発ファイル

AI ツールでページが生成されると、コードの確認と反復処理を容易にするために、2 つのサポート ファイルもローカル ワークスペースに書き込まれます。

• package.json — 生成されたページがコンパイルされるランタイムと開発の依存関係を宣言します。 生成後 npm install 実行して、これらの依存関係をインストールします。
• genpage.d.ts — dataApi や pageInputなど、npm 経由でインストールされていないオブジェクトのアンビエント TypeScript 宣言。

ファイルの配置と npm install の両方が完了すると、VS Code などのエディターの IntelliSense が生成されたコードに対して動作するため、未解決の型の赤い波線が表示されることなく、ページを確認または手動で編集できます。

入力パラメーターを受け入れるようにページを設定する

生成ページでは、 recordId、 entityName、 dataの入力パラメーターを受け取ることができ、他のページまたはコードから移動したときにコンテキスト データを受け取ることができます。 入力パラメーターを構成するように AI ツールに指示すると、適切な初期化コードが生成され、読み込まれるときにページでこれらの値が読み取られ、使用されます。

プロンプトで必要なパラメーターについて説明します。

• "Account recordId と entityName を受け入れるようにページを設定します。 ページが読み込まれたら、これらのパラメーターを使用して、対応するアカウントの詳細を取得して表示します。
• "カスタム フィルター オブジェクトを含むデータ パラメーターを受け入れるように、このページを構成します。 これを使用して、ページが読み込まれたときに表示されるレコードをフィルター処理します。

ページに移動してこれらのパラメーターを渡すには、「 Client API を使用して生成ページとの間を移動する」を参照してください。

ローカリゼーション

Power Apps スキルを使用して生成ページを作成すると、ローカライズが自動的に処理されます。 エージェントは、環境内で有効になっているすべての言語を検出し、ページがそれらのすべての言語で動作するようにコードを生成します。 このページでは、日付、数値、通貨に関する各ユーザーの優先言語と地域の書式設定が考慮されます。

環境内で有効になっている言語とは異なる言語セットをターゲットにする場合は、次のようにエージェントに調整を依頼できます。

"このページを更新して、英語、フランス語、スペイン語のみをサポートするようにします。"

詳細については、Power Platform Skills リポジトリの ローカライズ手順 を参照してください。

Troubleshooting

Power Apps でページの読み込みに失敗する

生成ページに移動し、エラー メッセージまたは空白の画面が表示される場合:

1. ブラウザー開発者ツールを開きます (ほとんどのブラウザーでは F12)。

2. [コンソール] タブを選択します。

3. スタック トレースを含む完全なエラー メッセージをコピーします。

4. AI コード生成ツールに戻り、コンテキストでエラーを貼り付けます。

   "ページを開くと、次のエラーが表示されます: [ここにエラーを貼り付けます]。 問題を解決してください。

   AI ツールはエラーを分析し、根本原因を特定し、修正プログラムを生成します。

5. 修正プログラムを確認し、ページを再発行するようにツールに依頼します。

動作しているバージョンに戻す

最近の変更によってページが破損したり、問題が悪化したりした場合は、AI ツールに以前の作業バージョンにロールバックするように依頼できます。

"最近の変更によってページが壊れました。 最後に動作しているバージョンに戻してください。

その後、AI ツールは次の手順を実行します。

1. 行われた変更を識別します。
2. 以前の作業コードを復元します。
3. 安定バージョンを再デプロイする

ベスト プラクティス

• シンプルなスタートを切る。 ページの基本バージョンから始め、反復処理して複雑さを増します。
• 頻繁にテストします。 重要な変更のたびに、ページをデプロイしてテストします。
• 具体的であれ。 初期結果を改善するための詳細な要件を提供します。
• 既存のパターンを使用します。 要件を説明するときに、同様のページまたは UI パターンを参照します。
• 生成されたコードを検証します。 生成されたコードを常に確認して、組織の標準とコンプライアンスの要件を満たしていることを確認します。

制限事項

AI コード生成ツールで作成される生成ページの制限事項は、Power Apps Maker ポータルで作成された生成ページの制限事項と同じです。

• サポートされているデータ ソースは、Dataverse テーブルと (プレビュー) Power Platform コネクタです。
• カスタム API のアクションと関数はプレビューでサポートされています。 EntityCollection バインド型または Entity パラメーターを使用するカスタム API はサポートされていません。
• コラボレーションはサポートされていません。一度に 1 つの生成ページで作業している作成者は 1 人だけであることを確認してください。
• サポートされているデータ型は、選択肢、通貨、顧客、日付と時刻、日付のみ、10 進数、浮動小数点数、画像、ルックアップ、複数行テキスト、状態、状態理由、テキスト、整数、はい/いいえ、一意識別子です。

関連するコンテンツ

• モデル駆動型アプリで自然言語を使用してページを生成する
• クライアント API を使用して生成ページとの間を移動する
• 生成ページの dataApi オブジェクト メソッド
• Power Platform CLI リファレンス