GitHub Copilot CLI および Claude Code (プレビュー) で Power Pages プラグインを始めましょう。

GitHub Copilot CLI および Claude Code 用のPower Pages プラグインは、AI 支援ワークフローを提供します。 Power Pages上のモダン single-page アプリケーション (SPA) サイトの展開と管理。プロジェクトを手動でスキャフォールディングしたり、定型 API コードを記述したり、アクセス許可を構成したりするのではなく、自然言語で必要なものを記述し、プラグインが実装を処理します。

このプラグインは、新しいサイトのスキャフォールディングからデプロイ、Dataverse データモデルの設定、認証の構成まで、会話スキルを通じて完全なサイト開発ライフサイクルをサポートします。

Important

この機能はプレビュー段階です。
プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。これらの機能は公式リリースの前に利用できるため、お客様は早期にaccessを取得し、フィードバックを提供できます。
承認する前にエージェントの提案を確認する

[前提条件]

開始する前に、必要なソフトウェアとアクセス許可があることを確認します。

ソフトウェア要件

コンポーネント	最小バージョン	詳細情報
Node.js	18.0 以降	Node.jsをダウンロードする
Power Platform CLI (PAC CLI)	最新	PAC CLI のインストール
Azure CLI	最新	Install Azure CLI
GitHub Copilot CLI または Claude Code	最新	GitHub Copilot CLI または Claude Code
Visual Studio Codeおよび Power Platform Tools 拡張機能 (オプション)	最新	VS Code をダウンロードして Power Platform Tools をインストールする

以下も必要です。

Power Pagesが有効になっている Power Platform 環境。
ターゲット環境に接続されている認証済みの PAC CLI セッション。まだ接続していない場合は、を実行します。
同じテナントにサインインしているAzure CLI セッション。を実行して認証します。

認証確認:

コマンドを使用して認証されていることを確認します。

pac auth list           # Should show authenticated profile

認証されていない場合は、次のコマンドを実行します。

pac auth create --environment <Instance url>        # Authenticate to Power Platform

ヒント

インスタンス URL を取得するには、ホームPower Pages移動し、右上隅にある Settings アイコンを選択し、Session details を選択します。

プラグインをインストールする

マーケットプレースから Power Pages プラグインをインストールします。 GitHub Copilot CLI を使用する場合、同等のインストール手順については、Copilot CLI 拡張機能のドキュメントを参照してください。次のコマンドでは、Claude Code 構文を使用します。

クイックインストール (推奨)

インストーラーを実行して、autoupdate が有効になっているすべてのプラグインを設定します。

Windows (PowerShell):

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

macOS/Linux/Windows (cmd):

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

インストーラーは自動的に次の手順を実行します。

CLI がまだインストールされていない場合はインストールします。
Claude Code や GitHub Copilot CLI などの使用可能なツールを検出します。
プラグインマーケットプレースを登録し、表示されているすべてのプラグインをインストールします。
プラグインが最新の状態に保たることができるように、自動更新を有効にします。

インストール後、Claude Code または GitHub Copilot CLI を再起動して、エージェントセッションでスラッシュコマンドとしてプラグインのスキルにアクセスします。

Marketplace からインストールする

ターミナルで Claude Code を開きます。

Microsoft Marketplace を追加します。

/plugin marketplace add microsoft/power-platform-skills

Power Pages プラグインをインストールします。
```
/plugin install power-pages@power-platform-skills
```

プラグインをインストールしたら、Claude Code または GitHub Copilot CLI を再起動して、エージェントセッションでスラッシュコマンドとしてプラグインのスキルにアクセスします。

ヒント

マーケットプレースとスキルの更新プログラムを自動的に受信するには、自動更新を有効にします。コマンドを使用し、Marketplace に移動し、マーケットプレースを選択して、自動更新を有効にします。

スキルの概要

