自然言語を使用して、AI を使用して作成された生成ページを構築します。 生成ページは、モデル駆動型アプリでのアプリ設計プロセスを簡素化、加速、改善するために設計された AI 主導のエクスペリエンスです。 アプリ エージェントと対話することで、モデル駆動型アプリで完全に機能するページを作成します。そのためには、自然言語で必要なものを記述し、参照するMicrosoft Dataverseテーブルを指定します。 ページの外観を示す画像を添付することもできます。
ページを記述すると、システムは要件と仕様を処理し、適切なコンポーネントを選択して最適なレイアウトを決定することで、フロントエンドのユーザーエクスペリエンスと対応するビジネスロジックの両方をカバーする React コードをインテリジェントに生成します。 インタラクティブな会話エクスペリエンスを通じて、ページのデザインをリアルタイムで調整し、要素、レイアウト、機能をビジョンに完全に一致させることができます。
開発アプローチ
生成ページは、次の 2 つの方法を使用して作成できます。
- Power Apps (make.powerapps.com): この記事で説明するように、作成者は会話 UI エクスペリエンスを使用して、ブラウザーで直接生成ページを作成して反復処理できます。
- AI コード生成ツール: ローカル開発ツールを使用して TypeScript や React コードに直接アクセスすることを好む開発者は、Claude Code などの外部ツールを使用して、コード優先アプローチと CLI ベースのデプロイを使用して生成ページをローカルで開発できます。 詳細情報: AI コード生成ツールを使用して生成ページを作成および編集する
前提条件
- Power Platform 環境は米国地域にある必要があります。 現在、この機能は他のリージョンでは使用できません。
モデル駆動型アプリに生成ページを作成する
Power Apps にサインインします。
編集するモデル駆動アプリを開く
アプリ デザイナーで、ページの追加>ページの説明 を選択します。
フルページの生成ページ エクスペリエンスが開きます。
テキスト ボックスに、作成するページの種類の説明を入力します。 機能要件と、必要に応じて任意の UX 仕様を含めます。 たとえば、アカウント記録をカードのギャラリーとして表示するページを最新のルック＆フィールで作成することができます。上部に名前、実体画像、Web サイト、電子メール、電話番号を含め、Account テーブルのデータを使用して、ギャラリーをスクロール可能にします。 ページで複数の言語をサポートする場合は、「 生成ページをローカライズする」のガイダンスに従ってください。
データの追加>テーブルの追加 を選択して、必要に応じてテーブルと画像を追加します。 最大 6 つの Dataverse テーブルをリンクすることができます。 スクリーンショットでは、アカウント テーブルが追加されています。
必要に応じて、[ Add data>Attach image]\(データの追加\)を選択して、生成されたページの UI をガイドする 1 つ以上の画像をアップロードします。 これは、ラフなナプキン スケッチでも、高解像度の画像でもかまいません。 イメージは、作成するページ全体の構造またはレイアウトを表すか、または模倣する特定のセクションまたはコンポーネントのビジュアルにすることができます。
メモ
生成されたページに特定のイメージを表示させる場合は、イメージをプロンプトに添付するのではなく、(1) 参照先の Datatable テーブルにイメージを含め、そこからエージェントにイメージを取得してもらうか、(2) イメージをパブリックにホストしてエージェントに URL を付与するか、(3) Web リソースとしてイメージを追加して、エージェントに Web リソースの URL を指定します。
必要に応じて、[ イメージを含める (プレビュー)] ツールを有効または無効にして、エージェントが 25,000 個のストック イメージのキュレーションされた安全なライブラリの画像を利用して、既定/プレースホルダー画像、装飾背景、静的コンテンツ ブロック、より豊富な空またはエラー状態などのユース ケースをサポートできるようにします。
必要に応じて、ページの生成に使用する AI モデルを選択します。
ページの説明が終了したら、ページの生成を選択します。
エージェントは、リアルタイムで観察できるマルチステップ ビルド プロセスを開始します。
- 思考ストリーミング: エージェントはまず、プロンプトの解釈、要件、前提条件、実行計画の概要を示します。
- コード生成: 次に、プランに基づいてページの基になるコードを書き込みます。
- トランスパイル: 生成されたコードは、互換性と適切なレンダリングを確保するためにトランスパイルされます。
- 最終的なレンダリング: 最後に、完成したユーザー エクスペリエンスが表示されます。
このプロセスの最後にユーザー エクスペリエンスが表示されない場合は、[ プレビュー ] タブを選択して表示できます。
生成されたコードを表示し、反復処理して公開する
ページを生成した後、ページを絞り込んで最終処理するオプションがいくつかあります。
生成されたコードを表示および編集する [ コード ] タブを選択して、アプリ エージェントによって生成されたコードを表示します。
出力は、次の 2 つの方法で絞り込むことができます。
- アプリ エージェントと繰り返しチャットして、エラーの修正、レイアウトの調整、機能の追加を行います。
- [コード] タブで [編集] を選択して、コードを手動で 編集 します。いくつかの編集を行った後、[ 保存] を選択して変更を新しいイテレーションとしてコミットするか、[ キャンセル] を 選択して変更を破棄できます。
イテレーションを比較する エージェントで 2 つ以上のイテレーションを完了した後、[コード] タブで [比較 ] を選択して、現在のイテレーションと前のイテレーションのコードの相違を表示できます。
メモ
この機能は現在、現在のセッションの 2 番目のイテレーション以降でのみ使用できます。
クイック リファレンス用のスクリーンショットを添付する チャット エクスペリエンスで、[ アタッチ>追加のスクリーンショット を選択して、現在のプレビューのスクリーンショットと、アプリ エージェントとの次の対話を含めます。 スクリーンショットは、ページのビジュアルを調整するのに役立ちます。 別の方法として、他の画像を添付して、ページ全体またはページの特定の部分のビジュアルを調整することもできます。
アクセシビリティの問題を確認する (新規) コード生成の各イテレーションの後、画面の下部にある アクセシビリティ アシスタント は、生成されたコードを、アクセシビリティに関して評価してスキャンします。 高レベルの状態の更新を画面に直接表示し、パネルで詳細な結果を開くことができます。 [ 自動修正] を選択すると、違反がエージェントに直接渡され、自動的に解決されます。
保存して発行 コマンド バーで 保存 を選択すると、ページの進行状況が失われないようにします。 ページに問題がなければ、[ 保存して発行] を選択して、生成ページを含め、アプリのすべての保留中の変更を発行します。
重要
エージェントは、アクセシビリティとセキュリティのベスト プラクティスに関する考慮事項を含め、完全で実稼働可能なコードの生成をベスト エフォートで試みますが、最終的にはコードの検証を担当します。 生成されたコードが組織の標準とコンプライアンス要件を満たしていることを確認します。
生成ページを使用する一般的なタスク
このセクションでは、モデル駆動型アプリで生成ページを操作するときの一般的なシナリオとタスクについて説明します。
入力パラメーターを受け入れるようにページを設定する
生成ページは、 recordId、 entityName、および data 入力パラメーターを受け取り、移動時にコンテキスト データを受信できるようにします。 パラメーターを受け入れるようにページを構成するには、プロンプトで受け入れるページを記述し、エージェントが初期化コードを自動的にワイヤアップします。 例えば次が挙げられます。
Set up the page to accept an account recordId. When the page loads, use these to fetch and display the corresponding account details.
Configure this page to accept a data parameter containing a custom filter object. Use it to filter the displayed records when the page loads.
生成ページに移動する
Xrm.Navigation.navigateToを使用してプログラムで生成ページに移動し、ターゲット ページが受信するように設定されている場合は入力パラメーターを渡すことができます。 例と完全な API の詳細については、 クライアント API を使用した生成ページとの間の移動に関するページを参照してください。
ページで特定の画像を使用する
生成ページで特定の画像を使用するには、3 つの方法があります。
Dataverse テーブルにイメージを格納する
生成ページによって参照される Dataverse テーブルにイメージを含め、そこからイメージを取得するようにエージェントに指示します。 ページを作成するときに、テーブルから適切なイメージを取得する方法をエージェントに指示します。
Build a product catalog page showing products from the Product table. Display the product image from the ProductImage column, along with the name, description, and price.
外部でイメージをホストし、URL で参照する
外部サーバーまたはコンテンツ配信ネットワーク (CDN) でイメージをホストし、イメージの URL をエージェントに提供します。
Display the company logo using this URL: https://example.com/images/logo.png at the top of the page.
Web リソースとしてイメージを追加する
ソリューション内の Web リソースとしてイメージをアップロードし、その Web リソース URL で参照します。
- イメージを Web リソースとしてソリューションに追加します。
- Web リソース名 (たとえば、
new_/images/banner.png) をメモします。 - ここで説明する Web リソース URL 形式を使用して、プロンプトまたはコードで参照します。
Use the banner image from web resource new_/images/banner.png as the page header background.
ソリューションへの生成ページの追加
生成ページはソリューション対応であり、環境間の移動を容易にするために (アプリを介して) ソリューションに追加できます。 ソリューションに生成ページを追加するには、次の操作を行います。
重要
プレビュー フェーズ中に生成ページが作成された場合は、モデル アプリ デザイナーで生成ページを読み込んで、新しいソリューション対応データ モデルへの 1 回限りの移行を開始する必要があります。 デザイナーでページが読み込まれると、"ページのアップグレード中" という進行状況メッセージが表示されます。 移行が完了するまでウィンドウを閉じないでください。
- 生成ページを含むアプリをソリューションに追加する
- Power Appsで、左側のナビゲーション ウィンドウで Solutions を選択し、目的のソリューションを開きます。
- 「既存のアプリ> アプリ > モデル駆動アプリを追加」を選択します。
- 生成ページを含むアプリを選択します。
-
ソリューションを ( マネージドまたはアンマネージドとして) エクスポートする
- アプリサイトマップがソリューションに含まれていることを確認します。 そうでない場合は、依存関係チェック中に要求する必要があります。
- 生成ページ (UX Agent Project 行) も、サイトマップへの依存関係に基づいて要求されます。
メモ
依存関係チェック中に生成ページが要求されない場合は、次の項目を確認します。
- プレビュー中に作成されたページは、移行された場合にのみ表示されます。 デザイナーに読み込んで移行をトリガーします。
- サイトマップがソリューションに含まれていて、生成ページが移行されている場合は、ページの並べ替えや名前変更、アプリの再発行、エクスポートの再試行など、サイトマップに少し変更を加えてみます。
エクスポート後、アプリと生成ページを別の環境にインポートできます。 ターゲット環境でデザイナーで開くと、最初のプロンプトと発行されたコードのみが使用できます。 エージェントの会話全体は、ページと共に転送されません。
生成ページをローカライズする
生成ページをローカライズするには、プロンプトに次の項目が含まれるようにします。
- 言語を指定します。 ページでサポートする言語 (理想的には言語名と LCID) をエージェントに伝えます。
- 翻訳されたテキストを要求します。 各言語のページ内のすべてのユーザー表示ラベルとテキストの翻訳辞書を作成するようにエージェントに依頼します。
- RTL のサポートを有効にします。 環境にアラビア語やヘブライ語などの RTL 言語が含まれている場合は、適切な右から左へのレイアウトサポートを実装するようにエージェントに依頼してください。
- 地域の書式設定を使用します。 ハードコーディングされた形式やロケール コードを使用するのではなく、Dataverse ユーザー設定から各ユーザーの設定を使用して日付、数値、通貨の書式を設定するようエージェントに依頼します。
実装の詳細なガイダンスとコード パターンについては、Power Platform Skills リポジトリの ローカライズ手順 を参照してください。
メモ
生成ページのサイトマップ エントリは、既定ではローカライズされません。 サイトマップのローカライズは、アプリ デザイナーで個別に処理する必要があります。
制限
生成ページの現在の制限は次のとおりです。
- ページは Dataverse テーブルにのみ接続できます (1 ページで最大 6 つ)。 他のデータ ソースは使用できません。
- プロンプトの最大文字数は 50,000 文字です。
- Power Apps (make.powerapps.com) で生成ページを作成する場合、サポートされているプロンプト言語は米国英語のみです。
- コラボレーションはサポートされていません。 意図しない競合を回避するために、一度に 1 人の作成者のみが生成ページで作業するようにします。
- 以下のデータ型のみサポートされます。
- 選択肢
- 通貨
- 大変お世話になっております
- 日時
- 日付のみ
- 10 進数
- 浮動小数点数
- Image
- 検索
- 複数行テキスト
- ステータス
- ステータスの理由
- テキスト
- 整数
- はい/いいえ
- 一意識別子
よくあるご質問
プラン デザイナーでアプリの設計を開始してから、生成ページを使用することはできますか?
はい。現在、プランと生成ページの間には直接統合されていませんが、プランを使用してテーブルとアプリを定義し、モデル駆動型アプリ デザイナーに切り替えて目的の生成ページを作成できます。
生成ページを使用するために必要な追加料金やクレジットはありますか?
いいえ。生成ページ (およびプラン) の作成者エクスペリエンスでは、追加の AI またはメッセージ クレジットは必要ありません。
UI 生成のガイドにはどのような画像が最適ですか?
目標によって異なります。 最終的なページの外観を正確に把握している場合は、スケッチやワイヤーフレーム (手描きでもデジタルでも) が最も効果的です。 漠然とした概念しか持っておらず、詳細部分をエージェントに委ねたい場合、ホワイトボードやナプキンにサッと描いたスケッチでも十分役立ちます。
生成ページを キャンバス アプリや他の種類のアプリで使用できますか?
いいえ、生成ページは現在、モデル駆動型アプリでのみサポートされています。
環境間で生成ページを再利用またはクローンする方法はありますか?
はい。生成ページは、環境間で移動できるソリューション対応の要素です。 ソリューションでは、最後に発行されたバージョンのコードと最初のプロンプトのみが保持されます。完全なリビジョン履歴は元の環境に残ります。
生成されたコードを手動で編集できますか?
Yes. 生成されたコードを手動で編集するには、[コード] タブの [編集] を選択します。変更内容は新しいイテレーションとして保存されます。 編集内容を保持しない場合は、[ キャンセル] を選択して編集を取り消します。
生成ページによって生成されたコードは、運用環境に対応し、組織の標準に準拠することが保証されていますか?
番号 エージェントは、アクセシビリティとセキュリティのベスト プラクティスを念頭に置いて、高品質で実稼働可能なコードを生成するためのベスト エフォートを試みますが、出力を検証するのはお客様の責任です。 生成されたコードを常に確認して、組織の標準、ポリシー、コンプライアンス要件に合っていることを確認します。
この機能に関するフィードバックを送るには、どうすればよいですか?
生成ページに関するフィードバックを提供する最善の方法は、各反復後に使用できるチャット エクスペリエンスの高評価/低評価ボタンを使用することです。 また、この機能で発生した問題をデバッグまたは再現できるように、関連するコンテンツのサンプルや追加のログファイルを共有する場合は、はいを選択することを強くお勧めします。
自分の環境で生成ページが有効になっていることを確認できない場合はどうすればよいですか?
環境が米国リージョンにあることを確認します。