Copilot Code で愛犬の成長記録アプリを作ってみた！SharePoint 連携から公開まで全自動♪

Microsoft Copilot に新しく ｢Copilot Code｣ が登場したので早速 Web アプリを作成してみました。Copilot Code は、作成したいアプリやツールの要件を自然言語で伝えることで、AI がコードを生成し、実際に動作するソフトウェアを構築してくれる機能です。

今回は、まずは身近な題材で試してみようと思い、愛犬の成長記録アプリを作成することにしました。体重や健康状態、お留守番の練習記録、写真などを管理できるアプリです。

アプリの名前は「HACHI DAYS」。

最初はどの程度のアプリができるのか試してみるだけのつもりでしたが、実際に動かしてみると、想像していた以上に本格的な開発が始まり、画面だけでなく、SharePoint サイトやリストの作成、データ接続、アプリの公開まで Copilot Code が進めてくれました！

今回は、Copilot Code にアプリ作成を依頼してから、完成したアプリを実際に使ってみるまでの流れを紹介します。

1. Copilot Code にアプリ作成を依頼

まずは、Copilot Code で新しいセッションを開始します。今回は、愛犬の成長を記録するためのアプリとして、次のような機能を考えました。

• プロフィール：名前、誕生日、犬種、写真
• 成長記録：体重の登録、推移グラフ、前回からの増減
• 健康記録：食欲、元気、排便状態、メモ
• お留守番記録：練習時間、吠えた時間、結果
• 思い出アルバム：写真、タイトル、コメント、タグ
• 成長タイムライン：初めてのお散歩などのイベント

また、日常的に使うアプリなので、デザインについても要望を伝えました。
アイボリーとベージュを基調とした温かみのある配色、丸みのあるカード型の UI、スマートフォンと PC の両方に対応したレイアウトなどです。

これらをまとめて、Copilot Code にアプリの作成を依頼しました。

愛犬の成長を記録するアプリ「HACHI DAYS」を作成してください。

【アプリの目的】
トイプードルの子犬「ハチ」の成長、健康状態、
お留守番の練習、日々の思い出を記録する
個人向けアプリです。

【デザイン】
・温かみのあるアイボリーとベージュを基調とする
・丸みのあるカード型UI
・肉球や犬のアイコンを使用する
・かわいらしく、洗練されたデザイン
・日本語UI
・スマートフォンとPCの両方に対応する

【必要な画面】

1. ホーム
・ハチのプロフィール写真
・現在の月齢
・最新の体重
・お留守番の最長成功時間
・最近の写真
・今日の記録へのショートカット

2. プロフィール
・名前
・誕生日
・犬種
・プロフィール写真
・編集機能

3. 成長記録
・日付、体重、メモの登録
・体重推移の折れ線グラフ
・前回測定からの増減表示
・記録の編集と削除

4. 健康記録
・日付
・食欲
・元気
・排便状態
・自由メモ
・過去の記録一覧

5. お留守番記録
・日付
・練習時間（分・秒）
・吠えた時間（分・秒）
・練習場所
・結果
・メモ
・練習履歴
・時間の推移グラフ
・吠えずに過ごせた最長時間
・新記録達成時のメッセージ

6. 思い出アルバム
・写真のアップロード
・撮影日
・タイトル
・コメント
・タグ
・アルバム表示
・カレンダー表示

7. 成長タイムライン
・初めてのお散歩などのイベント登録
・写真付きの時系列表示

【共通要件】
・登録データを永続保存する
・記録の追加、編集、削除に対応する
・削除前には確認メッセージを表示する
・入力値の検証を行う
・誕生日から月齢を自動計算する
・グラフは登録データから自動更新する
・データがない場合も自然な画面を表示する
・サンプルデータを実際の記録として登録しない
・個人利用を想定し、データは非公開にする

まずは動作するアプリを構築してください。

ちなみに、このプロンプトも Copilot Chat に ｢愛犬の成長記録アプリを作りたいから、指示文を考えて｣ とお願いして作ってもらいました♪

データの保存先や構成は指定しなかった

今回のプロンプトでは、アプリを閉じても記録が消えないように、データを永続保存することを要件に含めています。ただし、どのような構成でアプリを作成するのかを確認したかったので保存先として SharePoint を使用することや、サイト・リストの構成までは指定しませんでした。

プロンプトを送信すると、Copilot Code がアプリの構築を開始しました。

2. アプリのコード生成開始

Copilot Code に依頼すると、コードの生成が始まりました。
画面には、編集したファイル数、実行したコマンド数、使用したツールなどが表示され、作業が進んでいる様子を確認できます。

今回のセッションでも、ファイルの編集やコマンドの実行が次々と進んでいきました。

単純にコードを生成するだけでなく、途中では画面構成の調整や、生成したコードの確認・修正も行われていました。実際のログには、次のような処理が表示されていました。

• 画面コンポーネントの修正
• TypeScript の型チェック
• Lint によるコードの確認
• 開発サーバーでの確認
• 公開前のチェック

なお、これらの処理が実行されたことはログから確認できましたが、すべての機能テストが実施されたことを意味するわけではありません。

また、コード生成だけでも十分すごいのですが、今回はさらにデータの保存先として SharePoint サイトの構築がはじまりました。

3. SharePoint サイトとリストを自動構築

アプリの構築が進む途中で、Copilot Code からデータの保存方法について確認されました。ブラウザー側に保存する方法と、SharePoint に保存する方法です。

今回は、記録を継続的に保存できるように、SharePoint を使用することにしました。すると、Copilot Code は SharePoint への接続を準備し、サイトの作成を提案してきました。