プラグインは、Power Pages サイトのライフサイクル全体をカバーするスキルを提供します。スラッシュコマンドとして、または行いたいことを記述して、各スキルを対話形式で呼び出します。

Skill	コマンド	その機能
サイトの作成	`/create-site`	サイトの基礎構築を行い、デザイン指針を適用し、ページやコンポーネントを作成します。
サイトをデプロイ	`/deploy-site`	PAC CLI を使用してプロジェクトをビルドし、Power Pagesにアップロードする
サイトのアクティブ化	`/activate-site`	Web サイトレコードをプロビジョニングし、パブリック URL を割り当てます
データモデルを設定する	`/setup-datamodel`	Dataverse テーブル、列、リレーションシップを作成します
サンプルデータを追加する (省略可能)	`/add-sample-data`	Dataverse テーブルに実際的なテストレコードを入力します
Web API の統合	`/integrate-webapi`	型指定された API クライアントコード、サービス、およびテーブルのアクセス許可を生成します
認証の設定	`/setup-auth`	サインインとサインアウトの機能とロールベースのaccess controlを追加します
Web ロールを作成する	`/create-webroles`	ユーザーアクセス管理用のWebロールYAMLファイルを生成します
SEO を追加する	`/add-seo`	robots.txt、sitemap.xml、およびメタタグを生成します

一般的なワークフロー

一般的なエンドツーエンドのワークフローは、次の順序に従います。

/create-site : 雛形作成、デザイン、ページを作成する
/deploy-site: Power Pages環境にアップロードします
/activate-site : パブリック URL を設定する
/setup-datamodel : Dataverse テーブルを作成する
/add-sample-data : テストレコードをテーブルに投入する
/integrate-webapi : API クライアントコードを生成し、アクセス許可を構成する
/create-webroles: アクセスロールを定義する
/setup-auth : サインイン、サインアウト、ロールベースの UI の追加
/add-seo : 検索エンジンの最適化
/deploy-site : 最終的な変更をライブにプッシュする

ヒント

この正確な順序に従う必要はありません。各スキルは、独自の前提条件を確認し、何かが不足しているかどうかを示します。たとえば、サイトで最初に認証が必要な場合は、する前にを実行できます。

Power Pages サイトを構築する

このチュートリアルでは、スキャフォールディングからデプロイまで、プラグインを使用してPower Pages サイトを構築する完全なライフサイクルについて説明します。各ステップでは、あなたが言うこととプラグインが応答して何をするかについて説明します。

手順 1: サイトを作成する

自然言語で必要なサイトについて説明します。その目的、必要なページ、配色、レイアウトスタイル、フォントなどのデザイン設定について説明します。実行するか、サイトを記述するだけで、プラグインが意図を認識します。

指定しない場合、プラグインはフレームワーク (React、Vue、Angular、または Astro) を選択するように求められます。

テンプレートからprojectをスキャフォールディングし、サイト名、色、デザイントークンを適用します。
依存関係をインストールし、開発サーバーを起動し、ライブブラウザープレビューを開きます。
関連するイメージで要求した各ページ、コンポーネント、ルートをビルドします。
ロールバック履歴が組み込まれるように、重要なマイルストーンで Git コミットを作成します。

手順 2: サイトを展開する

/deploy-site を実行して、サイトをPower Pagesにアップロードします。プラグイン:

PAC CLI がインストールされ、認証セッションがアクティブであることを確認します。
先に進む前に、ターゲット環境を確認します。
実稼働ビルドを実行し、コンパイルされた出力をアップロードします。
まだ存在しない場合は、デプロイアーティファクトディレクトリを作成します。

注

環境で特定の添付ファイルがブロックされている場合、プラグインは問題を検出し、問題を解決するための手順を提供します。

手順 3: サイトをアクティブ化する

を実行して、サイトにパブリックにアクセスできるようにします。プラグイン:

サイト名に基づいてサブドメインを提案し、カスタマイズできます。
Power Platform API を使用して Web サイトレコードをプロビジョニングします。
サイトが公開され、公開用 URL が返されるまでの間、投票を実施します。

