CodexでWindowsデスクトップアプリ「ウミたん」を作りました―“コードを読まない・書かない”開発に挑戦―

「今月も勤務表を出し忘れた！！」

毎月決まった時期に提出しなければならないのに、きれいに頭から抜け落ちているんです。毎月総務の子から「すみません、勤務表がまだのようで…」とチャットをいただくたびに、本当に申し訳ない気持ちになります。

カレンダーに予定を入れても通知を見逃すので、もっと自然に、何度も声をかけてくれる存在が欲しいと考えました。なんかこう、昔けっこう流行った、デスクトップに常駐するような感じのさ……。

ちょうど同じタイミングで、OpenAIのコーディングエージェント「Codex」もちゃんと使ってみたいと考えていた私。それならCodexを使って、勤務表の提出を知らせるデスクトップアプリを作ってみよう！と考えました。

今回は、実際の制作過程や苦労したポイント、AIコーディングを通して感じた「これからのエンジニアに必要な力」を紹介します。

自作デスクトップアプリ「ウミたん」とは

「ウミたん」は、デスクトップの端を自由に動き回るウミウシの常駐アプリです。モチーフは、我が家にいるぬいぐるみ。C#とWPFを使ったWindows向けアプリで、実装はCodexにすべて任せました。

画面の下辺だけでなく、左右の壁や上辺にも沿って移動します。壁では体の向きを90度回転し、上辺では上下反転するため、本当にデスクトップの周囲を這っているように見えるのが特徴です。

見た目のかわいさだけでなく、勤務表の提出時期を知らせるリマインダーや、AI関連ニュースを表示する機能も搭載しました。さらに、ときどき何気ない言葉をつぶやき、仕事中の私を見守ってくれます。

機能①勤務表提出時期を教えてくれる

ウミたんは、毎月18～19日になると「そろそろシフトを出す時期だよ～」、20～25日には「20日はシフトの提出期限だよ、もう出した～？」と話す機能を持たせてました。エンジニアの仕事では毎月20日に勤務表（シフト）を提出するルールなので、毎月ウミたんがリマインドしてくれます。

このほか、毎月10日にはエンジニア業の給料日、月末にはライター業の請求書の提出も知らせてくれます。日付に応じてメッセージを切り替えることで、毎月発生する予定を自然に思い出せる仕組みにしました。

機能②クリックするとAI関連ニュースを教えてくれる

ウミたんをクリックすると移動を止め、吹き出しでAIやIT関連のニュースを表示します。ニュースのタイトルと概要を確認でき、気になる記事があればリンクから元のページを開ける仕組みです。

私は普段からAI関連の情報を追っていますが、毎日複数のニュースサイトを巡回するのは意外と手間がかかります。ウミたんがランダムに記事を選んでくれれば、自分では探さなかったニュースにも偶然出会えると考えました。

もう一度クリックすると吹き出しが閉じ、ウミたんはデスクトップの移動を再開します。効率だけを重視した情報収集ではなく、キャラクターとの触れ合いのなかで新しい情報に出会える機能です。

現状では日本語サイトのニュースのみを対象としていますが、将来的には英語サイトを参照し、AIで翻訳して表示する、というところまで実装したいと思っています。

機能③何もないときも、ときどき話しかけてくれる

ニュースやリマインダーを表示する必要がないときも、ウミたんは一定の間隔で動きを止め、ランダムなメッセージをつぶやきます。吹き出しが自動で閉じると、再びデスクトップの周囲を動き始める仕組みです。

メッセージの一例は次のとおり。全部で100種類程度、ChatGPTに出してもらいました。

実用的な通知ではありませんが、デスクトップを這っていたウミたんがふと立ち止まって話しかけてくれると、少し気持ちがほっこりするのがとてもいいです。

なぜ「ウミたん」を作ろうと思ったか

仕事やプライベートで忙しい中でしたが、ウミたんを作ろうと思い立ったきっかけとなったのは勤務表でした。ここでは、私が自作アプリを作ろうと思ったきっかけを振り返ります。

