簡易デスクトップマスコットをAIで作ってみた流れとアプリ紹介

P

前置き

簡易デスクトップマスコットをAIで作ってみたので紹介と手法の解説をします。
作成理由としては、ちょっと前にDesktop Mateが流行ったけど、3Dである以外劣化伺かだなぁ……みたいなのを思ってました。
最近のAI仕事で使ってて賢いし、前回ゲームを作りかけた感じ、無料でも劣化伺かなら作れるのでは？と思ったのが始まりです。
一応単純な劣化伺かでは無くて、ユーザーが簡単に台詞・立ち絵を追加出来るようにしてあります。

紹介

PNG画像を画面に表示し、JSON形式の台詞を読み込んで定期的に喋る簡単なWindowsアプリです。

https://youtube.com/shorts/SamJpuVGTzE?feature=share

ダウンロード先は下記。
https://github.com/nazop/PNGMascot_Release

ReleasesのPNGMascot.zipをダウンロードして、.NET 10.0をインストールしたら起動できる……はずです。
自分のPCでは開発環境入ってるので他に何か必要かも知れない。起動したら分かるだろ多分。

ソースは全部AIが書いていて、特に中身は読んでいません。
動作テストは簡単にしましたが、何か変な動きするかも知れないです。
PCぶっ壊れはしないだろうけど何も保障はしません。

競合との差別化

Desktop Mate君試してないけど、アレは3Dキャラが動くだけで劣化伺かだと思っています。
https://store.steampowered.com/app/3301060/Desktop_Mate/?l=japanese

伺か君はゴースト追加するの大変過ぎるので廃れたのかなぁというお気持ち。
https://ssp.shillest.net/

MateEngineっていうのがデスクトップマスコットで調べたら出てきたけどDesktop Mateの進化系っぽくは見える。有料だけど。
https://store.steampowered.com/app/3625270/MateEngine/

こいつらを眺めた結果、本作はシンプルで軽量な作りで簡単に台詞追加が出来るように作ってあります。

コンセプトは下記。
・3Dキャラ読んだらリソースを食うし実装が大変だから、png画像で軽く抑える
・簡単に台詞を追加出来る
　・AIに作らせる前提で作ってます

最小構成で作ったので細かい条件分岐で台詞を喋らせるとかは作っていません。
表情差分追加も考えたのですが、JSONと一対になっちゃうので仕様として却下。

やったこと

1.大まかなやりたいことを決める
2.ChatGPTに1.で決めた内容を投げて質問させる
3.AIと応酬して齟齬が無くなった段階で設計書を作らせる
4.タスクリストをAIに作らせる
5.プラットフォームをC#のWPFで作れと言ってきたので、やり方を聞く
6.Visual Studio Communityをご所望だったのでインストール
7.AIの言う通り「.NET デスクトップ開発」をインストールして「WPF アプリケーション」のC#を選択
8.マイクロソフトアカウントとGithubアカウントでログイン
9.Github Copilotを登録していてそれを使うつもりだったのだが、Visual Studio君がチャットUIを組み込んでくれていたので、それで実装
10.ビルドしてテストして思ったのと違うところを修正していく
11.良い感じに出来上がったところでgithubへソースをpush
12.debugというところをreleaseにしてビルドし、プロジェクトフォルダのbinフォルダ内にリリースビルドを作成
13.zip化したものをgithubで配布
14.サンプル動画をSnipping Toolで取ってyoutubeで公開

ポイントは仕様書まではChatGPTで、ソースを書かせるときはGithub Copilotを使っているところです。
実装時にサンプル用でAIに台詞用のJSON吐かせてますが流れがぐちゃぐちゃになるのでここでは割愛。

1.大まかなやりたいことを決める

まずはデスクトップマスコット作りたいな～、ぱっと思いついた大まかな仕様はこうで～と決めました。
この時点ではVRMを読み込むかpng画像を読み込むか迷ってました。
Windows上で動くこととJSONで台詞を喋らせることだけは決まってました。

2.ChatGPTに1.で決めた内容を投げて質問させる

決めた内容をChatGPTに流し込んで、不足点を質問させました。
今までそうしてきたからなのか何なのか、設計書と計画を立てる前提で質問を大量にしてきて微笑ましかったです。
質問内容はそこ分かんないかぁ……って感じのが多かったけど我慢。
無料のAIはこのレベルなんですね。エスパーし過ぎるのも問題ですが。

何でここはChatGPTかと言うと、本当はGithub Copilotを使いたいけどメッセージ回数制限が厳しいからです。
大事なところだけファイルを読み込めるGithub Copilot君に頑張って貰う作戦です。

3.AIと応酬して齟齬が無くなった段階で設計書を作らせる

質問に答えて追加質問が無いかを聞き、2回目の質問で質問は無くなったようです。
しかし出してきた仕様が思ったのと違うのでAIを詰めました。
仕様さえ明確に決定しておけば実装時困らないですからね。
特にJSON形式が思ってたのと違うのが辛かったです。全部テンプレを自分で書き直しました。
結果的に使ってないパラメータが居るのは突っ込み禁止。

その後ようやく設計書を作らせました。
これも思ったのと違っていて3回ぐらい作り直させました。
要件定義大事ですからね。
合間で前回作った物から大量に欠落した内容があったのが一番の残念ポイント。
何で詰めた内容しか入ってないんだ、流石に無料だとポンコツが過ぎる。
claude opus 4.6君は賢いのになぁ、使用するポイント多めだけど。

4.タスクリストをAIに作らせる

設計が出来たのでとりあえずタスクリストをAIに作らせました。
本当は一個一個作らせるつもりでこのリストを作ったのですが、今回シンプルだしまぁいけるだろと全部一気に実装させたので、やることの明確化以外には寄与していなかったと思います。
でもタスクリスト大事だから作っておいて損は無いと思う。ChatGPTならチャット回数制限とか引っかかったの見た事ないし。

