生成 AI を使用してページを構築する

  • 6 分

生成ページを使用すると、プレーンな言語で必要なものを記述することで、モデル駆動型アプリで完全に機能するページを作成できます。 レイアウトとコントロールを手動で構成する代わりに、必要なデータと設計の説明を入力すると、AI エージェントによって基になる React コードが生成されます。

生成ページとは

生成ページは、モデル駆動型アプリ内に存在する AI によって生成される React ベースのページです。 会話エクスペリエンスを使用して、アプリ デザイナーでアプリ エージェントと対話します。必要なページを記述し、必要に応じてレイアウトの画像を添付し、エージェントはリアルタイムで作業コードを生成します。 会話を続けることにより、ページを絞り込むことができます。エージェントにレイアウトの調整、列の追加、エラーの修正を依頼し、問題がなければ発行します。

生成ページはソリューション対応であり、ソリューションにパッケージ化して、他のアプリ コンポーネントと同様に環境間で移動できることを意味します。

Note

現在、生成ページの作成者エクスペリエンスは、米国、英国、オーストラリア、シンガポールにある環境で利用できます。 他のリージョンの作成者は、AI コード生成ツールを使用して生成ページを作成および編集できます。

生成ページを作成する

  1. Power Apps にサインインし、モデル駆動型アプリを開いて編集します。

  2. アプリ デザイナーで、ページの追加>ページの説明 を選択します。 ページ全体の会話エクスペリエンスが開きます。

  3. テキスト ボックスで、目的のページについて説明します。 データ、レイアウト、および動作について具体的に指定します。 例えば次が挙げられます。

    アカウント レコードをカードのギャラリーとして表示するページを作成します。 アカウント名、電子メール、電話番号を含めます。 ギャラリーをスクロール可能にします。

  4. 必要に応じて、データの追加>テーブルの追加を選択して最大 6 つの Dataverse テーブルをリンクするか、データの追加>画像の添付を選択して、レイアウト作成の参考としてスケッチまたはワイヤーフレームをアップロードできます。

  5. ページを生成 を選択します。 エージェントはプロンプトを処理し、コードを書き込み、プレビューをレンダリングします。

  6. [プレビュー] タブで結果を確認します。ページを絞り込むには、エージェントとのチャットを続けるか、[コード] タブの [編集] を選択してコードを直接変更します。

  7. 問題がなければ、[ 保存して発行] を選択してアプリを発行し、ユーザーがページを使用できるようにします。

Important

エージェントは、運用環境に対応したコードの生成をベスト エフォートで試行しますが、出力を検証する責任があります。 生成されたコードを確認して、組織のセキュリティとコンプライアンスの要件を満たしていることを確認します。

ページを反復処理する

最初の生成の後、ページを調整するにはいくつかの方法があります。

  • チャット: 会話を続けて、レイアウトの調整、機能の追加、問題の修正を行います。
  • コードの編集: 生成されたコードを手動で変更するには、[コード] タブの [編集] を選択します。
  • イテレーションの比較: 2 つ以上のイテレーションの後、[コード] タブで [比較] を選択して、バージョン間の相違を確認します。
  • アクセシビリティ アシスタント: 生成するたびに、アクセシビリティ アシスタントはコードをスキャンして問題を検出し、 自動修正 オプションを提供して自動的に解決します。

次に、セキュリティを制御し、モデル駆動型アプリを他のユーザーと共有する方法について説明します。