Day2:エラーもコピペで解決。AIを相棒に「売れるレベル」のUIと機能を実装する【文系バイブコーディング実録②】

ダサいUIは許せない。目指すは「モダンな黒パネル」

「もしかして売れるんじゃないだろうか？？」 翌日、そんなことを考えながら冷静になって画面を見てみました。

昨日は「まあまあ」のものはできていましたが、タスクトレイに常駐しているだけでUIらしきものはありませんでした。「これではさすがに売れないな」「確かNano Bananaが強化されたよな」などといろいろ考えるうち、「コントロールセンターのような、モダンかつ直感的で洗練されたダークなUIを目指してみよう」と思い立ちました。

非エンジニアだからこそ、技術的な難易度を完全に無視して、理想のビジュアルだけをAIに投げ込みました。（※意外にも、この発想がバイブコーディングには合っているようです）

CustomTkinterとの出会いと泥沼

AIが提案してきたのは「CustomTkinter」というライブラリ。これを使うと、モダンなダークモード対応のUIが作れるようです。 しかし、ここからが本当の戦いでした。

なぜかコードを書き換えると、今まで動いていた機能が動かなくなるのです。何度か、画面が真っ白になることもなりました。 AIの説明によると「Right Click Menu」を作ろうとして、既存のタスクトレイ機能と干渉し、アプリが終了できなくなる「ゾンビ化現象」も起きていたようです。

AIとの「ペアプロ」という新体験

ただ、AIは強かった。「AttributeError って出た」と投げると、数秒で「ああ、その変数はクラス内で定義されていないですね。修正します」と一瞬で答えを出してきます。

エラーが出たら、赤い文字をそのままコピペしてAIに投げ、修正。またエラーが出て、キャプチャして投げ込んで、修正…

時にはAIも間違えるのが意外でした。修正コードでも動かないことはたびたび。 まだ完成していないアプリを使って「まだ直ってませんが」「そもそも音声認識モデル名違くない？」と音声で状況を説明しました。

時にAIは「申し訳ありません、アプローチを変えましょう」と別案を出してくることもありました。 仕事が恐ろしく速いエンジニアが隣に座って、一緒に開発しているような感覚。「ペアプログラミング」とはこのことか、と実感しました。

そうこうしているうちに、エラーは出なくなり、いったんアプリは完成しました。ここまで2日間、計約5時間程度。設定ウィンドウも、目に優しい？ダークなカラーになりました。

音声認識にはOpenAIの「Whisper」、整形には「GPT‐4o」などのモデルをAPIで使う仕組みにし、体感で95％程度は正しく出力されるようになりました。

機能満載で「リリース」

さらに、修正のついでにAIに追加オーダーを出しまくった結果、この時点ですでに

• 音声入力したテキストが、自分が設定したプロンプトに沿った形で出力される「出力モード機能」

• すべての出力を「関西弁にする」「日英併記する」などの設定ができる「パーソナルプロンプト機能」

• 出力するテキストを突然メールで送りたくなった時、自動でメールにしてくれる「自動メール送信機能」

• 特によく使う言葉を登録しておいてAIに優先的に変換してもらう「カスタム辞書機能」

• 使用するAIのモデルを指定し、出力の精度を高めたり、API使用料を抑えたりできる「AIモデル選択機能」

• 出力した履歴を保存し、設定ウィンドウで確認できる「履歴保存機能」

などが実装され、実用可能なレベルになっていました（本当に必要なのかという機能も含まれていますが…）

「これは売れるっしょ」。野望は、より現実味を増したのでした。