Copilot (プレビュー) を使用して AI で生成したコードを追加する

このトピックはプレリリース ドキュメントであり、変更される場合があります。

Visual Studio CodeのCopilotを使用して AI によって生成されたコードを追加し、自然言語チャットの対話を通じてコードを作成できるようにします。 また、Explain 機能を使用して、既存のコードをさらに詳しく調べ、その意味を学ぶこともできます。 Power Pagesでは、Power Pagesローコード デザイン スタジオで現在サポートされていない HTML、JS、または CSS コードを使用して、サイトのカスタマイズを行います。 この Copilot チャット エクスペリエンスは、あなたのような Power Pages 開発者が、自然言語で期待するコードの動作を説明することでコードを作成できるよう支援します。 その後、生成されたコードを調整して、サイトをカスタマイズするときに使用できます。

Power Pages における Copilot 搭載の Visual Studio Code。

重要

  • これはプレビュー機能です。
  • プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。
  • この機能の能力と制限を理解するには、Copilot を使用した AI 生成コードに関する FAQ を参照してください。

前提条件

Copilotの使用方法と制限事項を理解するには、使用条件と責任ある AI に関する FAQ ドキュメントを確認してください。 Power Pagesで Copilot の使用を開始するには、次の要件を確認してください。

Visual Studio Code

  • 最新の Power Platform ツールと拡張機能をインストールします。

  • Visual Studio Code のサイト ルート フォルダーを開きます。

    Visual Studio Code エクスプローラー。

  • Dataverse Environment 資格情報を使用してPower Pages Copilotにサインインします。

Visual Studio Code の Web 版

また、web 用のVisual Studio Codeを使用してコードを編集するときに、Power PagesでCopilotを使用することもできます。

Web 用 Visual Studio Code のスクリーンショット。

Copilot を使用してコードを生成する

重要

Visual Studio Code の Copilot は Power Pages サイト用のコードを生成するように調整されているため、機能は HTML、JavaScript、CSS などの Power Pages サイトでサポートされている言語に限定されます。 Copilotから生成されたコードは、Bootstrap や jQuery などのサポートされているフレームワークを使用します。

  1. Copilot チャットで、自然言語を使用して必要なコードの動作について説明します。 たとえば、Power Pages Web API を使用したフォーム検証または Ajax 呼び出しのコードなどです。
  2. Copilot チャットで質問を言い換え続け、必要な内容が得られるまで質問を繰り返します。
  3. 生成されたコードに問題がなければ、コード スニペットを簡単にコピーして貼り付けたり、コードを Power Pages サイトに挿入したり、コードをさらに変更したりできます。
  4. 上/下 矢印キーを使用して、最近入力したプロンプト間を移動します。

例:

  • Write code for Web API to fetch active contacts
  • Write code in JavaScript to make sure that submitted value for phone number field is in valid format

注意

  • Copilot生成されたコードには、テーブルまたは列の正しい名前がない可能性があるため、コードを使用する前にこれらの詳細を確認してください。
  • より 正確な コードを生成するには、コードを使用するファイルを必ず開いてください。 たとえば、Web API コードを追加する Web テンプレート を開くか、フィールド検証を追加するフォームのカスタム JavaScript ファイルを開きます。

AI が生成したコードを追加します。

Explain を使用してコードを理解する

Copilot の Explain 機能は、既存のコードに取り組んでおり、それを理解したい開発者にとって役立ちます。 Explain を使用するには、以下の手順に従ってください。

理解するコード行をコード エディターから選択します。 右クリックしてコンテキスト内メニューにアクセスします。 Power Pages の Copilot を選択してから、Explain を選択します。 Copilot は、選択されたコード行をチャット パネルに記録し、コードを説明する応答を提供します。

または、コード行を選択して、Copilot チャット パネルに Explain selected code と入力します。 プロンプトにコードを追加して、Copilot に直接問い合わせることもできます。 たとえば、Explain the following code {% include 'Page Copy'%} と尋ねることができます。

Visual Studio コードで Copilot の Explain 機能にアクセスするためのメニュー選択のスクリーンショット。

既知の問題

場合によっては、プロンプトが悪意のあるコードとして誤って分類されることがあります。

この機能の改善にご協力ください

Copilotチャットのすべての応答で、フィードバック オプションを選択し、応答が好きならサムアップ (👍) を選択するか、気に入らなかった場合はサムダウン (👎) を選択します。 皆様のフィードバックは、この機能の機能向上に大きく役立ちます。

テキストはスクリーン リーダーで使用されます。

関連項目

  • Last updated on