はじめに
どうも、Vibe Coderのたにあんです。
Advent Calendar 23日目です。
今回はCursorでデスクトップアプリを作ってみた話です。
Slay the Spireという日課としてプレイしているほど愛してやまないゲームがありまして、それにまつわるアプリケーションを作りました。
色々問題が残っているので公開することはないですが、個人目的の利用で満足しているので実際に作ってみた過程で感じたことをまとめておきます。
作ったもの
Slay the Spireというゲームの戦績を記録するためのPC用デスクトップアプリです。
少しだけゲームの説明をしておくと、敵を倒してカードを集めどんどん強いデッキを作っていくというゲームです。何度も遊べるゲームで、遊ぶたびにプレイ履歴が増えていきます。
アプリケーションの画面はこんな感じです。
ゲーム内の機能でプレイ履歴の確認は可能ですが詳細な情報は表示されません。
そこで、プレイ履歴ファイル(.runファイル)からより詳細に情報を表示するためのアプリケーションです。
すでにWebアプリとして有志の方が作成されたサービスがいくつか存在しますが、アカウント登録数の上限に達しているケースがほとんどで利用できないので作ることにしました。
開発期間
開発といっていいのかもはや分かりませんが、以下の条件でトータルで約3ヶ月、時間だと150~200時間くらいでした。
- 開発には基本的にCursorのみを使用する。
- 開発途中で分からない点があれば、ClaudeやGeminiなり他の生成AIを使う。
- Cursorだけで解決しなさそうであれば、Claude Codeにも並列で聞いてみて、Cursorに指示を出すためのドキュメントを作らせるということはある。
- 基本的に仕事がない土日だけで実施する。
ちなみに、熱心に取り組んでいたのは2~4月あたりで、そこから力尽きて12月に再開したという時系列です。
期間が飛んだことでAIの性能向上を感じることもできたので、後ほど少しだけ触れます。
とりあえずやってみたこと
画面や機能単位でmdcファイルを作成
AIが出てきてから再三言われてきたことではありますが、ドキュメントはちゃんと作りましょう。
画面単位で機能の説明を記載して、どのデータから情報を取得して加工し、どのような画面表示にするかをmdcファイルとして作成していきます。
その他にはデザインに関するmdcファイルも作成しておきます。
機能を実装していくと、日本語と英語がごちゃ混ぜ、異なるフォントや色を使い始めるということもあったので、最初から作っておくことをおすすめします。
恐らく、この作業だけでほぼ終わっていて、あとはAgentに実装させれば6割くらいは完了すると思います。
ドキュメントをちゃんと分割して作っておいたのも、画面単位で修正指示をAgentに出すことが多く、結果的に良かったのではないかと思っています。
言語で説明が難しいものは画像を使う
例えば、以下のような画面は複数の画像を重ね合わせて表現しているのですが、言葉で説明するのが大変だったので、手書きで説明を書いて指示を出すことでなんとか実装してもらいました。
説明用の画像だけでは不十分なので、元になるファイルやデータの加工方法はmdcファイルで記述しておいて、地道に進めていくことになります。
これらの説明を書いたとしても、一発で完璧なものが出てくることはなく、cssの微修正が必要でしたが、言葉で説明できないものは諦めて説明用の画像を作るのが吉だと思います。
人間に置き換えるとPowerpointを使って図で説明するための資料を作るみたいな感覚です。
苦しかったこと
UIの設定
実際に、開発環境やビルドしたアプリを起動してみると｢微妙にズレている｣や、｢イメージしているアイコンや配置になっていない｣ということも多く、かなり苦しめられました。
細かい配置の調整はcssを自分で変更する方が早いので、大枠はCursorに作ってもらって自分で修正するということが多かったです。
cssはざっくり｢こんなことやってるんだな~｣という認識しかなかったので、cssに関するドキュメントを読み漁ったりすることもありましたが、全部AIにどうしたら解決するのか聞いた上で修正していたので、爆速で修正できました。
話が逸れますが、Cursor Visual Editorなるものが2025/12/11に公開されていたようです。軽く触った限りだと、微調整をするなら結局コードを自分で見たほうが早いよね、ということに落ち着きそうで、あってもなくてもどちらでもいいなという機能でした。
そもそもビルドがうまくいかない
macOSとWindowsの両方で動作するアプリを作りたく、Electronを使用していたのですが、開発環境で表示されている画像が本番環境だと表示されない、といった事態に見舞われ、Vibe Codingの弱点を突かれてしまったような感覚がありました。
2025年2～3月は開発における知識もなく、CursorやClaudeに聞いてもどうにも解決してくれず、修正すればするほど作ったものが壊れていくという負のサイクルに入ってました。
ところが12月に再度実施すると、他の機能を壊すことなく修正してくれたので、AIモデルの性能向上が大きく影響しているなと感じた次第です。
Microsoft Defender for Endpointで検知されまくる
実際に作ったアプリをビルドしてWindowsに展開すると…トロイの木馬判定を食らっとる…！！！！
一時的に検出を回避させているものの、本来はそのような設定をしたくないので追々修正しなければいけない点ではあります。
アプリのパフォーマンスが悪い
画像を大量に使っているおかげか、使えないレベルではないですが、アプリケーションの読み込みに数秒かかっちゃいます。
どうするん？って感じでこれも、MDfEの検出と同様に色々調べながら根気強く対処していく必要がありそうです。
最初からやっておけばよかったこと
すでにここまでで記載した内容もありますが、まとめておきます。
- ドキュメントの作成
- フォルダ階層やどういった単位でドキュメントを作成するか、ベストプラクティスがあると思うのですが、3ヶ月後、半年後にどうなっているのか分からないので、とにかくドキュメントを作ってみるってことが大事かと思っています。
- 最初は画面単位で作成してたのですが、機能単位で作った方がいいです。
- 正解はあまりわかっていないです。
- 音声入力の利用
- Cursorも複数のAgentを同時に動かせるので、キーボードだけだと間に合わない、シンプルに効率が悪いシチュエーションがあります。
- テキストを書くことと話すことの得意、不得意が人によってあるので一概におすすめできるものではないですが、簡単にまとめて話せるのであれば音声入力の利用が効率的な方法ではないかと思います。
- 変更がうまくいったら、Agentにmdcファイルの内容を修正させる。
- 最初は怠っており、作ったものが色々壊れていくみたいなこともありました。
- AIモデル依存の部分もあるので、一概には言えないと思いますが、mdcファイルを整えておけば簡単に戻せたんだろうなと思います。
- mdcファイルに変更が適用されていなくて困ったこともありました。
- Agentに指示した内容を修正させるだけで十分です。
- 最初は怠っており、作ったものが色々壊れていくみたいなこともありました。
- デザインもmdcファイルに定義しておく。
- 正直、専門外の人間が自分で一から作るのは微妙なので、まるっとAIに生成してもらうので事足ります。
- 今回は使用してほしいフォントだけ指定してあとはお任せにしました。
おわりに
分からんことが多い一方で、自分でアプリケーションを作れるという可能性も見えてきますし、実際に世界ではVibe Codingでトライしている事例もたくさんあるので、AIでレバレッジをかけられる人間の成長やスキルがどんどん加速していくのだろうなとも感じました。
今回はCursorでしたが、今はClaude CodeやCodexの方が優勢なようにも見えますし、色々触りながら試行錯誤していくと見えてくる景色も変わってくると思います。