SharePoint サイトの作成

Copilot Code から、データ保存先となる SharePoint サイトについて質問されました。

選択肢は、新しいサイトを作成する方法と、既存のサイトを利用する方法の2つです。

今回は、HACHI DAYS 専用のサイトを新しく作成することにしました。
すると、Copilot Code により自動で「HACHI DAYS」というサイトが作成されました。すごい！！

作成されたのは、Microsoft 365 グループに接続されていないチームサイトでした。指示に合わせてサイトの種別も変わるのかも今後試してみたくなりますね♪

SharePoint リストの作成

サイトの作成後、続いて SharePoint リストの作成が提案されました。

画面には CreateLists や UpdateListSchema (列の作成) の確認が表示され承認を求められました。

順次承認を行いサイトを確認すると、次の 5 つのリストが作成されていました。

※実際のリスト名には、自動生成された識別子が付いていました。

最初に指定した機能に合わせて、用途別にリストが分けられているのもいいですね！

アプリと SharePoint の接続

SharePoint 側の準備が終わると、今度は生成済みのアプリを SharePoint に接続する処理が自動的に始まりました。

開発ログには、プロフィール、成長記録、健康記録、お留守番記録、アルバム、タイムラインなどの画面を修正する処理が表示されていました。作成したアプリの画面を、SharePoint のデータを使用する構成へ変更してるように見えました。

アプリの生成からデータ保存先の構築、接続処理まで、一連の作業を自動で進めてくれたことにはかなり驚きました。

4. アプリが完成 実際の使用感

SharePoint との接続やコードの確認が完了すると、Copilot Code によってアプリが公開されました。

完成した「HACHI DAYS」がこちらです。かわいい♪

ホーム画面をはじめ、体重の推移グラフ、健康記録、お留守番の練習履歴、写真アルバム、成長タイムラインなど、最初に依頼した機能が実装されていました。デザインも、指定したアイボリーとブラウンを基調とした統一感のある仕上がりです。

実際にデータを登録すると、グラフや記録一覧にも反映されました。自然言語で要件を伝えただけで、ここまで完成度の高いアプリが生成されるのは正直期待以上でした！

5. SharePoint サイトのデータ確認

完成したアプリが見た目だけのモックアップではないことを確認するため、SharePoint 側も確認しました。

HACHI DAYS からプロフィールや体重、お留守番、イベントなどの情報を登録したあと、SharePoint サイトのリストを開いてみます。

すると、各リストにデータが保存されていることを確認できました。

これにより、今回のアプリでは、少なくともデータ登録と表示は正常に動作していることを確認できました。

(補足) 写真データの保存先は？

一方、写真データについては、SharePoint には保存されていませんでした。ブラウザーの開発者ツールで確認したところ、写真は IndexedDB に保存されていました。(IndexedDB は、ブラウザー内にデータを保存するための仕組みです。)

今回のアプリでは、hachi-days というデータベースが作成され、images という領域に写真が Base64 形式で保存されているようです。

つまり、1 回の指示で生成された今回のアプリでは、次のように保存先が分かれています。

この構成では、異なる端末やブラウザー間で写真データは共有されません。また、ブラウザーのサイトデータを削除すると、写真が失われる可能性があります。写真も SharePoint に保存する構成への変更については、今後の検証課題としたいと思います。

6. 開発にかかった Copilot クレジット

ここまでのアプリを作成するのに、どの程度のコストがかかったのでしょうか。

Copilot Code は、アプリの構築時に Copilot クレジットを消費します。今回の検証では、タスクの使用状況を確認したところ、次の結果になりました。

今回のクレジット消費量

※日本円は参考換算です。実際の請求額は契約条件や為替レートなどによって異なります。

今回の検証では、アプリの画面生成だけでなく、SharePoint サイトやリストの構築、データ接続、コードの修正、アプリの公開まで実施しています。それらを含めて、確認時点の消費量は 646 クレジットでした。

この金額で、ここまでのアプリを構築できたことには驚きました。

開発費と実行費は別

ただし、ここで注意したいのは、646 クレジットはアプリ開発時の消費量という点です。公開したアプリを利用するときのライセンスや Copilot クレジットの扱いは、開発時とは異なります。また、アプリの利用方法によっては、データアクセスに伴う API 呼び出しも発生します。

今回のような個人向けアプリでは小規模な利用を想定していますが、業務アプリとして複数のユーザーに共有する場合には、実行時のコストも考慮する必要がありそうですね。このあたりの仕組みについては、次回の記事で詳しく記載したいと思います。

7. まとめ

今回は、Copilot Code を使って愛犬の成長記録アプリ「HACHI DAYS」を作成してみました。最初に伝えたのは、作りたいアプリの機能やデザイン、データを保存したいという要件だけです。

途中でいくつかの確認や承認は必要でしたが、SharePoint サイトやリストの作成、データ接続、アプリの公開までそのまま進み、完成したアプリはデザインもきれいで、実際にデータを登録して使える状態になっています。

写真の保存先など、改善したい部分はありますが、最初のアプリ作成依頼だけで、ここまで本格的なアプリが構築されるのは素敵すぎますよね🐶💕

次回は、完成したアプリの中身を確認！

今回作成した HACHI DAYS は、Copilot Code で公開した Web アプリです。

次回は、この Copilot Code で作成したアプリの実行基盤である Copilot Managed Runtime や、利用者に必要なライセンス、アプリ実行時の Copilot クレジットなどをご紹介したいと思います。

また、生成されたソースコード一式も ZIP ファイルとして取得できたので、実際にどのような技術で構築されているのかも見て面白いことがあれば記載します。