この時点で、パブリック URL に作業サイトがあります。残りの手順では、データ、認証、および SEO を追加します。サイトに適用されない手順はスキップします。

手順 4: データモデルを設定する

を実行して、サイトに必要な Dataverse テーブルを作成します。既に ER 図または特定のスキーマがある場合は、エージェントにコードを分析してもらうのではなく、直接指定します。

このプラグインは、データモデルアーキテクトエージェントを起動します。

サイトのコードを分析して、ページとコンポーネントに必要なデータを決定します。
データバース環境で既存のテーブルに対してクエリを実行し、重複を回避します。
テーブル、列、データ型、リレーションシップを持つデータモデルを ER ダイアグラムとして視覚化して提案します。

提案を確認して承認します。 確認するまで何も作成されません。承認後、プラグインは API 呼び出しを通じてテーブルと列を作成し、手順 5 と 6 で使用するマニフェストファイルを保存します。

手順 5: サンプルデータを追加する (省略可能)

を実行して、テーブルにテストレコードを設定します。この手順では、手順 4 のデータモデルが必要です。

プラグインは、次のアクションを実行します。

マニフェストを読み取って、テーブル、列、およびリレーションシップを理解します。
現実的な電子メール、妥当な日付、書式設定された通貨額など、列の種類ごとにコンテキストに応じて適切な値を生成します。
依存関係の順序 (子テーブルの前の親テーブル) でレコードを挿入し、一括挿入時に認証トークンを自動的に更新します。

手順 6: Dataverse Web API と統合する

を実行して、モックデータをライブ Dataverse クエリに置き換えます。この手順では、手順 4 のデータモデルが必要です。

プラグインは、次のアクションを実行します。

モックデータ、プレースホルダーフェッチ呼び出し、またはハードコーディングされた配列を使用するコンポーネントのコードベースをスキャンします。これらのコンポーネントは Dataverse テーブルにマップされます。
生成する各テーブルに対して Web API 統合エージェントを生成します。
- 偽造防止トークン管理と再試行ロジックを備えた共有 API クライアント。
- TypeScript エンティティ型とドメインマッパー。
- CRUD サービスレイヤー。
- React フック、Vue コンポーザブル、Angular サービスなどのフレームワーク固有のパターン。
テーブルのアクセス許可とサイト設定を提案するアクセス許可アーキテクトエージェントを生成します。

アクセス許可の提案を確認して承認します。 確認するまで、プラグインは構成ファイルを作成しません。

手順 7: Web ロールを作成する

を実行して、ユーザー access ロールを定義します。プラグイン:

重複を回避するために、既存の Web ロールについて環境にクエリを実行します。
一意の識別子を持つロール定義を生成します。
各サイトに、最大で 1 つの匿名ロールと 1 つの認証済みロールがあることを強制します。

手順 8: 認証を設定する

を実行して、サインインとサインアウトの機能を追加します。プラグイン:

偽造防止トークン管理を使用して、Microsoft Entra ID フローの認証サービスを生成します。
サイトレイアウトと統合されたサインイン/サインアウト UI コンポーネントを作成します。
ユーザーの Web ロールに基づいて UI 要素を表示または非表示にするロールベースのaccess control ユーティリティを追加します。
フレームワーク全体のパターン (React フック、Vue コンポーザブル、または Angular サービス) を使用します。

手順 9: SEO を追加する

を実行して、サイトを検索エンジン用に最適化します。プラグイン:

フレームワークのルーター構成からルートを検出します。
検出されたすべてのルートの検索エンジンディレクティブとサイトマップを生成します。
メタタグ (ビューポート、文字セット、説明、Open Graph、Twitter Card、favicon 参照) を追加します。

手順 10: 最終的なサイトを展開する