勤務表提出のリマインド機能が欲しかった

私はエンジニアとして時間給で働いています。会社では毎月20日までに翌月の勤務表を提出しなければなりませんが、毎月つい提出をつい忘れてしまい、総務の方からチャットをいただくのが申し訳なく感じていました。

忘れないようにカレンダーへ登録しても、通知を確認した時点で提出できなければ、そのまま頭から抜け落ちがちです。決まった時刻に一度だけ届く通知ではなく、提出時期になったらデスクトップ上で何度か声をかけてくれる仕組みが欲しいと考えました。

Codexをガッツリ使ってみたかった

少し前から、OpenAIのコーディングエージェント「Codex」がとても使いやすいというのが気になっていました。

私は普段PHPエンジニアとして働いていますが、これまでCodexを使って一つのアプリを完成させた経験はありませんでした。AIがコードの提案をするだけでなく、複数のファイルを確認し、必要な箇所を修正し、ビルドやエラー対応まで進めてくれる点に興味を持っていました。

そこで今回は、自分でコードを書かず、生成されたコードも原則として読まないというルールを設定。実装はCodexへ任せ、私は要件の整理と動作確認、修正指示に集中することにしました。

使い慣れたPHPでは、分からない部分があっても自分でコードを直せてしまいます。あえて経験の少ないC#とWPFを選ぶことで、Codexがどこまで開発を進められるのか、純粋に試せると考えました。

好きなキャラクターで癒されたかった

リマインドが目的なら、文字だけの通知アプリでも役割は果たせます。それでもデスクトップキャラクターにしたのは、仕事中に眺めて癒やされる存在が欲しかったからです。

私はウミウシが好きで、ぬいぐるみにも「ウミ」「ウミミ」「うみゅー」などと名付け、夜は抱きしめて寝ています（よく踏みつけているけど）。そんな愛すべきウミウシを常駐させたい！と考え、デスクトップアプリ「ウミたん」を開発することに決めました。

仕事で長時間パソコンへ向かっていると、画面には業務ツールや原稿ばかりが並びます。その端をウミたんがのんびり動き、ときどき立ち止まって話しかけてくれれば、作業中の気分も少し和らぐはず。

実際、実装途中にウミたんがデスクトップ上を移動しているだけで非常に可愛く、癒されました。まあ間違ってクリックすることもあって「邪魔！」って思ったこともあるけど！それもまたよし！便利なだけでなく、使うたびに愛着が湧くアプリを作れたのは、自作ならではの楽しさでした。

どうやって作る？まずはChatGPTに相談

ウミたんを作ろうと決めたものの、最初は何から始めればよいのか分かりません。そもそもデスクトップキャラクターの開発経験なんてないし、CodexはVSCode内でしか使ったことないし。

そこで、まずはChatGPTに「デスクトップにキャラクターを常駐させるアプリを作りたい」「せっかくなのでCodexを使いたい」という、かなり雑なオーダーを投げてみました。いつもごめんよ。

ChatGPTからは、主に次の三つの方法を提案されました。

• C#＋WPF：Windows向けデスクトップアプリの定番構成。透明なウィンドウや常駐アプリを作りやすい
• JavaScript＋Electron：Web開発の知識を生かせる一方、簡単な常駐アプリとしては動作が重くなりやすい
• Python＋PySide：比較的少ないコードで作れるものの、アプリとして配布する際に少し工夫が必要

今回はWindowsでの利用を前提としており、透明な背景や常に最前面へ表示する処理とも相性がよいことから、C#とWPFを選びました。

さらにChatGPTからは、最初から多くの機能を盛り込まず、次のような最小構成から始める流れも提案してもらいました。

• 背景が透明なウィンドウを作る
• ウィンドウの枠を非表示にする
• ウミウシの画像を最前面に表示する
• マウスでドラッグして移動できるようにする
• 後から機能を追加しやすい構成にする

