Claude Codeと意思決定Power Appsを作ったログ
この記事を読んでわかること
- Claude CodeとPower Appsを開発してみて分かったこと
- どんな風にClaude Codeと作業をしたのか
はじめに
意思決定を変革するためのPower Appsを作りたい。そのためには、Power Platformだけじゃなくて、Pythonを使用する必要があります。データ設計・Python側でのアルゴリズム処理とDataverseへの結果の書き込みまで、総合して設計をする必要がありました。
そこで私は、Claude Codeと一緒に開発をすることにしました。その結果、4日で一旦完成しました!
今回は私がどんな手順でClaude Codeと一緒に開発をしたのかをご紹介します。
1日目:アプリの設計をする(75分)
こんな感じでなんとなくの全体像はすでに持っていました。ただ、これを実装しようとするとデータ設計や画面の遷移、Python側との整合を取る必要があります。Pythonが増えると特にデータの設計が重要になり、その上でキャンバスアプリ側との整合が必要でした。難しい・・・

Claude Codeに相談しました。
相談した内容
PolisのアルゴリズムをPower Platformをフロントにして再現をして使えるようにしたい。Power PlatformとPythonはDataverse SDK for Pythonでできると思っている。(FabricのNotebookはやめておく)キャンバスアプリでデータ入力や結果の可視化まで出したくて、散布図も出したい。
アプリとテーブル設計を一緒にやってもらった
Claude Codeは “.md “のようなテキストファイルも自分で作ってくれます。自然言語で相談した内容をもとにドキュメントが出来上がっていきます。Vs Code でプレビューしながら作成を続けていきます。

データの設計も一緒にやりました。最終的にこんな感じになりました。1日目の設計から少し変更があったので、これは最終版です。一対多であったり、散布図を可視化するために追加するテーブルであったりと、中身を自分でもイメージできるようにしながら設計をしてもらいました。不要な列は削除してもらったり、投票断面のユーザー属性情報を記録するような設計にしてもらったりしました。Pythonもキャンバスアプリも、途中でデータ設計の変更が入ると面倒なので、この辺は結構慎重に設計をしました。

2日目:Dataverse作成・Python動作テスト(80分)
Dataverseを作成する
テーブルの設計ができました。次にDataverseを作成します。AIが設計したテーブルを手動で作成するのって結構大変じゃないですか。今回はClaude Codeにさっきのテーブル設計でcsvを作成してもらいました。初めて知ったのですが、Dataverseにはcsvを読み込んでテーブルを作成する機能があるらしく、それを使いました。

Dataverse作成時にこんなに大きく表示されていた、「Excelファイルまたは CSVをインポート」に投入

5つのテーブルを作成できました。この方法で作成すると抜け漏れやデータ型のミスが少なくて良いですね。

Python動作テストをする
Dataverseができた後みなさんなら何をしますか?キャンバスアプリ開発に移行しますか。今回、私はPython側での動作テストを優先しました。なぜならいくらキャンバスアプリを頑張って作っても、今のデータ設計ではPython処理がうまくできないとなると、無駄になるからです。サンプルデータをわざわざ作ってでも、先にPython動作テストを優先しました。
サンプルデータの作成もClaude Codeにやってもらいました。一連のチャットのコンテキストだけじゃなくて、今やろうとしていることの趣旨やデータ設計などを、ファイルから読み取って整合の取れた生成をしてくれるのが、本当に助かります。
しかもこれが80分程度でできてしまうのが、最高です。

モデル駆動型アプリからサンプルデータを投入することができました。サンプルデータ作成から投入がスムーズにできるのは地味に嬉しい。意外とこういうところで時間かかりますよね。

なんやかんやあり、Python動作検証も無事完了。実はPolisのアルゴリズムは以前に中身理解のために再現を試みたことがあり、ほぼそれを使うだけでできました。(もちろん再現したのも、それを参照して今回用に書き換えたのもClaude Code です。)