任意の手順を実行する場合は、変更を反映するために再度実行してください。このプラグインは実稼働ビルドを実行し、すべての展開成果物 (テーブルのアクセス許可、サイト設定、Web ロール) と共にサイトをPower Pages環境にアップロードします。

サイトを確認する

スキルを完了したら、Power Pages サイトが正しく動作することを確認します。

Power Pagesに移動。
[アクティブなサイト] リストでサイトを見つけます。
[プレビュー] オプションを使用して、デスクトップでサイトをプレビューします。
機能をテストします。

ヒントとベストプラクティス

次のヒントは、Power Pagesサイトを構築するときにプラグインと AI コーディングエージェントを最大限に活用するのに役立ちます。

最初の実行時に不足しているツールのターミナル出力を監視する

プラグインはスキルとワークフローを提供しますが、AI コーディングエージェント (GITHUB COPILOT CLI または Claude Code) によって、実際のコマンドがコンピューター上で実行されます。これらのツールを初めて使用する場合は、ターミナル出力をよく見てください。 AI コーディングエージェントはバックグラウンドでコマンドとスクリプトを実行します。これらの一部は、コンピューターにインストールされていない可能性があるツールに依存します。ステップが失敗した場合、通常、ターミナル出力には、見つからなかったツールまたはコマンドが表示されます。

やなどのエラーが表示された場合は、不足しているツールをインストールし、ワークフローを再トリガーします。 AI コーディングエージェントは、ツールが使用可能になると中断したところから再開します。

承認する前にエージェントの提案を確認する

データモデルアーキテクトおよび Web API アクセス許可アーキテクトエージェントは、変更を行う前に提案を提示します。時間をかけてこれらの提案を慎重に確認してください。

データモデルの提案: テーブル名、列の種類、リレーションシップがビジネス要件と一致することを確認します。データが既に挿入された後に列の名前を変更するよりも、提案を調整する方がはるかに簡単です。
権限提案: 各ロールがテーブルごとに適切なアクセスレベル（作成、読み取り、更新、削除）を持っていることを確認してください。テーブルのアクセス許可が過度に制限されているのは、一般的なセキュリティリスクです。

コンテキストを使用してエラーを直接貼り付ける

ビルドエラー、デプロイエラー、ブラウザーのランタイム例外のいずれであっても、何かが失敗した場合は、完全なエラー出力をコピーします。それを、実行していた内容の簡単な説明と共に貼り付けます。提供するコンテキストが多いほど、修正が速くなります。

例: ビルドエラー

I ran npm run build and got this error. Fix it.

error TS2339: Property 'jobTitle' does not exist on type 'JobPosting'.

  src/components/JobCard.tsx:24:31
    24   <Text>{posting.jobTitle}</Text>

ヒント

ファイル名、実行したコマンド、発生する予定の内容を含めます。プラグインは、このコンテキストを使用して問題を特定し、推測するのではなく、対象の修正プログラムを適用します。

デプロイ後の一般的な問題は、列で API アクセスが有効になっていない場合の Power Pages Web API からの 403 エラーです。このエラーが発生した場合は、完全な API URL と完全な JSON エラー応答を貼り付けます。エラーメッセージは、修正する必要があるテーブルと列を正確に示し、プラグインはテーブルのアクセス許可 YAML とサイト設定を更新できます。

例: Web API で列が有効になっていない (403)

I'm getting a 403 error when the documents page loads. Here's the API call and the response. Fix the issue so this API works.

URL:
https://my-site.powerappsportals.com/_api/crd50_documents?$select=crd50_documentid,crd50_name,crd50_documentcategory,crd50_filetype,crd50_filesize,crd50_updateddate,crd50_description,_crd50_propertyid_value

Response:
{
  "error": {
    "code": "90040101",
    "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
    "innererror": {
      "code": "90040101",
      "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
      "type": "AttributePermissionIsMissing"
    }
  }
}