「うん、それでいいじゃん」ということで、続いてCodexのデスクトップアプリをインストールし、ChatGPTが整理した要件をCodexへ渡して開発を進めることにしました。

ChatGPT×Codexでエージェント開発に挑戦！

ウミたんの開発では、ChatGPTとCodexを役割分担して使いました。ChatGPTと相談しながら要件や指示内容を整理し、実際のファイル作成やコードの修正はCodexへ任せる流れです。言うなれば、私は指示役、ChatGPTがエンジニアで、Codexがプログラマという分担ですね。

また、今回は「自分ではコードを一行も書かない・読まない」というルールを設定しました。コードを直接編集せず、自然言語による指示と動作確認だけで、どこまでアプリを作れるのか試しています。

ChatGPTに自然言語で作りたいことを聞く

最初に、実現したい機能や動きをChatGPTへ自然言語で伝えます。

たとえば、「ウミウシの画像をデスクトップに常駐させたい」「画面の端を自動で移動させたい」といった内容です。この段階では、実装方法や必要なファイルを自分で考える必要はありません。

ChatGPTとの会話を通して、曖昧なアイデアを具体的な要件へ整理しました。そのうえで、Codexへ渡すためのプロンプトを作ってもらいます。

ChatGPTが出力したプロンプトをCodexに貼る

続いて、ChatGPTが作成したプロンプトをCodexへ貼り付けます。

Codexはプロジェクト内のファイルを確認し、要件に応じてコードの追加や修正を進めてくれます。必要に応じてビルドも実行し、エラーが発生した場合は、その原因を調べながら修正します。

私はCodexが生成したコードを読まず、作業内容とビルド結果だけを確認しました。実装が完了したらアプリを起動し、指示した機能が動くかを試します。

動作を確認しつつCodexで微調整

アプリが起動したら、画面上の表示や操作を確認します。イメージと異なる部分があれば、「画像をもう少し小さくしたい」「移動速度を遅くしたい」など、Codexへ自然言語で修正を依頼しました。

細かな変更であれば、そのままCodexとのやり取りだけで調整できます。修正後は再びアプリを起動し、期待した動きになったか確かめます。

このように、指示、実装、動作確認、微調整を繰り返しながら、少しずつ機能を追加していきました。

微調整で直らないときはChatGPTに再度聞いてプロンプトを出力

Codexへ何度か指示しても意図が伝わらない場合や、どのように説明すればよいか分からないときは、再びChatGPTへ相談しました。

その際は、実現したい動きに加えて、現在どのように表示されているのか、期待する結果と何が違うのかを伝えます。必要に応じてスクリーンショットも添付し、状況を整理してもらいました。

ChatGPTが問題点を言語化し、修正用のプロンプトを作成したら、再びCodexへ貼り付けます。この流れを繰り返すことで、私自身はコードに触れず、自然言語による指示だけでウミたんを完成形へ近づけていきました。

AI完全ノーコード開発を通して考えたこと

今回の開発では、自分でコードを一行も書かず、生成されたコードも読まないという“縛り”で開発をしてみました。それでも、決して「AIに任せたら勝手にアプリが完成した」という感覚はありません。コードを書く役割はAIへ移っても、開発を完成まで導くための判断は人間に残るのだと実感しました。

微調整する際の指示を伝えるのがものすごく難しい！

開発でもっとも苦労したのは、細かな動きや表示位置を言葉で伝えることです。特に難しかったのが、ウミたんの移動方向と吹き出しの位置でした。

最初は画面の下辺を左右に移動するだけでしたが、その後、左右の壁や上辺も這うように機能を追加。ところが、壁を登るときに進行方向と体の向きが逆になったり、上辺で上下反転させると不自然な方向を向いたりと、なかなか期待どおりに動きません。

吹き出しも、ウミたんの向きや表示場所によって位置がずれました。中央では自然に見えても、画面の端では一部がはみ出すなど、動かして初めて分かる問題が次々と出てきます。

