はじめに

今回は、Codex GPT-5.5 に Windows アプリを作成してもらったときの話になります。

いままで AI エディター（Kiro, Antigravity など）を使っていたのですが、Codex デスクトップ版を使ってみました。

AI エディターと違って、「丸投げ感がすごい」 が...あと対話が無いので...ペアプロ感も無し

...面白いやりとりもないですｗ

まずどうやって動くものを作成しているのかの流れの説明になります。

• AI にアプリの仕様書を作成してもらう
• Codex GPT-5.5 デスクトップ版を使ってアプリを作成
• 起動して動作確認
• 作成されたものをベースに修正 ← ここは今回パスします。Codex デスクトップ版でもいいですが...Kiro, Antigravity, Cursor を使ったほうがいいかも

以降、実際の流れになります。

1.作りたいアプリの仕様を作成

Gemini に仕様をまとめてもらいました。

🧑💻 ユーザー

タイムタイマーって言って通じますか？

あのタイムタイマーを Windows のデスクトップアプリとして作成したいです。

外観はあのいろんな色に変更できるようにしたいです。

タイムタイマーの機能はひととおり実装してほしいこんな感じで...えっと AI エージェントに渡すアプリの仕様を考えてくれませんか

🤖 Gemini

Windows のデスクトップアプリとして「タイムタイマー」を作成するプロジェクト、非常に面白そうですね！

AI エージェント（Cursor や GitHub Copilot など）に渡す際に、「一発で意図が伝わり、手戻りが少ない」レベルまで落とし込んだ仕様書案を作成しました。

特に外観（カラーカスタマイズ）と、Windows ネイティブな使い勝手を両立させる点にフォーカスしています。

AI エージェント用：アプリ開発仕様書案

1. プロジェクト概要

• アプリ名: Visual Progress Timer (仮)

• 目的：タイムタイマーの「残り時間が色面で減っていく」視覚効果を再現した Windows デスクトップアプリ。

• 技術スタック：指定なし（推奨：Flutter, React + Tauri、または C# / WPF）

※軽量かつデスクトップでの描画パフォーマンスを重視。

2. コア機能 (Core Features)

タイマー設定:

• 円形（または扇形）のゲージをドラッグして直感的に時間を設定。

• 最大 60 分（設定で最大時間の変更も可能にする）。

カウントダウン制御:

• スタート / ストップ / リセット機能。

• 残り時間に合わせて、色面が時計回りに消えていく（または反時計回りに減る）アニメーション。

通知機能:

• タイムアップ時にシステム通知およびアラーム音の再生。

3. 外観・カスタマイズ (Appearance & UI)

色変更機能 (Color Themes):

• ゲージの色：ユーザーがカラーピッカー、またはプリセット（赤、青、緑、オレンジ）から選択可能。

• 背景色：ダークモード / ライトモード対応。

ウィンドウ制御:

• 最前面表示 (Always on Top): 他の作業中も常に視界に入るように切り替え可能。

• 透過設定：ウィンドウ自体の不透明度を調整し、作業を邪魔しないようにする。

• 枠なしモード：最小限の円形タイマーだけを表示するフローティングモード。

4. UI/UX 仕様

レスポンシブ：ウィンドウサイズに合わせてタイマーの円がリサイズされること。

操作性：マウスホイールでの時間微調整機能。

5. 実装ステップの指示（AI へのプロンプト例）

「上記仕様に基づき、まずはメインの円形タイマーを描画し、カウントダウンに合わせて色面が減っていく基本ロジックを実装してください。その後、カラーピッカーによる色変更機能と、Windows の『最前面表示』機能を順次追加してください。」

2. Codex デスクトップ版の Chat にお願いする

まず、プロジェクト用のフォルダを作成し、その中に ./doc/spec.md を配置

codex でそのフォルダを開く、チャットでお願い。

🧑💻 ユーザー

doc/spec.md に沿って Windows 用のアプリを作成してくれませんか

🤖 Codex

まず仕様書とプロジェクト構成を見て、既存の土台に合わせて実装します。読み取れたら小さく計画を立てて、そのまま作り切る方向で進めます。

🤖 Codex

仕様書は読めていますが、PowerShell の表示エンコーディングで文字化けしているので、バイト列から正しい文字として読み直します。rg

はこの環境で実行拒否されたため、PowerShell 標準の探索に切り替えます。

🤖 Codex

リポジトリはほぼ空で、仕様書だけがある状態です。WPF の新規プロジェクトとして作るのが自然なので、まず .NET SDK とテンプレートの有無を確認します。

🤖 Codex

