Power Appsをプロンプトで自動生成！VS CodeからMCPでキャンバスアプリをAIと構築してみた

これまでキャンバスアプリの画面作成やロジックの実装は、ブラウザ上のPower Apps Studioから手動で構築していた。

それが先日、Microsoft公式の「Canvas Apps MCP Authoring Plugin」の登場によって、GitHub CopilotやClaude Codeといったコーディングエージェントとリアルタイムに共同編集しながら、プロンプトでアプリを開発できるように。

今回の記事では、このMCPプラグインの使い方や、実際に「電卓アプリ」をVS CodeとGitHub Copilotで自動生成してみたのでご紹介。

スポンサーリンク

Canvas Apps MCP Authoring Pluginとは

Canvas Apps MCP Authoring Pluginは、VS CodeやGitHub CopilotやClaude Codeなどの外部開発環境から、ブラウザで開いているPower Apps Studioを直接操作し、キャンバスアプリをAIとリアルタイムに共同開発できるようにするMicrosoft公式の拡張ツール。

MCP（Model Context Protocol）を採用しており、AIエージェントがアプリ内のデータソースやコントロール仕様を自律的に把握したうえで、裏側で構文（YAML）を生成・検証し、開いたままのStudio画面へ即座に構築してくれる。

これにより、自然言語でプロンプトを投げるだけで、画面レイアウトからPower FxのロジックまでAIが即座にブラウザ側へ反映してくれる開発スタイルが実現できる。

メリット

  • 開発効率の向上： 面倒なコントロールのグリッド配置や基本ロジックをプロンプト一発で生成でき、手作業の時間を大幅に削減できる
  • Gitによるバージョン管理がしやすい： AIがコードで画面を生成してくれるので、バージョン管理との相性が良い
  • AIによるコードレビュー： 既存のアプリに接続すれば、人が作ったアプリのレビューもできそう（未検証）
公式はこちら
AI コード生成ツールを使用してキャンバス アプリを作成および編集する - Power Apps
GitHub Copilot CLI や Claude Code などの AI コード生成ツールを使用して、Power Appsでキャンバス アプリを作成および編集する方法について説明します。
learn.microsoft.com

今回はこのツールを使用して、「電卓アプリ」を実際に作ってもらった。

手順1：事前準備（必要な環境）

事前準備として、以下2つが必要。

  • .NET SDK バージョン10以降
  • コーディングエージェント（GitHub Copilotとか）

.NET 10 SDKのインストール

まずは.Net SDKのバージョン10以降のインストール。

こちらのMS公式からインストールができる。
https://dotnet.microsoft.com/ja-jp/download

コーディングエージェントの準備｜VS CodeとGitHub Copilot

続いて、GitHub Copilotや、Claude Codeなどのコーディングエージェントの準備。

GitHub Copilotは無料枠が少し大きいので、今回はこちらを使用。

GitHub Copilotの準備が完了したら、Chatを開いて以下2つのスキルを追加する。

/plugin marketplace add microsoft/power-platform-skills
/plugin install canvas-apps@power-platform-skills


これで事前準備は完了。

手順2：キャンバスアプリとGitHub Copilotを接続する

続いて、キャンバスアプリを作成し、GitHub Copilotと繋いでいく。

キャンバスアプリの作成と「共同編集（Coauthoring）」の有効化

まずは空のキャンバスアプリを作って、[設定]から[コオーサリング]を有効化する。

VS CodeからMCP経由でStudioに接続する（/configure-canvas-mcp）

GitHub Copilotに戻って、コマンド「/configure-canvas-mcp」を入力。するとアプリのURLを入力するテキストボックスが出るので、
先ほどのキャンバスアプリのURLを入力し、[Submit]を押す。
[Allow in this Session]を押すと、
ポップアップが出るので、ログインする。
これで接続が完了。

手順3：電卓アプリをプロンプトで自動生成してみる

モダンコントロールで電卓UIとロジックを生成させた結果

以下のプロンプトを入力し、AIにアプリの作成を指示してみると、
画面中央に配置するシンプルな「電卓アプリ」の画面を作成してください。
モダンコントロールを使い、以下の要件を満たしてください。
1.計算結果・入力表示エリア（ディスプレイ）
・画面上部に、現在の入力値または計算結果を表示する右揃えのラベルを配置
・初期の表示値は "0"
2.キーパッド配置（グリッドレイアウト）
・4列×5行のボタン配置にする
・1行目: [C] (クリア), [±] (符号反転), [%] (パーセント), [÷] (割り算)
・2行目: [7], [8], [9], [×] (掛け算)
・3行目: [4], [5], [6], [-] (引き算)
・4行目: [1], [2], [3], [+] (足し算)
・5行目: [0], [.], [=] (計算実行)
3. デザインとスタイリング
・スマートフォン電卓風のすっきりした配色
・数字ボタン、演算子ボタン、クリアボタンでボタンのスタイル（色）を分ける
・各ボタンのサイズと間隔を均等に揃える
4. ロジック（Power Fx）
・各数字ボタンを押したときに、ディスプレイの末尾にその数字を連結して更新するロジック（UpdateContext）を設定
・[C] ボタンを押したときは表示を "0" にリセットするロジックを設定
・（四則演算のロジックが難しければ、まずは表示のクリアと数字入力の反映だけでもOK）
作成の完了が通知されて、
キャンバスアプリが完成。見ての通りちょっと残念な結果。。。
式とかも入っているので、一応動くっぽいけど、結果が見えないので正しく動作しているかわからず。

クラシックコントロールとの違い・指定時の挙動比較

先ほどはモダンでいまいちな完成度だったので、改めてクラシックコントロールで作成をお願いすると、
すごくいい感じの電卓が完成。
計算もしっかりとできてるし、表示もいい感じ。※Power FxもすべてAIが作成してくれた。

やっぱりトークン消費は激しい

今回2画面作ってもらったところ、無料枠のクレジットの25％を消費した。

なので、無料枠での開発はやっぱり厳しそう。

とは言え、UIを含めた開発が爆速でできるようになるメリットがかなり大きいので、今後のスタンダードはAIとの共同開発になる気がしている。

コメント

タイトルとURLをコピーしました