Polisを再現してみた記事
Polisとは何かについて知りたい方はこちらから。
ちなみにDataverse SDK for Pythonも記事投稿しています
この時はClaude Codeじゃなくて、Claude にコードを書いてもらいました。以前興味を持ってやってみたことが、意外なところで役に立ちました。興味を持ってやってみるって大事ですね。
3日目:キャンバスアプリ試作(50分)
設計書もある、データ設計もある、Pythonもいけそう。じゃああとはキャンバスアプリを作るだけじゃないか。キャンバスアプリってClaude Codeに頼むとこんな風に作ってくれます。(ギャラリーは使えないけど)
全体の仕組み
要件(日本語)
↓ Claude が .fx.yaml を書く
src/App.fx.yaml + Screen*.fx.yaml
↓ bash src/build.sh <アプリ名>
pac canvas pack(Microsoft 公式 CLI)
↓
data/output/<アプリ名>.msapp
↓ Power Apps Studio にインポート
本質: .msapp はただの ZIP。中身は YAML テキスト。pac がそれをコンパイルする。ということで、作ってもらおうとしました。あわよくばこれでできたら嬉しい。

キャンバスアプリをClaude Codeに試作してみてもらった結果
いろいろ手直しが必要でした。原因はこの辺りのようです。
- リレーション付きのDataverseをデータソースとしている。
- 5画面ぐらい必要
- 画面遷移の際にユーザー情報やすでに投票をしているかどうかなどのフィルター条件が必要


AIが作ったものを人が理解して手直しをするのは、ハードルが高い。ということでキャンバスアプリは自分で作成することにしました。この辺がプロ開発のアプリケーションと違うところでしょうか。コードで開発しているアプリならCladue Codeに手直ししてもらえるのに。そう思いました。
4日目:キャンバスアプリ完成(500分)
実は設計の段階でフローチャートやシーケンス図もClaude Codeが作成済みです。じゃあこっからは私の腕の見せ所じゃないか。(ワクワク)


イメージできていないという壁
データ設計も全部やってもらっている。中身を確認したとはいえ、頭の中で完全にイメージはできていない。そこにPower Apps特有のグローバル変数・コンテキスト変数・コレクション・ユーザー情報やフィルター条件が加わることにより、何からやればいいか分からなくなりました。アプリの見た目にも拘りたいし、AppOnStartでアプリのカラーパレットも定義したい。
ということでClaude Codeに相談しました。
カラーパレットや変数を事前に定義する
アプリ全体の設計・データ設計・やりたいことがファイルとして存在している(Claude Code作)。じゃあそれを読みつつ、キャンバスアプリ実装の設計書を作って貰えばいいじゃないか。ということでカラーパレットや最初に定義するべき変数の設計からやってもらいました。(私の出番はいつあるんだろうか)

テキストでカラーパレット言われてもよく分からん。ということで、カラーパレットを定義してそれをPower Appsで見るためのキャンバスアプリを作りました。こういうデータソースなしのキャンバスアプリはClaude Codeで作れます。(任せてください)
なんかもうAppOnStartじゃなくてFormulasを使うらしいよ。じゃあ、今回からそっち使ってみるか。カラーパレットをFormulasとやらに入れて、Claude Codeが提案してくれた色合いを、Claude Codeが作ってくれたキャンバスアプリで見る。
私がしたこと。「この色にする」という決断・・・(やっと出番があって嬉しい)

キャンバスアプリの作り方を全部作ってもらおう
ここからは私が手を動かすことになります。先ほども言いましたが、このアプリを開発するのは私には少し荷が重いです。じゃあClaude Code にキャンバスアプリの作り方を全部作ってもらえばいじゃないか。こんな感じに。
私はこれをみながらキャンバスアプリを作成しました。AIが作った手順書を見て、人間が作業をする。素晴らしいです。(本当は作成するところまでやってほしい・・・)
これが5スクリーン分あります。

