ページのコンポーネント

ページを作成したら、レイアウトを構築し、静的コンテンツと動的コンテンツを含めるコンポーネントを追加します。 このシンプルな設計アプローチでは、対応する HTML、CSS、またはコードをページに追加します。これらの言語の構造や構文を知る必要はありません。

セクションを追加するには、ページ上の既存のセクションを選択し、プラス記号 (+) または セクションの追加を選択し、使用可能なセクション レイアウトのいずれかを選択します。

コンポーネントを追加するには、コンポーネントを配置する空のセクションあるいは既存の要素を選択します。 プラス記号 (+) またはオーバーフロー ボタン (...) を使用して、すべての利用できるコンポーネントを表示し、挿入するコンポーネントを選択します。

コンポーネントには次の 2 種類があります。

• 標準 コンポーネントでは、ページ レイアウトと静的コンテンツが作成されます。

• データ コンポーネントに接続すると 、Dataverse データに基づいて動的で対話型のコンテンツが表示されます。

すべてのセクションとコンポーネントは、コンテキスト内編集をサポートします。 任意のセクションまたはコンポーネントをキャンバスから直接編集できます。 セクションまたはコンポーネントを選択すると、コンテキスト メニューが表示されます。 選択した要素のプロパティ (配置、スタイル、色、サイズなど) を調整できます。 詳細については、使用可能なコンポーネントとそのプロパティの詳細については、 Web ページのカスタマイズ に関するページを参照してください。

ソース コード

多くの場合、デザイン スタジオ コンポーネントとして使用できない要素が必要です。 ページには、より複雑なレイアウトと書式設定が必要な場合や、より多くの CSS または JavaScript が必要な場合があります。 これらの要件は、Visual Studio Code for the Web で作成できます。 作成者とプロ開発者は、このエディターを使用して、ページのソース コードと、関連する CSS および JavaScript を表示および変更できます。

ページのソース コードを表示するには、コマンド バーで [コードの編集] を選択します。

[コードの編集] を選択すると、Web 用 Visual Studio Code にリダイレクトされ、ページ HTML、CSS、または JavaScript に編集が行われます。 ソース コードを保存すると、変更内容が同期され、キャンバスに表示されます。

Pages ワークスペース内の Copilot

Copilotは Pages ワークスペース全体に統合され、コンテンツの構築と設定をより迅速に行うことができます。

AI で生成されたテキスト

キャンバス上の任意のテキスト コンポーネントを選択し、ツール バーの [Copilot] ボタンを選択します。 必要なテキストを記述し、Copilotがコピーを生成します。 この機能は一般提供されています。

AI によって生成されたフォーム

コンポーネントを追加するときに、Form を選択し、Copilotを使用してフォームを作成することを選択します。 フォームを自然言語で記述すると、Copilot が Dataverse テーブル、フォーム、および基本フォーム コンポーネントを自動的に作成します。 この機能は、DoD を除くすべてのリージョンで一般提供されています。

AI によって生成されたマルチステップ フォーム (プレビュー)

Copilotを使用して、複数ステップのフォームを作成することもできます。 Copilot サイドカーで必要な複数ステップのフォームについて説明すると、Copilot がその説明に基づいて、1 つ以上のステップを持つフォームを作成します。 フォームのプレビューがキャンバスに表示され、ページに追加する前に確認できます。 関連するテーブルが Dataverse に既に存在する場合は、Copilotそれらを使用することを提案します。それ以外の場合は、新しいテーブルが自動的に作成されます。

AI フォームの入力支援 (プレビュー)

フォーム コンポーネントをページに追加すると、AI フォームの入力支援を有効にして、サイト ユーザーがフォームに簡単に入力できるようにすることができます。 この機能は、アップロードされた添付ファイルから関連情報を抽出し、フォーム フィールドに自動的に設定します。 また、ユーザーは AI ドラフト アシスタンスを使用して複数行のテキスト入力を書き換えることもできます。 フォーム コンポーネントの設定でこのオプションを有効にします。

Copilotを使用してセクションを追加する

Copilot サイドカーを使用してセクションの内容を説明し、Copilot にそのセクションをページに追加させます。

AI によって生成されたコード (プレビュー)

Edit code を使用して web のVisual Studio Codeでページを開くと、Copilotを使用して自然言語を使用して HTML、JavaScript、CSS コードを生成できます。 Copilot チャット パネルで必要な動作を説明し、Copilotは直接コピーまたは挿入できるコード スニペットを生成します。 また、既存のコードを選択し、[ 説明 ] オプションを使用して、実行内容のプレーン言語の説明を取得することもできます。

生成 AI を使用した検索コンポーネント (プレビュー)

サイト ユーザーが自然言語クエリを使用してサイトを検索できるように、検索コンポーネントを任意のページに追加できます。 このコンポーネントには、検索バーと、AI によって生成された結果の概要が含まれます。 AI を利用したバージョンを使用するには、まず、サイトに対して Generative AI Search を有効にする必要があります。 [ページ] ワークスペースのコンポーネント パネルからコンポーネントを追加します。

一覧の AI 機能 (プレビュー)

データ リスト コンポーネントでは、サイト ユーザーに対して 2 つの AI を利用した拡張機能がサポートされています。

• AI の概要 - リスト内のデータの簡潔な概要とグラフの視覚化を自動的に生成します。 新しいリストを追加するときにこのオプションを有効にするか、[リストの編集] を選択して [リストの AI 概要] を切り替えて、既存のリストに対して有効にします。

• 自然言語検索 - ユーザーは会話クエリを使用してリスト データをフィルター処理および検索できます。 [その他のオプション] の一覧の設定でこれを有効にします>この一覧で検索を有効にする>自然言語で検索します。

詳細については、Power Pagesドキュメントの「リストに AI 機能を追加する」を参照してください。