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

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

生成ページで AI コード生成ツールを使用すると、Power Apps (make.powerapps.com) での UI ベースのエクスペリエンスを補完する代替開発アプローチが提供されます。 このコード優先アプローチは、ローカル開発ツールと CLI ベースのワークフローを使用することを好む開発者や技術作成者向けに設計されています。

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

• プレーン言語要件を使用して新しい生成ページを作成する
• AI ツールを使用して変更または拡張機能を要求して、既存の生成ページを更新する
• PAC CLI コマンドを使用して Power Apps 環境に直接デプロイする
• 任意の IDE および開発ツールをローカルで操作する

どのように機能するのか

1. 自然言語で構築する内容について説明します。たとえば、"収益別に上位のアカウントを表示する生成ページ ダッシュボードを作成する" などです。
2. AI コード生成ツールは、インストールされている生成ページ スキルまたは生成ページに関するその他のコンテキストを使用して、要件に関する明確な質問をします。
3. このツールは、生成ページ用の実稼働対応の TypeScript コードと React コードを生成します。
4. このツールは、 生成ページ PAC CLI コマンドを使用して、コードを環境にデプロイします。
5. 生成ページがモデル駆動型アプリに表示されます。

前提条件

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

ソフトウェア要件

追加条件

• ページをデプロイするモデル駆動型アプリを備えた Power Platform 環境。
• ターゲット環境 に接続されている認証済みの PAC CLI セッション 。
  • 接続の詳細については、 Power Platform CLI の認証 に関するページを参照してください。

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

インストーラーを実行して、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

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

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

インストール後、必要に応じて 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 ツールを使用して会話を開始します。 含めるデータ (どの Dataverse テーブル、またはサンプル モック データを作成するか) など、作成する内容について説明します。 要求があいまいであればあるほど、エージェントが自ら詳細を埋めようとするため、望むだけ具体的に伝えましょう。 また、ビジュアル、テーマ、レイアウトのガイドに役立つ画像やその他の資料を添付または提供することもできます。 例えば次が挙げられます。

   • "アカウント テーブルを使用して収益別に上位 10 件のアカウントを表示する生成ページ ダッシュボードを作成する"
   • "サンプル データを使用して連絡先レコードを作成および編集するための生成ページ フォームを作成する"
   • "インシデント テーブルを使用してマップにインシデント レポートを表示するための生成ページを作成する"
   • "最新の青いテーマを使用して営業案件を含む営業パイプラインの視覚化用の生成ページを作成する"

2. 明確な質問に答えます。 AI ツールは、要件を理解するために質問します。 ビジネス ニーズとデータ要件について具体的に説明し、モバイル要件を早期に特定し、特定の UI コンポーネントまたはレイアウトの基本設定について言及します。

3. 実装計画を確認します。 AI ツールでは、構築するコンポーネント、使用する Dataverse テーブルと列、主要な機能と相互作用、およびデータ取得アプローチについて説明する計画が示されます。 プランが要件を満たしていることを確認するか、変更を要求します。

4. コードを確認してデプロイします。 AI ツールによって、完全な TypeScript コードが生成されます。 準備ができたら、必要に応じてサイトマップ名を指定して、ページを発行または展開するようにツールに依頼します (ツールは既定でわかりやすい名前を生成します)。

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

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

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

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

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

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

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

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

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

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

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

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

ローカリゼーション

Claude Code または GitHub Copilot CLI 用の 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 テーブルにのみ接続できます。
• コラボレーションはサポートされていません。一度に 1 つの生成ページで作業している作成者は 1 人だけであることを確認してください。
• サポートされているデータ型は、選択肢、通貨、顧客、日付と時刻、日付のみ、10 進数、浮動小数点数、画像、ルックアップ、複数行テキスト、状態、状態理由、テキスト、整数、はい/いいえ、一意識別子です。

関連するコンテンツ

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