こんなところは詰まる
Two Optionsのデフォルト値をコンボボックスでの設定がうまくできず。結局、Dataverse側の既定値をYesにして、アプリからは空で送信することにした。ちなみにこの解決策もClaude Codeが考えました。

一番詰まったのはここです。3つのテーブルにまたがるフィルター条件でした。今回の議題の意見の中で、自分がまだ投票していない意見のみを表示したい。Dataverse 側でリレーションをしていると、子テーブルから親テーブルの指定方法や、それらをFilterで絞り込むための方法が難しかったです。
Claude Code側は「Sonnet 4.6」を使用していますが、Claude (ウェブでチャットする方)でOpus 4.6に相談をしたところ、解決できました。Claude Code側でもOpus 4.6を常に使えば、今回の問題は起きなかったかもしれません。ProプランなのでOpus 4.6をずっと使うのは結構厳しい。困った時は自分で調べるのもそうですが、AIのモデルを上位のものにしてみるのもいいかもしれません。

キャンバスアプリができた
いろいろありできました。正直こんなにすぐできると思ってなかったです。期日がありそれに間に合わなかったらどうしようと思っていましたが、形になってホッとしました。

散布図を可視化するためにSVGも作成してもらっています。この調子だとSVGを理解することはもうないかもしれません。AIに相談すればいいじゃんになってしまいそう。

1年前はどうやったのかを振り返ってみよう
1年前の資料を振り返ります。こうしてみると成長したな〜と実感します。
アプリの設計
アプリ全体の遷移など検討。悪戦苦闘している様子が素晴らしいですね。

手書きだとイメージはしやすいけど、細かいところまで表現はしきれないな。あとはAIにこれを渡しづらい。AIと仕事をする上で、共通言語となるMarkdownがいいですね。チャットでやり取りをしてファイルを作ってもらえるし。手書きのやつはAIが手直しして、それを私が再編集ってのができない。それが結構致命的だな。

ついでにアプリネタ帳
このクオリティはまだAIにはできないだろう。最高のネタ帳だ。




まとめ
Claude Codeと作業をすることによって、設計からPython実装、アプリ開発まで12時間ぐらいでできました。これからもっと細かいところの修正はしますが、それでもこんなにもスムーズにできるなんて驚きました。作りながらエラーを解消していくことが多いと思いますが、Claude Codeと作業をすると設計図書のコンテキストも踏まえた回答をしてくれるのが良かったです。
Python(機械学習モデル作成)・Dataverse(PL-200取得)・Claude Codeという、ここ1年間で習得したスキル達があってこそ今回のPower Appsが作れました。AIの力をめちゃくちゃ借りていますが、やりたいこと実現したいことができるのは、すごい嬉しいです。
作業を終えた後の私の手元には、Claude Codeとの会話ログとアプリやデータの設計書がデータとして残っています。しかもテキストファイルです。次回、何か似たようなことをしたいとき、今回の設計書を読んでもらって、同じような手法でアプリ開発ができるのではないでしょうか。同じ作業をしていても人がやっていたら、今から設計書の作成などの仕事が始まりますよね。AIと仕事をするってすごいなあと感じています。
4月6日追記:アプリ画面をスライドで作ってもらった
デザインが得意な人とUIをブラッシュアップするかも。Power Appsを渡して作業してもらうのは難しいし、今の画面スクショだけ渡すのがいいのか悩む。そうだ、実際のアプリができているから、スクショしてClaude にスライドとして生成して貰えばいいじゃないか。
いや待てよ。もはやスクショなんて不要なのでは。なぜなら設計書の中に画面設計まで書いてあるのだから。ということで設計書を全て読ませて画面イメージをスライドで生成してもらった。キャンバスアプリを作り始める前にやっておけば良かった。これから作りアプリのイメージめちゃっちゃしやすいじゃないか。
議題一覧スクリーン


投票スクリーン


