はじめに
Power Apps の Generative page が私の環境でも触れるようになっていましたので、遊んだ検証した結果を纏めたいと思います。
Generative page(preview) に関する公式ドキュメントはこちら
機能アップデートに関する公式 Blog はこちらでです
なおこちらの機能は現在 Preview であり、そして利用には公式ドキュメントでも記載の通り、米国環境の Power Apps 環境が必要となっていますのでご注意ください。
詳細は以下
Prerequisites
- The Power Platform environment must be located in the US region.
- The Enable new AI-powered Copilot features for people who make apps environment setting must be enabled. More information: Copilot environment setting
- This feature is being gradually rolled out across regions and might not be available yet in your region.
Generative page とは?
Generative page とは Microsoft Build 2025 で発表された新機能の一つで、自然言語ベースで指示をだすことで、 React ベースのコードが作成されモデル駆動型アプリのカスタムページを作成することができる機能です。
この機能を利用することでいままでは実装が比較的面倒だったドラッグ & ドロップ機能が手軽に実装できたりします。
これまでのノーコード・ローコードの概念をぶち壊してしまうような機能ですね。
Generative page を試すには?
- モデル駆動型アプリを作成して、編集します
- 「ページの追加」の右にある下矢印を選択して、「ページについて説明します」を選択します
- Generative page の画面が開きますので、ここで作成したいページの説明を記載します
自然言語ベースで指示を書くだけでなく、画面のデザイン案などの画像もデータとして追加することができます
- 指示を入力し終えたら右下の「生成」を選択します
Generative page を試してみる
課題一覧
さて、それでは早速 Generative page を試してみようと思います。
デモなどでは手書きの画面イメージを読み込ませてページを生成していましたが、手書きでなにか作成する習慣が私にはないので、 Gemini にお願いして画面のサンプルを作成してもらいました。
こいつを読み込ませて課題管理画面を作成してもらおうと思います。
指示は以下のようにしています。
課題管理アプリを作成したいです。 画像のようにカンバン形式で課題が資格化されており、ドラッグ & ドロップでステータス管理ができる画面を作成してください。
読み込んでいるテーブルはこちら
Issue
IssueComment
では生成を依頼してみます。
すると、指示をエージェントが解釈した後に...
React コードの生成が始まっています。
そして30秒待ったかどうか?ってぐらいの時間でこんな画面が作成されました!
スクショじゃわかりにくいですけど、こんな感じでドラッグ & ドロップの画面も作成することができています。
また、マウスオーバーした際に進捗率が浮かび上がるようにもなっています。
次に「コード」にて生成されたコードをみてみます。
React ベースのコードが生成されているのが確認できますね。
ただこちらは Read-Only のエディタのようでコードを直接編集することはできないようです。
従ってコードが読める人間でも、ちょっとした修正だろうとエージェントとの対話ベースで行わないといけないということですね。
これはコードがわからない人でも気軽に作成/編集ができる。というメリットがある反面、知見のある人がクイックに改修したり、細かい機能追加や改修をしたりすることが、場合によっては難しくなっている。という見方もできると思います。
さて、これでもまぁ運用できないことはないかな?という感じですが、いくつか機能欲しいですし、デザインもちょっと崩れていますね。
まずはデザインの修正を依頼してみましょう!
以下のような修正依頼をだしてみます。
複数の指示だしましたが、理解してくれるのでしょうか??
タスクとして表示されている文字列が見切れているので枠内に収まるようにしてください。 長すぎる場合は"..."などで省略してもOKです。 また、左上に表示されている丸文字には Priorityを表示するようにしてください。
Priority (優先度)の表示は直りましたね。
ただ、文字がはみ出てるのは直ってないようです。
で、直そうと色々指示だしてたらコード生成に失敗しまくって、3回目でギブアップしました。
こうなった場合、手動で戻りたい成功した指示まで戻って 「Undo」 を選択する必要があります。
最終的に色々頑張って調整したのがこちら
色々スタイリッシュになっちゃった
次に機能面ですね。
右上に「新規課題」というボタンがあるんですけど、これ実は機能していません。
ということで、CRUD 機能を追加してもらいましょう!
課題をCRUDができるような画面を作成してください。
今度は一発でできました!
編集
新規
カレンダーもいい感じに表示
削除
特に具体的に指示してないですけど、削除前に確認してくれるのいいですね!
こちらのページの編集はこんなもんでいいかな?と思いますので、ページ名を編集して保存し、公開します。
すると再生したアプリでも作成したページを弄れることが確認できるかと思います。
ガントチャート
次に Gemini が作成してくれたガントチャートの生成も試してみようと思います。
課題の状況を視覚的に理解するために、ガントチャート画面を作成してください。
失敗した(´・ω・`)
こうなった場合は、「Retry」を選択して再生成を試みます。
今度は生成は成功したけど、デザインというか描画領域が...!!
でもなんかマウスオーバーしたらコメント表示してくれるのはいいかも
ちょっと雑な指示でデザイン修正を依頼してみます。
無理に描画を収める必要はありません。
スクロール可能なようにして、デザインの修正をしてください。
出来たのがこちら
スクロールバーどこーーーーー
色々頑張りましたが、疲れたのでこれでいいや...
修正依頼しようとすると、ちょっと沼ってしまいそうなのが工数読めなくて厄介なことですし、色々試した結果、前のバージョンに戻せなくなった!
というのも発生しそうでちょっと実運用考えると検討事項多そうですね...
※ Undo したとき、戻したいバージョンの1つ前 or 1つ後しか選べないときがあった...
おまけ
私といったらゲーム作成でしょ!?ということで Build のデモでも行われていたゲームを作らせてみます。
リバーシ
まずは実は私が初めて Power Apps で作成したゲームでもあるリバーシを作成させてみます。
できた!
できたけど、見切れてるぞ!
ということで修正加えてもらった。
なんか盤面もそれっぽい色になった。
動作も問題なく動いてるっぽいですね。
さて、次は CPU を実装してもらおうと思います。
デザインが...
この CPU 2回行動してくるんですが???
勝つためなら何でもやる感じ??
バグ指摘したら直してくれました。
いやー CPU も実装できるって結構いいですね!
雑に打っても勝てるので、強さはそんなでもないけどね
ボ○バーマ○
それでは Generative page が人間を超えられるか勝負といこうじゃないか!
もう5年まえになるようですが、実は私昔 Power Apps でボ○バーマ○風ゲーム作成したんですよね。
#PowerApps でボンバーマン作成しました!
— コルネ (@koruneko32767) 2020年2月24日
とりあえずver0.10としてこれにて完成です
ちょっと工夫すれば #PowerApps でもこんなものが作成できるんだ!という興味関心を引くきっかけになっていただければと思います。 pic.twitter.com/aaeMkuKAzp
これをお前に作成できるか...?
くそっ
なんかそれっぽいの出力してきやがった
キーボードで操作可能な機能はキャンバスアプリでは実装面倒なんですよねぇ...
ただ爆弾おいても爆発しないですね
ということで直してもらったのがこちら
なんかやってる#PowerApps pic.twitter.com/4Io66tfzOm
— コルネ (@koruneko32767) 2025年7月27日
ここまできたらエネミーも実装してやろうじゃないの!
ということでエネミーとアイテムを実装してもらった!!
細かい不具合いくつかあるけど、キャンバスアプリで作成するよりは簡単に作成できちゃった(´・ω・`)#PowerApps pic.twitter.com/N067O0mdYM
— コルネ (@koruneko32767) 2025年7月27日
エネミーの挙動が怪しかったりと、いくつか問題は見受けられますが比較的簡単にゲームのようなものが作成できてしまった...
おわりに
Generative page を利用することで、とても簡単に Power Apps のモデル駆動型アプリでカスタムページを自由に作成することができるようになりました!
ただ細かい機能の改修をやろうとすると、結構難しいというかやはり自然言語での指示になってしまうので上手くいかないなーという感想です。
コード直接編集できるようになるといいのかなーと思いますが、それだと今度はこちらの機能を利用するハードルがあがってしまいそうなので難しいところだなと思います。
モデルの精度があがれば解決するのかもしれませんが、機能改修や機能追加がちょっと思うようにいかず工数の見通しが難しいことから実運用に乗せるのは時期尚早な気がしますね(preview ですしね)
また、こちらの機能を利用して生成されたページはこれまで作成されたキャンバスアプリやモデル駆動型アプリよりもテスト(動作確認)をちゃんとしないといけなさそうですね。
裏のロジックを理解せずに利用するような運用になることがほとんどだと思いますので、意図しないデータの CRUD などを確認しないといけない。
ここらへんのテストも生成してくれると助かるんだけどな?とかいてて思った