「もう少し外向きに」「壁に沿っているように」とCodexへ伝えても、私の考える方向とCodexが解釈する方向がなかなか一致しません。らちが明かないと思ったので、スクリーンショットをChatGPTへ見せ、現在の状態と理想の動きを説明して、Codex用のプロンプトへ変換してもらいました。

ChatGPTが作ってくれたプロンプトには、回転角度や座標、画像の中心位置、反転の基準など、人間がすぐには思いつかないような細かな指示が並んでいました。ぶっちゃけ「こんなの自分で指示するの絶対無理！」と思いました。

たとえばこれ↓は、画面に表示されていたデバッグを消してほしいという依頼のプロンプト。

自動つぶやき機能は期待どおり動作しています。

ただし、吹き出しを表示したときに、ウミたんの画像上へ
小さなオレンジ色の点が表示されています。

これは以前、吹き出し位置を調査するために追加した
座標基準点のデバッグ表示だと思われます。

まずコードを確認し、オレンジ色の点を生成・表示している処理を
特定してください。

次のような一時的なデバッグ要素がないか確認してください。

・EllipseやBorderで作成した座標マーカー
・Canvasへ追加している基準点
・visibleCenterDirectScreenを示す点
・吹き出し中央やウミたん中央を示す赤・青・オレンジ色の点
・デバッグ用Overlay
・DEBUG_POPUP_POSITIONなどのフラグ

修正内容：
・画面上に表示されるデバッグ用の点や線だけを削除する
・ほかにも座標確認用のマーカーが残っていれば、すべて非表示にする
・popup-debug.logへのログ出力は今回は残してよい
・デバッグ要素を追加する処理や呼び出しも、不要であれば削除する

変更してはいけないもの：
・完成済みの四辺ごとの吹き出し位置計算
・クリックニュース機能
・自動つぶやき機能
・停止と移動再開の処理
・回転、反転、移動処理
・ニュース取得処理

今回は見えているデバッグマーカーの削除だけを行ってください。
修正後にビルドし、吹き出し表示中もオレンジ色の点が
表示されないことを確認してください。

AIからAIへ指示を出す言い回しが独特だと感じたのは、100種類ほど用意したメッセージをランダムに表示する機能を実装したとき。私なら単純に「ランダムで表示して」と伝えるところですが、ChatGPTが作成した指示では「メッセージを抽選する」という表現が使われていました。「なるほど、抽選なのか」と、少し感心したよね。。。

人間にはやや違和感があっても、機械には正確に伝わりやすい言葉があるのでしょう。探してみれば、ほかにもいろいろ見つかりそうです。

人間がChatGPTへイメージを伝え、ChatGPTが技術的な指示へ変換し、Codexがコードを実装する。AI同士で開発が進むなか、人間は完成したものを見て「合っている」「違う」と判断する役割へ移りつつあるのだと感じた瞬間でした。

やっていることはちゃんとエンジニアリング

ChatGPTにもCodexにも自然言語でしか話しかけていませんでしたが、実際に行っていた作業は、かなりエンジニアリングに近いものだと感じました。

不具合が発生したときは、どの操作の後に起きたのか、毎回発生するのか、どこまでは正常に動いているのかを確認。その情報をCodexへ伝え、修正後に再び動作を検証しました。

想定どおりに動かない場合は、ChatGPTに相談して、デバッグログを出力するための指示を作ってもらいます。そのプロンプトをCodexへ渡してログを出力し、結果を再びChatGPTへ報告。ChatGPTがログを解析して原因を特定し、修正用のプロンプトを作成したら、私がCodexへ渡して直してもらう、という流れです。

コード上の問題箇所を探して修正するのはCodexですが、現象を観察し、不具合が起きる条件を見つけ、期待する動作を定義するのは、やっぱりまだ人間にしかできないことですよね。これからのエンジニアには、原因を追跡できるログを適切に出力させ、その経過を監視する役割が、より重要になるのかもしれません。

コーディングをAIへ任せても、要件整理やテスト、デバッグ、品質確認がなくなるわけではありません。むしろ実装の速度が上がる分、人間には短時間で問題を見つけ、適切な修正方針を判断する力が求められると感じました。