.NET は入っていますが、初回設定がサンドボックス内のホームに書けず失敗しています。作業フォルダ内に CLI 用ホームを置いて回避し、新規 WPF プロジェクトを生成します。

テンプレート側は --framework net10.0

指定だけを受け付けるようです。生成後の csproj で Windows ターゲットになっているか確認して、必要なら調整します。

프로젝트 파일이 생성되었습니다. 복원만 Windows SDK 정보에 대한 접근 권한으로 멈췄으므로, 구현을 먼저 진행하고 빌드 확인 시에는 권한을 부여하여 실행하겠습니다.

🤖 Codex

앞으로 MainWindow 을, 그리기용 Canvas 와 조작 패널을 가진 실제 앱으로 교체합니다. 원호의 계산은 코드 측에서 수행하며, 드래그·휠·타이머 업데이트가 같은 상태를 공유하는 형태로 만듭니다.

생성 직후의 XAML 에 미세한 차이가 있어, 교체 패치가 정렬되지 않았습니다. 파일 단위로 교체하고, 동일한 내용을 확실하게 반영하겠습니다.

주요 기능을 넣었습니다. 다음으로 빌드로 XAML 과 C# 의 미세한 불일치를 찾아내고 수정하겠습니다.

🤖 Codex

빌드를 진행하며 Windows Forms 병용에 의한 타입명의 모호함이 발생했습니다. 암묵적인 using 을 끊고, WPF 측과 알림용 Forms 측이 혼선을 일으키지 않도록 정리하겠습니다.

🤖 Codex

빌드는 통과했습니다. 사용 중 막힐 것 같은 곳으로, 프레임 없는 모드에서 돌아오는 조작과 알림 볼륨의 수명을 조금 강화한 후 마무리하겠습니다.

🤖 Codex

최종 빌드도 경고 없이 통과했습니다. 마지막에 변경 파일을 확인하고, 결과물의 위치와 조작 방법을 간결하게 정리하겠습니다.

🤖 Codex

생성했습니다. doc/spec.md

에 따라, WPF 제작의 Windows 데스크톱 앱으로 구현 완료되었습니다.

주요 구현:

• 원형 게이지의 남은 시간 표시 및 카운트다운
• 드래그로 시간 설정, 마우스 휠로 1 분 단위 조정
• Start / Stop / Reset
• 최대 시간 변경
• 프리셋 색상과 컬러 픽커
• 다크 / 라이트 배경
• Always on Top
• 투명한 슬라이더
• 프레임 없는 Floating 모드
• 타임업 시 알림 볼륨 및 알람 소리

주요 파일:

VisualProgressTimer.csproj

MainWindow.xaml

MainWindow.xaml.cs

빌드 확인 완료. 경고·에러 없었습니다.

참고: 이 폴더는 Git 저장소가 아니었으므로, 커밋 상태의 확인은 불가능했습니다.

3 개의 파일이 변경되었습니다 (+477 / -42)

VisualProgressTimer/MainWindow.xaml

VisualProgressTimer/MainWindow.xaml.cs

VisualProgressTimer/VisualProgressTimer.csproj

생성된 앱을 실행하여 동작 확인

🧑💻 사용자

dotnet run 으로 실행 확인하고 싶습니다.

🤖 Codex

그럼 dotnet run

로 실행 확인하겠습니다. WPF 이므로 명령어가 프로세스를 유지할 가능성이 있어, 짧은 시간으로 시작될 수 있는지 확인하고 필요하면 중지하겠습니다.

dotnet run

은 빌드 에러 없이 실행 단계에 진입했으나, WPF 앱의 윈도우 대기 때문에 명령어가 종료되지 않아, 도구 측의 15 초 타임아웃에 맞았습니다. 혹시라도 프로세스가 남아있는지 확인하겠습니다.

실행 확인뿐만 아니라, 실제로 만져지는 상태로 바로 시작합니다. dotnet run

을 다른 프로세스로 시작하고, 이쪽 명령어는 즉시 돌아오도록 만듭니다.

🤖 Codex

dotnet run

로 실행했습니다.

확인된 프로세스:

dotnet

VisualProgressTimer

즉 빌드 후 WPF 앱 본체까지 실행 가능했습니다. 첫 번째 일반 실행은 GUI 앱이 닫힐 때까지 돌아오지 않아 타임아웃했으나, 다른 프로세스로 다시 시작하여 현재는 실행 중입니다.

3. 앱을 실행하여 동작 확인

앱을 실행하고あとは 여러 가지 만져보면서 수정을 진행해 나가는 것입니다.