5.プラットフォームをC#のWPFで作れと言ってきたので、やり方を聞く

仕様をつめつめした結果、C#のWPFで作るのが提案の中で一番良さそうと判断してこれを採択しました。

Electronとか提案してきて何だろうと思って調べたら、npm installさせようとしていたので却下。
https://ics.media/entry/7298/
理由は最近npm installしたらマルウェア混入しがちだからです。
スタンドアロンで完結したかった。

で、UnityでC#かじってるし、VB.NETも仕事で使ったことがあったので、C#でWPFを採択。
結果としてC#のソースは1ミリも読まなかったし、UIのソースも見なかったけど、Visual Studioでの開発方法はある程度UnityとVB.NETで学んでいたので悪くない選択でした。

ただ、これだけだとどんな形式想定してるの？と分からなかったので質問。
やり方を詳しく教えてくれたのでその通りにしました。

6.Visual Studio Communityをご所望だったのでインストール

まずVisual Studio上での開発をご所望だったのでインストールしました。
Communityのライセンスなら大丈夫やろと思ってCommunityの2022版をインストール。
後で見たら別のVisual Studio入ってそうな気配がしたけどまぁ、うん。そんなこともあるよな。

7.AIの言う通り「.NET デスクトップ開発」をインストールして「WPF アプリケーション」のC#を選択

インストール後、AIが示してくれた通りに「.NET デスクトップ開発」をインストールしました。
そして「WPF アプリケーション」を選んでプロジェクト作成。
C#とVB.NETがあったけど今の時代にVB.NETは無いだろと思い、そのままC#を採択。

8.マイクロソフトアカウントとGithubアカウントでログイン

7とどっちが先か忘れましたが、アカウントのログインを求められたのでマイクロソフトでログイン。
GithubアカウントもとりあえずログインしたらVSCodeで見慣れたGithub Copilotのチャット画面が出てきて嬉しみがありました。

9.Github Copilotを登録していてそれを使うつもりだったのだが、Visual Studio君がチャットUIを組み込んでくれていたので、それで実装

というわけでここからGithub Copilotに仕様書と実装タスクを読ませて、実装開始しました。
Github Copilot君はファイル読み込めるのが良いよね。勝手にプロジェクト内部のファイルも読んでくれて有難い。

ちなみに全部実装させた段階で50%ぐらい使ってました。
50回までチャット出来るって書いてあるから25回で済んだと思うと仕様書を先に作ったのはデカイ。

10.ビルドしてテストして思ったのと違うところを修正していく

まぁ当然に仕様は詰め切れていなくて、ビルドして動かしてみても色々とプロトタイプじゃ動かないし実装も足りないので更に詰めていきました。
ポイントはチャット内容や実動作が思ったのと違うと思ったら逐一言語化して突っ込むこと。
まぁえぇかでほっとくと豪いことになります。違和感大事。

この辺で表示する画像が無かったので適当に前描いた絵を入れ込みました。
後、台詞ファイルはChatGPTに吐かせました。
プロンプトは下記に書いた。
https://github.com/nazop/PNGMascot_Release

11.良い感じに出来上がったところでgithubへソースをpush

ひたすら詰めていって、荒が取れた段階でgithubへ保存しました。
AIは時々既存機能をぶっ壊すので現状保存大事。
gitで管理する前提で作ってなかったのでgit cloneをした場所に移すアホもやりました。

ソースとして余分なファイルがいっぱいあったので、良い感じに無視してくれる.gitignoreファイル作れないかな～と思ってたら下記が使えそうだったので拝借して.gitignoreにリネームしてプロジェクトに取り込みました。
https://github.com/github/gitignore/blob/main/VisualStudio.gitignore

ちなみにAIとのやり取りとかのドキュメントはあえてソースに突っ込んでいます。保管すると再現性が上がるので。無いけどなAIに再現性。

12.debugというところをreleaseにしてビルドし、プロジェクトフォルダのbinフォルダ内にリリースビルドを作成

流石にdebugビルドを使うわけにはいかないので、Visual Studio上のUIの上の方にあるdebugというところをreleaseにしてビルドしました。
プロジェクトフォルダのbinフォルダ内にリリースビルドを作成されたのでそちらをexeとして利用しています。
合ってるかは知らん。どうでも良い。ソース作ったのAIだしな。

13.zip化したものをgithubで配布

下記を参考にzip化したものをreleaseで配布しました。
https://note.com/sobagoro/n/ne047afec4675

配布方法考えるのめんどかったから仕方ない。
ソースはまぁ普通に別管理です。exeだけpublicで配布しました。

14.サンプル動画をSnipping Toolで取ってyoutubeで公開

動画欲しいなぁと思ったので、Snipping Toolで動画を取りました。
見えちゃいけない物が見えない程度に狭めて、ファイルシステムも開かない短い動画です。

youtubeは前にも動画を公開したことがあったので、チャンネルに投稿しました。
チャンネルの作り方は忘れた。
流れで公開押したら公開してくれたので楽でした。

これで完成です。
この内容をまとめるまでで丸一日ぐらいです。
作るだけなら7時間ぐらい。
流石にAI君賢いのでアプリが簡単に作れる時代になったなぁと感心しました。
開発環境の事前知識があればの話ですが。
無料でもプログラマーはAIに実装お任せすれば良いラインに来ています。

まとめ

というわけでAIで簡単なアプリは意外と作れます！
開発環境の事前知識は必要ですが、コードも見る必要はないです。いやJSONのテンプレは自分で書き直したけど。
後怖い物知らずの人は作成したアプリもご利用下さい。何も保障出来ないけど。


いいなと思ったら応援しよう！