Claude Codeで1人開発。画像生成のチカチカ地獄を35回のコミットで脱出した話

※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。

SNS運用を自動化しませんか？

ThreadPostなら、投稿作成・画像生成・スケジュール管理まで全てAIにお任せ。

投稿ボタンを押した瞬間の崩壊

投稿ボタンを押す。画面が激しく点滅し始めた。生成された画像が次々と増殖し、UIが崩壊していく。AIなら一瞬で終わるはずだったペルソナ別画像自動生成機能。35回のコミットを経て、僕は画面のチカチカと戦い続けることになった。

1週間の総決算

今週はペルソナ別の画像自動生成を実装した。投稿が生成されるタイミングで、画像も自動で揃う仕組みだ。結果は35コミット。新機能3件、バグ修正1件。数字だけ見れば順調だ。実際は、動かすまでの泥臭い調整で1週間が溶けた。自動化は動くより、ちゃんと動く状態にするのが本番だ。

ペルソナ別画像自動生成の地獄

最初はシンプルなアイデアだった。ペルソナごとに画像スタイルを持たせる。投稿生成時に画像も自動生成する仕組みだ。「feat: ペルソナ別画像自動生成機能を追加」をコミットした。これでユーザー体験は爆上がりするはずだった。

実際に動かしてみた。画像が表示されるたびにUIがチカチカする。403エラーが出る。画像が重複して生成される。順番がバラバラになる。全部やり直しだ。

しんたろー:
バグ1個直したら別のバグが顔を出す。モグラ叩きだ。UIのチカチカを直すだけで半日消えた。

「fix: 自動生成画像のリアルタイム表示をポーリング方式に変更」

Supabase RealtimeからDBポーリングに変更した。WebSocketは標準装備だが、画像生成のような短時間の大量INSERTと相性が悪い。だから、あえて泥臭いポーリング方式に戻した。3秒間隔でDBに問い合わせる。特定のイベントだけを確実に拾うには、ポーリングの方が冪等性を担保しやすい。

ネットワークが瞬断しても、次のサイクルで正しい状態を取得できる。バグの追跡も、HTTPリクエストのログを追うだけで済む。それでもチカチカは止まらなかった。画像が生成される順番がランダムだったからだ。

「fix: 画像自動生成の順序とUIチカチカを修正」

生成順をUI表示順に固定した。sliceで最新3件を取得し、reverseで表示順に並べ替える。Reactの再レンダリングを制御し、バッチ処理で一気に状態を更新する。これでようやく、画面の点滅は収まった。

429エラーとImagen 4の罠

APIのレート制限（429 Too Many Requests）はAI開発者の宿敵だ。これを回避するため、APIキーを3つ用意してラウンドロビンで回す仕組みを作った。これで429エラーの恐怖から解放されるはずだった。だが、現実は甘くなかった。

Imagen 4が参照画像（Image-to-Image）に対応していなかった。APIの仕様書を隅々まで読んでいなかった僕のミスだ。キーを切り替えても、リクエストのペイロード自体が不正ならエラーになる。400 Bad Requestの嵐だ。

しんたろー:
429エラーを回避しようとして、400エラーを量産した。キーを3つに増やした分、エラーの数も3倍になった。

「fix: 画像生成の最低スコア設定を追加 & Imagen 4参照画像非対応を修正」

モデルごとの機能フラグを導入した。参照画像が使えないモデルでは、機能を無効化する条件分岐を追加した。UI側でも、非対応モデルが選ばれた場合は設定項目を隠すようにした。エラーハンドリングも強化した。429エラー時は次のキーを試行する。全キー失敗時はVertex AIにフォールバックする仕組みを入れた。

ここまで読んだあなたに

今なら無料で全機能をお試しいただけます。設定後は完全放置でプロ品質の投稿を毎日生成。

無料で始める