Claude Fable 5でアプリを自律開発する方法

TL;DR

SNS管理アプリは、AIとの壁打ちで要件を固め、実装用とレビュー用のサブエージェントを組み合わせれば、実装とE2Eテストを自律的に進められる。約5〜6時間で15件ほどのチケットが処理され、InstagramとXへの同時投稿、予約投稿、ブランド管理、Cloudflareへのデプロイまで実現した。

Transcript

はい、ということで今回は開発実況という ことで、ま、ちょっと私が今作ってる アプリケーションとかマーケティングをね 、頑張っていきたいと思ってるんですよね 。だから、ま、そのマーケティングする際 に例えばInstagramとか TikTokとかいろんなSNS使わ なきゃいけないので、そのSNSを管理 するためのツール、ウェブサービスをね、 え、作っていこうと思っています。だから せっかくなので今回はそのちょっと開発の 様子をね、この動画で納められたらなと 思っています。開発実況みたいな感じで ちょっと撮っていきたいと思います。で、 ちなみに僕アプリ開発してるんですけど、 ま、ちょっとお見せしちゃおうかなと思う んですけど、私ぬいぐるみ専用のSNSを 作っていて、縫い活用ですね。で、そこで 、... Read More

Key Insights

• ・自律開発の起点は、AIとの壁打ちで運用アカウント、投稿形式、予約機能、技術構成などを具体化し、設計文書と実装可能なチケットへ分割することである。
• ・ハーネスの基本構成は、コードを書く実装用サブエージェントと、成果物を検査するレビュー用サブエージェントを分離し、合格後だけ次工程へ進める形である。
• ・E2Eテストは、AIがブラウザーを起動してメールアドレス入力や認証画面などを実際に操作し、人間の手動確認を減らしながら動作を検証する手段である。
• ・開発されたSNS管理機能は、複数ブランドの切り替え、画像と動画の選択、媒体別キャプション、即時投稿、予約投稿を一つの画面にまとめるものである。
• ・Cloudflare中心の構成は、Workers、D1、R2とWrangler CLIを組み合わせ、データ保存やスキーマ関連作業、デプロイを開発環境から進められる点が利点である。
• ・約5〜6時間の自律実行では、約15件のチケットがバックグラウンドで処理され、InstagramとXへの画像付きテスト投稿が実際に成功する段階まで到達した。
• ・外部ユーザー向け公開の課題は、本番ドメインへのリダイレクトURL変更に加え、InstagramとTikTokで他者のアカウント連携を可能にする審査が必要なことである。
• ・人間に残る重要な役割は、追加要望を採用するか、負債を許容するか、何を販売するかを判断することであり、実装の自動化だけでは代替しにくい意思決定である。

Questions & Answers

Q: AIにアプリ開発を自律的に進めさせる方法は？

最初にAIとの壁打ちで目的、利用者、MVP機能、投稿形式、認証、技術構成を決め、設計ドキュメントと小さなチケットへ分割する。その後、実装用とレビュー用のサブエージェントを作り、レビューとE2Eテストに合格した場合だけ次のチケットへ進むよう指示する。

Q: SNS管理アプリのMVPにはどの機能を含めたのですか？

複数ブランドの管理、Instagram、X、TikTokとの連携、画像スライドと9対16の縦長動画への対応、複数媒体への同時投稿、今すぐ投稿と予約投稿、キャプションの使い回しと媒体別編集を主要機能にした。画像スライドは最大10枚と設定した。

Q: 実装用とレビュー用のサブエージェントは何をするのですか？

実装用サブエージェントは分割されたチケットに沿ってコードを作成し、レビュー用サブエージェントは静的レビューと動的レビューを担当する。さらにブラウザーを立ち上げてE2Eテストを行い、テストに合格したときだけ次の実装へ進むフィードバックループを形成する。

Q: Cloudflareを使った技術構成はどうなっていますか？

フルスタック部分にはNext.jsを使い、デプロイ先をCloudflare Workers、データベースをCloudflare D1、画像や動画のストレージをCloudflare R2とした。Drizzleも導入し、Wrangler CLIを通じてデータベース関連作業やデプロイをClaude Code上で進めている。

Q: AIによるE2Eテストはどのように実行されましたか？

レビュー用サブエージェントがブラウザーを起動し、ログイン画面でメールアドレスを入力するなど、利用者と同じように画面を操作して確認した。各チケットの実装後に一連のテストケースを実行させることで、人間が毎回ブラウザーを触って確認する作業を減らした。

Q: SNSへの同時投稿は実際に成功しましたか？

InstagramとXをアプリへ接続し、画像を選択して比率を調整し、テスト用キャプションを設定したうえで即時投稿を実行した。その結果、XとInstagramの両方で画像付きのテスト投稿を確認できた。TikTokはデプロイ後の接続が必要なため、同じ時点では投稿対象に含めていない。

Q: アプリを一般公開する際に残っている課題は何ですか？

本番環境では、InstagramやXの認証に使うリダイレクト先をローカルホストから本番ドメインへ変更する必要がある。また、InstagramとTikTokで他の利用者が自分のアカウントを連携できるようにするには、それぞれのAPI利用に関する審査へ合格する必要がある。

Q: AI自律開発でも人間が担当すべき判断は何ですか？

人間は、利用者から届いた要望を追加すべきか、機能追加による負債を受け入れるか、どの商品をリリースしてどう収益化するかを判断する必要がある。実装とテストはAIへ任せられても、蓄積した経験や状況に基づく意思決定まで自動化するのは難しいという立場である。

Summary & Key Takeaways

• 開発対象は、複数ブランドのInstagram、X、TikTokをまとめて管理するWebサービスである。画像スライドや縦長動画の同時投稿、即時投稿と予約投稿、共通または媒体別のキャプション編集をMVPに設定し、AIとの壁打ちを通じて要件、設計ドキュメント、実装タスクへ段階的に落とし込んだ。

• 技術構成はNext.jsを中心に、Cloudflare Workersへデプロイし、D1へデータを保存、R2で画像や動画を扱う方針である。認証にはBetter Auth、データベース操作にはDrizzleを採用した。Wrangler CLIを利用することで、環境構築やデータベース関連作業、デプロイまでClaude Code上で進められた。

• 実装用とレビュー用のサブエージェントを設け、静的レビューとブラウザーによるE2Eテストに合格した場合だけ次のチケットへ進む仕組みを構築した。約5〜6時間で15件ほどのチケットが処理され、InstagramとXへの実投稿にも成功した一方、外部公開には本番用リダイレクト設定や媒体側の審査が残った。