このエラー () は、参照列 Dataverse テーブルに存在しますが、Web API のテーブルアクセス許可構成には一覧表示されていないことを意味します。プラグインは、不足している列をテーブルのアクセス許可 YAML に追加して、再デプロイすることで、このエラーを解決します。

注

Power Pages Web API では、API 呼び出しによって返されるすべての列がテーブルのアクセス許可に明示的に一覧表示されている必要があります。検索プロパティ (プレフィックスおよびサフィックス) は、API 名が Dataverse の列の論理名と異なるため、見落としやすくなります。が表示されたら、常にその列をテーブルのアクセス許可に追加します。 API クエリは変更しないでください。

必要な内容について具体的に指定する

あいまいな要求はあいまいな結果を生み出します。レイアウト設定、データフィールド、動作など、必要なものをプラグインに正確に伝えます。

次の代わりに	試す
求人ページを作る	"上部に検索バーが表示された求人情報ページを作成し、場所と部門のチップをフィルター処理し、各ジョブのタイトル、会社、給与範囲、および投稿日を示すカードグリッドを作成します"
"スタイルを修正する"	ジョブカードはデスクトップ上で縦に積み重なります。画面が768pxより広い場合には、16pxのギャップを持つ3列グリッドで表示させるようにする。
"データの追加"	"現実的なタイトル、給与範囲が $60,000 ~$180,000、過去 30 日間に投稿された日付を含む 4 つの部門 (エンジニアリング、マーケティング、営業、人事) に 20 件のサンプル求人を追加する"
"API を設定する"	"JobListings コンポーネントを cr_jobposting Dataverse テーブルに接続します。ハードコードされた配列を、タイトル、部署、給与、および投稿日をフェッチする実際の API 呼び出しに置き換えます。

視覚的な問題にスクリーンショットを使用する

サイトがブラウザーで正しく表示されない場合は、スクリーンショットを撮って会話に直接貼り付けるか、ファイルパスを指定します。視覚的なコンテキストは、テキストで説明するのが難しいレイアウト、間隔、スタイルの問題を特定するのに役立ちます。

The header overlaps the hero section on mobile. Here's a screenshot:

[paste screenshot or provide path to screenshot file]

Fix the header so it doesn't overlap. It should be a fixed header with the content starting below it.

小さな手順で反復処理する

1 つのプロンプトでサイト全体を記述するのではなく、段階的にビルドします。構造とレイアウトから始めて、一度に 1 つずつ特徴を追加します。この方法では、各ステップでレビューとコースの修正を行う機会が与えられます。

Step 1: /create-site → Get the basic scaffold and layout right
Step 2: "Add a hero section to the home page with a search bar"
Step 3: "Add a job listings page with filter and sort"
Step 4: "Add a job detail page that shows full description"
Step 5: /setup-datamodel → Create tables now that you know the data shape
Step 6: /integrate-webapi → Wire up real data

ヒント

各手順の後、ブラウザーのプレビューを確認します。何かが正しくない場合は、先に進む前に修正してください。 1 つのコンポーネントで問題を解決する方が、サイト全体で問題をアンタングルするよりも簡単です。

承認する前に説明を求める

提案された変更 (特にアクセス許可、データモデルの変更、または認証構成) が不明な場合は、承認する前にプラグインに内容とその理由を説明するように求めてください。

Before you create the table permissions, explain what access each role will have and why. I want to understand the security implications.

問題から回復するためにスキルを個別に実行する

スキルが途中で失敗した場合は、最初からやり直す必要はありません。各スキルは個別に実行され、中断したところから取得できます。たとえば、３番目のテーブルでの処理が失敗した場合、もう一度実行すると、既に完了している作業を認識できます。

/integrate-webapi failed while processing the cr_applications table. Here's the error: [paste error]. Resume the integration from where it stopped.

シングルページアプリケーションをPower Pages
Power Pages Web API リファレンス
PAC CLI pages コマンドリファレンス
GitHub Copilot CLI
Claude Code

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-03