演習 - Copilot で生成された Web ページを更新する

完了

この演習では、前の演習で作成した Web サイトの追加ページを更新します。 Copilot を使用してページにコンテンツを追加します。

Contact Us ページを更新する

1. Power Pages 環境にサインインします。

2. ホーム ページの アクティブなサイト で、前に作成した Contoso Real Estate Power Pages サイトを選択し、編集 を選択します。

   

3. Power Pages デザイン スタジオの左ペインで ページ を選択して、ページ ワークスペースにアクセスします。

   

4. Contact Us を選択し、Contact Us ページをデザイン スタジオで開きます。

5. ヘッダー と フッター セクションの間のすべてのセクションを削除します。

6. サイト ヘッダーで セクションの追加 > 左 3 分の 1 を選択します。

   セクションが 2 列のレイアウトになり、左の列にセクションの 3 分の 1 の幅が割り当てられます。

   

7. 左の列で Text をクリックし、テキスト タイプを 段落 から ヘッダー 2 に変更します。

8. テキストを Our Vision に変更します。

9. Our Vision ヘッダーの下のプラス アイコンを選択し、もう一度 Text を選択します。

10. 既定のテキストを消去し、テキスト ボックスを空にします。 次に、ツールバーで Copilot を選択します。

    必要なテキストについて説明してください ペインで、Two paragraphs describing the vision of the Contoso Real Estate company と入力します。

    Enter キーを押すと、Copilot によって次のテキストが生成されます。

    

11. 書き換え を選択したり、トーン を変更したり、テキストの 長さ を増やす、または減らすなどして、コンテンツを好きなだけ編集してみてください。

    ページに追加 を選択して、生成されたテキストをページに追加します。

12. セクションの右の列で 画像 > ストック画像 を選択し、office building を検索します。 好みの画像を選択し、挿入 を選択します。

    

13. 会社のチームを紹介する新しいセクションを追加します。

    • 右 3 分の 1 レイアウトを使用します。
    • Our Team をヘッダーに設定します。
    • Copilot を使用し、チームを説明する段落を生成します。
    • チームの画像。

    次のようになります。

    

14. Our Team のテキストの下に、Contact Us ページに移動するためのボタンを追加します。

    

Listings ページを更新する

1. ページ の左ペインで Listing を選択し、一覧ページをデザイン スタジオで開きます。

2. ヘッダー と フッター セクションの間のすべてのセクションを削除します。

3. セクションを追加し、ツールバーで 背景の編集 を選択します。 画像 > 画像の追加 を選択します。

4. ストック画像 を選択し、house を検索します。 好みの画像を選択し、挿入 を選択します。

5. セクションにカーソルを合わせて選択してから、ツールバーの デザイン アイコンを選択します。

   

6. 標準 タブで オーバレイ を 65% にセットします。 また、オーバーレイの色 に 黒 または暗い色を設定します。

   

   デザイン ペインを終了します。

7. 画像の上で Text をクリックし、テキスト タイプを 段落 から ヘッダー 2 に変更します。 テキストの色 を 白 または画像で識別可能な色に変更します。

8. ツール バーの デザイン アイコンをクリックします。 タイポグラフィ タブで、フォントの太さ を Bold にセットします。 デザイン ペインを終了します。

9. 位置合わせ に 中央揃え をセットし、テキストを Featured Listings に変更します。

   

10. Copilot ペインを開き、Create a new section to show real estate listings と入力して、Enter キーを押します。

    保持 を選択して、生成したセクションをページに追加します。

11. Copilot と製品のツールバーを組み合わせて使用し、3 つ以上のリストを表示するようにセクションを更新します。 セクションのレイアウトを 3 列 にします。

    注

    不動産リストのデータをハードコードする必要があります。 通常、このデータは SharePoint リストや Dataverse テーブルや外部データ ソースなどのデータ ソースに接続されます。

    次に、カスタム コンポーネントを使用して、データを見栄えの良い方法で表示します。 ただしこれは、このモジュールの範囲外です。

    詳細については、Power Pages でコード コンポーネントを使用するの記事を確認してください。

12. 各列に画像を表示します。 URL オプションを使用して画像を追加してください。

    • 最初の画像で、画像 > URL を選択し、次の URL を入力します: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property1.jpg
    • 2 つ目の画像で、次の URL を使用します: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property2.jpg
    • 3 つ目の画像で、次の URL を使用します: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property3.jpg

    