必要なのは「何を作るか」を分解する力

AIへ指示を出すときに大事なのは、「何を作りたいか」を具体的な処理へ分解することです。

たとえば、「ウミたんをデスクトップの周囲で動かしたい」という要望だけでは、実装に必要な情報が足りません。実際には、次のような動作に分ける必要があります。

• 現在いる画面の辺に沿って移動する
• 角へ到達したら次の辺へ進む
• 進行方向に応じて画像を左右反転する
• 壁では画像を90度回転する
• 上辺では上下反転する
• クリックされたら移動を止める
• 吹き出しを閉じたら移動を再開する

大きな要望を小さな処理へ切り分けると、AIへ具体的な指示を出しやすくなります。問題が起きた際も、どの処理まで正常で、どこから期待と異なるのかを確認できます。

プログラミング言語の文法やフレームワークの細かな知識は、AIが補ってくれるようになりました。しかし、目的を整理して実装可能な単位へ分解する力は、引き続き人間に必要です。

AIコーディング時代のエンジニアには、コードを速く書く力だけでなく、作りたいものを正しく定義し、AIへ渡せる形に整理する力が、これまで以上に重要になると感じました。

GitHubへの公開準備、見た目を整えるところまでCodexがやってくれた！

アプリが完成したあと、記事からソースコードを見てもらえるよう、GitHubへの公開準備もCodexにお願いしてみました。たまにXでエージェントが「データ消しちゃったテヘペロ！」とかやったのとか見ると怖いけど、今回は別に個人プロジェクトなので消えても屁でもないし！と思って。

いや便利ですね。.gitignoreの作成や不要ファイルの除外、READMEの整理、コミット、リモートリポジトリの設定、pushまで、ほぼすべて自動で進めてくれました。

途中では、配布用に作成したexeの容量が大きく、pushが一度で完了しない場面もあったようです。しかしCodexはそこで止まらず、原因を確認しながら処理をやり直し、最終的にはソースコードだけを整理してGitHubへ登録してくれました。

Gitへの登録は、実装そのものよりも細かな確認やコマンド操作が多く、個人的には毎回少し面倒に感じていた作業です。そこまでエージェントがまとめて対応してくれたことで、AIコーディングは単にコードを書くためのものではなく、開発工程全体を支援するものなのだと実感しました。

またCodexは最後に、ウミたんの画像をもとにアプリアイコンを作成すること、常駐アプリらしく使えるようにタスクトレイへ最小化する案も提案してくれました。思いつかなかったけどぜひ！という感じで、そのまま実装してもらいました。

単に指示した機能を作るだけでなく、「このアプリならこうしたほうが自然」という改善案まで出してくれるのは、AIエージェントらしい面白さですね。

まとめ：AIコーディング時代はエンジニアの仕事が上流へ移る

ウミたんの開発を通じて、AIコーディングによってエンジニアの役割が明確に変わりつつあると実感しました。

今回、自分でコードを一行も書かず、生成されたコードも読まずに進めました。コードの生成や修正はCodexが担当し、ChatGPTが人間の曖昧な要望を技術的な指示へ変換するとなると、人間に残るのは、「何を作るのか」「期待どおりに動いているか」「次に何を直すべきか」を判断する役割です。

これまでエンジニアが担ってきた仕事のうち、実際にコードを書く工程は、今後さらにAIへ移っていくでしょう。一方、要件整理や設計、処理の分解、テスト、デバッグ、品質確認といった上流の仕事は、より重要になると考えられます。

AIコーディング時代は、プログラミング言語の文法を知っているだけではなく、実現したいことを具体的に定義し、AIへ正確に伝え、出力結果の良し悪しを判断する力が求められるのだと感じました。

勤務表の提出忘れを防ぐために作った小さなデスクトップアプリ「ウミたん」ですが、現状はまだ発展途上。これからさらなる使いやすさと可愛さを追求して、バージョンアップしていきたいと思います！