13. 各列に、不動産の価格を表示する ヘッダー 3 テキストを追加します。

    • 最初の列には、価格 $350,000 を使用します。
    • 2 つ目の列には、価格 $250,000 を使用します。
    • 3 つ目の列には、価格 $600,000 を使用します。

14. 各列に、不動産の住所を表示する 小さいテキスト のテキストを追加します。

    • 最初の列には、住所 432 Elm Street, Riverside, CA 92501 を使用します。
    • 2 つ目の列には、住所 789 Maple Avenue, Lexington, KY 40502 を使用します。
    • 3 つ目の列には、住所 210 Pine Road, Portland, OR 97204 を使用します。

15. 各列に、Contact Usページに移動するための ボタン を追加します。

    • ボタン ラベル は Enquire Now にします。

    

    セクションを自由にカスタマイズしてください。

データのソリューションを設定する

1. 以降では、Dataverse のテーブルとデータを操作します。 Real Estate Solution のコンポーネントの編成に使用したテーマを残したまま、すべてのデータにソリューションを設定する必要があります。

   左側のペインで、データ を選択します。

2. データ ペインの上で、歯車の ソリューションを設定 アイコンを選択します。

3. ソリューションのドロップダウンから Real Estate Solution を選択します。

   

   これで、作成したすべてのデータ テーブル、列、ビュー、およびフォームが Real Estate Solution に追加されます。

   ソリューションの設定を終了します。

Contact Us ページを更新する

1. 左側のペインで、ページ を選択します。

2. Contact Us を選択し、Contact Us ページをデザイン スタジオで開きます。

3. ヘッダー と フッター セクションの間のすべてのセクションを削除します。

4. 同じ手順を Listings ページで使用し、タイトル バナーを Contact Us ページに追加します。

   

5. その下に、セクションを 左 3 分の 1 レイアウトで追加します。

6. 左の列で Text をクリックし、テキスト タイプを 段落 から ヘッダー 2 に変更します。

   テキストを We want to hear from you! に変更します。

7. We want to hear from you ヘッダーの下のプラス アイコンを選択し、もう一度 Text を選択します。

   テキストを次に変更します:

   Explore the world of real estate with us. Whether you're buying, selling, or investing, our expert team is here to guide you every step of the way. 
   
   Contact us today to start your real estate journey!
   

8. セクションの右列で、その他 を示す省略記号を選択し、フォーム を選択します。 ポップアップが表示されるので、AI 生成フォームをそこに作成します。

   

9. Describe a form to create it セクションに Create a contact us form to capture user inquiries と入力します。

   Enter キーを押すと、Copilot によってフォームが生成されます。 このフォームのプレビューがペインの右側に表示されます。

   

10. Move the Email field up や Remove the Subject field などの新しいプロンプトを入力し、フォームに引き続き変更を加えてください。

    フォームが完成したら、OK を選択してフォームをページに追加します。

    フォームの生成に時間がかかる場合がありますが、完了すると、Copilot によってフォームが作成されるだけでなく、Dataverse にテーブルが作成され、フォームから送信されたデータがそのテーブルに格納されます。

11. 次に、このフォームをサイトのすべてのユーザーから表示および使用するために、フォームのアクセス許可を設定する必要があります。 + 新しいアクセス許可 を選択します。

    

12. テーブルのアクセス許可を次のように構成します。

    • 名前: Contact Us Form
    • テーブル: 事前に選択されたテーブルをそのまま使います
    • アクセスの種類: Global Access

    注

    アクセスの種類が Global Access の場合は、選択したテーブルのアクセス許可と特権が、すべてのレコードの選択したロールに適用されます。

    アクセスの種類に関する詳細はこちら。

    • アクセス許可: Create
    • ロール には + ロールの追加 を選択し、匿名ユーザー と 認証されたユーザー を選択します。

    保存 を選択して、アクセス許可を保存します。

    

    このサイトに表示されるデータは誰でも参照できます。 ペインで 保存 を再度選択します。

    注

    前のモジュールで、ユーザーから送信されたメールの内容を AI を使用して分析するフローを構成しました。

    それと同じ方法でフローを構成し、Contact Us フォームから送信されたデータを取得して、フォーム送信の内容を AI を使用して分析したり、コンテンツに基づいてアクションを実行したりできます。

    これは今回のモジュールの範囲外ですが、Power Pages コンフィギュレーション ドキュメントで Power Automate クラウド フローの構成について詳しく学習することができます。

Services ページを更新する

創造力を働かせ、これまでに得た知識を活用して、Services ページを更新してください。 Copilot と製品ツールバーを使用し、ページに適したコンテンツを自由に追加してください。