Google Antigravity + Claude コード 🚀 AIコーディングのヒント（アプリ認証の追加）

1. AIコーディング最適化のためのハイブリッド・ワークフロー戦略の紹介 [0]

1. 問題提起と解決策:

   1. Anti-gravity (Gemini)でレート制限に達したり、Claude Code (Anthropic)でトークンを使い果たしたりする場合、クレジットを節約し使用を延長するためのワークフローがテストされている [0]
   2. このワークフローは、Anti-gravity内でClaude Codeを実行し、トークンを浪費せずにバグを検出するための自動テストエージェントを追加することで実現される [0]

2. ハイブリッド・ワークフローの構成:

   1. 三位一体のエージェント・ワークフローを使用する: 計画、コーディング、テスト [4]
   2. Gemini: OauthシステムとAnti-gravityの計画に使用される [6]
   3. Claude Code: システムの構築に使用される [6]
   4. Test Sprite MCP: テストに使用される [6]
   5. この方法により、ClaudeまたはGeminiのトークンを浪費しないことが目標である [7]

3. 汎用性:

   1. このワークフローは、Cursor、Windsorなど、他のAIコーディングエージェントでも機能することが意図されている [8]

4. 本動画の構成:

   1. Claude CodeをAnti-gravityにインストールおよびセットアップし、GeminiでOauthシステムを計画し、Claudeでコードを実行する方法を示す [10]
   2. Test Spriteを例として使用し、MCPサーバーを設定してエラーをデバッグし、アプリに組み込まれた完全に機能する認証システムをデモンストレーションする [11]

2. Anti-gravityとClaude Codeの連携およびMCPの重要性 [15]

1. Anti-gravityの特性:

   1. Googleの新しいIDEまたはコーディング環境であるAnti-gravityは、サンドボックスで動作するGoogle AI Studioとは異なり、完全なVS Codeフォークである [15]
   2. これにより、側面に拡張機能をインストールするオプションが提供される [17]
   3. この機能を利用して、Anti-gravity内で他のコーディングエージェントを接続できる [18]
   4. Gemini 3 Proなどの使用制限に達した場合でも、Claude Codeのような別の拡張機能を使用してコーディングを続行できる [20]

2. MCP (Model Context Protocol) の役割:

   1. Anti-gravityの右上には、MCPサーバーを管理するための追加オプションがある [22]
   2. サーバーストアには、GitHub、Stripe、Notion、Linear、PayPal、Superbaseなどの異なる機能を追加できるリストがある [23]
   3. 現在、Anti-gravityにはMCPサーバーのリストが限られている [29]
   4. Claudeの作成者であるAnthropicは、LLMのUSBCであるモデルコンテキストプロトコル (MCP)を開発した [30]
   5. MCPの考え方は、異なるモデルが動作し、すべてが標準プロトコルを使用してアプリ、ファイル、ウェブサイトにアクセスできるようにすることである [31]
   6. Anti-gravityは始まったばかりであるため、Claude (Anthropic)はより多くのMCPサーバーとより大きな構成リストを持つことが理にかなっている [32]

3. ハイブリッド戦略の核心:

   1. Claudeを使用してAnti-gravityの使用制限を拡張できる [33]
   2. Google Geminiの大きなコンテキストウィンドウ (大きな作業メモリ) を利用してリサーチと計画を行い、Geminiの使用制限を計画に使い切る [34]
   3. その後、Claude Code拡張機能を使用して実際のコーディングを行う [34]
   4. Claude Codeでは、Anti-gravityでは利用できないが、現在最高のコーディングエージェントであるOpus 4.5を利用できる [35]
   5. さらに、Test Spriteを使用してテストを行い、そのフィードバックをClaude Codeに戻してデバッグすることで、ClaudeとGeminiの両方の使用量を節約し、MCPツールを活用できる [36]

3. 既存のRSSリーダーアプリと認証システム導入の計画 [40]

1. 既存アプリの機能:

   1. 以前のAnti-gravity動画で構築されたのはRSSリーダーである [40]
   2. 異なるRSSフィードに接続でき、ニュース記事や動画がフィードに自動的に表示される [41]
   3. ページを更新すると新しい記事がプルインされ、タグ付きで色付けされる [42]
   4. O Lamaを介してローカルモデルに接続し、自動的にタグを提供することで、トピックごとにフィルタリングできる [44]
   5. その後のアップデートで、未読/既読でフィルタリングする機能と、お気に入りの記事を保存する機能が追加された [45]
   6. ブリーフィングを生成する機能もある [47]

2. 認証システムの必要性:

   1. アプリに認証システム (サインインボタン)を導入することで、異なるプロファイルでのサインインや、他のユーザーとの共有が可能になる [48]
   2. これにより、ユーザーの設定やRSSフィードが保存され、プロトタイプアプリから完全に機能するアプリに変わる [49]

3. 実装計画:

   1. Google Anti-gravity (Gemini 3)を計画に、Claude Codeを実行に使用するハイブリッド方式を採用する [51]
   2. Test Sprite (MCPツール)を使用してテストを行い、すべてが1つの合理化されたワークフローで機能することを確認する [51]

4. Claude Codeのインストールとセットアップ [52]

1. Claude Code拡張機能のインストール:

   1. Anti-gravityの拡張機能オプションで「Claude」を検索し、「Claude code for VS Code」をインストールする [52]
   2. Anti-gravityがVS Codeフォークであることの大きな利点の一つは、これらのツールへの扉が開かれることである [56]
   3. Claude Codeは、APIキーを持ち込むことで、Anti-gravityの制限を使用せずにコーディングできるため、制限を拡張する方法である [58]
   4. インストールは簡単で、パブリッシャーを信頼するだけで完了する [64]

2. ターミナルでのセットアップ:

   1. 拡張機能を使用する前に、ターミナルでClaude Codeをインストールする必要がある (Claude Codeのドキュメントに手順がある) [68]
   2. これは、ターミナルにインストールし、拡張機能を通じてアクセスできるようにするものである [70]

3. サインインとアカウント:

   1. スラッシュコマンドをクリックすると、Claude Codeで使用できるすべてのアクションが表示され、新しいチャットウィンドウが開く [75]
   2. /logをクリックしてサインインする必要があり、これは有料サービスである [78]
   3. Anthropicアカウントへの接続を承認する必要がある [80]
   4. 無料版のClaudeではClaude Codeにアクセスできないが、Proティアでは可能である [87]
   5. 筆者はProアカウントを使用しており、Claude Codeは最も強力なコーディングシステムであると評価している [82]
   6. Gemini 3はコンテキストに優れており、Claude Codeはコーディング能力に優れているため、この組み合わせが計画とコーディングの力を提供する [85]

4. Claude Codeの設定と初期化:

   1. /modelをクリックしてモデルを変更できるが、Opus 4.5が表示されない場合がある (後で確認する) [98]
   2. /mcpをクリックしてMCPを管理し、ターミナルで続行すると、Claude Codeが独自のターミナルインスタンスとして起動する [103]
   3. ターミナルで/initを実行すると、Claude Codeが指示を含むclaude.mdファイルを作成する [106]
   4. /initを実行することで、Claudeはコードベース全体を読み取り、コードベースのコンポーネントがどのように機能するかを説明するドキュメントを作成する [108]
   5. これは、新しい機能を追加する前に、コードベースの基礎的な理解を与えるための優れた第一歩である [109]
   6. ユーザーは、claude.mdへの編集を許可するか、Claudeに別の指示を与えるかを選択できる [111]

5. 使用状況の確認とハイブリッド・ワークフローの動機:

   1. claude.ai/s settings/usageで、週次およびセッションごとの使用状況を確認できる [115]
   2. 追加の使用を切り替えることで、Opus 4.5にアクセスできる可能性があるが、これは使用量をはるかに速く消費する [117]
   3. 筆者はすでに週次制限の24%を使用しており、リセットまで6日残っている [121]
   4. この状況は、Claude Codeだけでなく、Anti-gravityも使用することで、コーディング能力を拡張し、週次制限を使い果たさないようにするハイブリッド・ワークフローの有用性を示している [122]

5. Geminiによる認証システムの計画とロードマップ作成 [123]

1. Geminiでの計画開始:

   1. 新しい会話を開始し、Gemini 3 Proを使用して計画モードで作業する [124]
   2. 計画のフレーズとして、「最新の日付に基づいた最先端のリサーチを使用して、最良のオプションを理解する」ように指示する [135]
   3. Geminiエージェントはウェブを検索し、さまざまな認証システムを検索する [136]
   4. Gemini 3 Proのクレジットを計画フェーズに使い切り、その結果をドキュメントとして作成し、Claude Codeに実行させることで、セッションおよび週次制限の使用量を節約する [139]

2. Geminiによる計画の提案と調整:

   1. Geminiは、Turso、Superbase、Neonのオプションを提案した [145]
   2. NeonとSuperbaseはMCPサーバーとして接続可能だが、Tursoはそうではない [148]
   3. 筆者は、Anti-gravityとの互換性が高いSuperbaseまたはNeonを使用するように要求し、認証システムについてより良い検索を行うように要求した [150]
   4. 最終的に、Better OauthとNeonをデータベースに使用することが決定された [161]

3. ロードマップの作成とGitコミット:

   1. Geminiに、この計画を実行する代わりに、ロードマップファイルを含む新しいドキュメントを作成するように依頼する [166]
   2. これにより、Geminiは計画とリサーチに集中し、Claude Codeはリサーチを行う必要なく構築を開始できる [167]
   3. 認証とデータベースのロードマップが作成され、必要なリサーチがすべて含まれている [170]
   4. 変更を分析し、自動的にコミットメッセージを生成して、Gitコミットを行う [173]

6. Claude Codeによる認証システムの実行とデバッグ [177]

1. Claude Codeによるロードマップの監査:

   1. 計画が完了し、スタックが決定されたので、Claude Codeに移動する [177]
   2. Claude Codeのモードを計画モードから編集前に尋ねるモードに切り替えることが、より強力な実行方法である [181]
   3. Claude Codeに、作成したロードマップドキュメントを参照し (@シンボルを使用)、監査して実装ステップを尋ねる [183]
   4. Claudeはサブタスクを作成し、会話のコンテキストを維持しながら、ロードマップを分析する [186]
   5. Claudeはウェブ検索やリサーチを行う必要はなく、ロードマップを読んで、現在のコードベースとロードマップの間の違いを把握するだけでよい [190]
   6. この分析により、セッションの使用量が4%、週次制限が1%消費された [192]

2. 計画の調整とOpus 4.5の利用可能性:

   1. Claudeは監査を完了し、計画を3.5/5と評価した [194]
   2. 筆者はClaudeの質問に答え、AIに最善の判断を使用するように指示することで、計画の実行方法を教える [199]
   3. この時点で、Claude Codeのモデル選択肢にOpus 4.5が表示されるオプションがあることが確認された [201]

3. MVP計画の実行 (SQLiteの使用):

   1. Claudeは大規模な計画を作成したが、外部データベースを設定する代わりに、デモンストレーションのためにローカルで実行されるSQliteデータベースを使用するMVP計画を採用する [203]
   2. 実際のプロフェッショナルシステムでは、NeonやSuperbaseを使用すべきである [205]
   3. 筆者は、合理化のために自動承認 (auto accept)を選択する [214]
   4. Claudeは、認証システムを生成するために、暗号化ハッシュであるcryptoを追加する必要がある [218]
   5. Claudeは、SQliteシステムのインストールなど、ソフトウェアのインストールとライブラリのダウンロードを含む特定のコマンドを実行するように要求する [219]

4. 並行作業の可能性:

   1. すべてが実行されている間も、Geminiに切り替えて、エージェントマネージャーでUIの更新など、別の要素を実行できる [222]
   2. 目標は、これらのツールの1つだけを使用するのではなく、すべてを接続するハイブリッド・ワークフローを作成することである [227]

5. 認証システムの構築と初期エラー:

   1. Claudeはフェーズ1を完了し、To-Doを追跡している [230]
   2. 各フェーズの後にコミットすることが良い習慣であり、問題が発生した場合に以前のバージョンにロールバックできる [232]
   3. Claudeは、サインインの試行と実際の認証システムとの間で通信するための新しいOauthクライアントとOauthシステムを書き込んだ [235]
   4. Claudeはサインアップフォームを追加している [238]
   5. フェーズ0から4が完了したが、アプリにはサインインボタンが表示されていないというエラーが発生した [241]
   6. Claudeはデバッグを試みたが、このデバッグプロセスだけで、現在のセッションの使用量が6%、週次制限が1%消費された [245]
   7. デバッグはClaudeの使用制限を多く消費するため、テストのためにClaude Codeとは独立して実行できる別のツールを持つことが望ましい [247]

6. サインインボタンの追加とテストの準備:

   1. Claudeがサインインボタンを追加しなかったため、それを追加するように指示する [249]
   2. コミットを追跡することで、Claudeが間違いを犯した場合にロールバックできる [252]
   3. サインインボタンが追加され、クリックするとサインインページに移動する [255]
   4. 筆者は、Claudeを使用してテストするのではなく、別のツールを使用したいと考えている [257]

7. Test Sprite MCPによるテストとデバッグのオフロード [259]

1. Test Spriteの紹介と利点:

   1. Test Spriteは、MCPを通じてClaude Codeに直接接続できる並行エージェントであり、コードベースを理解し、ユーザー認証などの独自のテストを開発する [262]
   2. Test Spriteは、エラーの特定にかかる時間を節約し、Claude Codeの使用量を削減することで、週次および日次セッションの制限を節約する [263]
   3. AIにコーディングをさせ、テストサービスを使用して動作させることで、ClaudeとGeminiの使用量を節約できる [265]

2. Test Spriteのセットアップ:

   1. Test Spriteにサインインしてアカウントを作成する (無料で150クレジット/月、スターターティアは最初の1ヶ月無料) [268]
   2. 筆者は、説明欄のリンクを使用することを推奨している [272]
   3. サインイン後、ダッシュボードでAPIキーを生成する [276]
   4. APIキーを取得したら、インストールコマンドをコピーし、Claude Codeのターミナルで/mcp、manage mcps、continue in terminalの順に実行し、コマンドを貼り付けてEnterを押す [278]
   5. これにより、Test Spriteがポップアップ表示され、7つのツールが利用可能になる [281]
   6. Claude Code拡張機能でリフレッシュすると、MCPステータスでTest Spriteが接続されていることが確認できる [286]

3. Test Spriteを使用した認証テストの実行:

   1. Claude Codeに、Test Spriteを使用して認証テストを実行するように依頼する [290]
   2. 最初のステップは、テストをブートストラップすることである (最初のツール) [292]
   3. これにより、テストを実行するために必要な情報を入力できるローカルホストバージョンのTest Spriteがポップアップ表示される [294]
   4. 筆者は、テストアカウント情報 (test@acample.comとパスワード) を追加し、ポートがlocalhost 3000であることを確認する [299]
   5. 製品仕様ドキュメント (PSD)のドラフトを追加する (アプリの複雑さに応じて時間をかけるべき) [304]
   6. 次のステップは、コードサマリーの生成である [310]
   7. その後、フロントエンドテスト計画の生成に進む [315]
   8. このテストシステムを一度構築すれば、将来的にデータベースを移行するなどの変更があっても、同じテストを再実行できる [318]

4. テストの実行と結果:

   1. Test Spriteは17のテストを生成し、次のツールであるコードの生成と実行に進む [323]
   2. これにより、認証システムが適切に設定されていることを確認するために、すべてのテストを実行するファイルが作成される [325]
   3. ダッシュボードでは、有効なデータでのサインアップ、無効なデータでのサインアップ、正しい/間違ったサインイン、サインアウトなど、17の異なるバリエーションのテストが進行中であることが確認できる [327]
   4. テストを実行するたびに、クレジットが消費される (150クレジット/月、スターターキットで追加400クレジット) [333]
   5. テストの結果、2つのテストが合格し、3つのテストが失敗した (約10クレジット消費) [336]

5. テストレポートの分析とデバッグの指示:

   1. Claudeはテストが完了したことを認識し、レポートを読み取り、テストレポートを生成する [338]
   2. レポートは人間が読めるバージョンで提供され、何がテストされ、どのように失敗したかを正確に理解できる [341]
   3. これにより、Claudeが何が間違っているかを正確に知らずにテストを実行する必要があるデバッグとは異なり、非常に的を絞ったデバッグをClaude Codeに送信できる [342]
   4. 失敗したテストには、Playwrightを使用したブラウザテスターが実行したコードと、視覚化が含まれており、何が間違っているかを理解できる [345]
   5. レポートにより、Better OauthとSQLiteデータベースの接続に問題があり、テストユーザーのアクセスを検証できなかったことが判明した [349]
   6. テストとデバッグの最終ステップは、何が間違っているかを知った上で、Claudeに特定の解決策をターゲットにして修正を実装させることである [350]
   7. Test Spriteを使用する利点は、Claude Codeの使用制限に達した場合でも、読みやすい詳細なドキュメントがあるため、Gemini 3などのAnti-gravityの組み込みAIを使用してシステムを修正できることである [352]

8. 修正の適用と最終テストの成功 [355]

1. Claudeによる修正の適用:

   1. Claudeは、Test Spriteからの出力レポートに基づいて、約5分で問題点を非常に迅速に特定し、修正を実装できた [355]

2. 手動での機能確認:

   1. サインインボタンでテストユーザーを貼り付けてサインインすると、完全に機能し、パスワードマネージャーに保存するオプションが表示される [357]
   2. 間違ったパスワードや間違ったメールアドレスを入力すると、「Invalid password」やサインインできないというメッセージが表示され、認証システムが完全に機能していることが確認された [365]

3. Test Spriteでの再テスト:

   1. 手動で確認した後、問題を解決したことを確認するために、Test Spriteテストを再実行する [371]
   2. 修正とテスト全体で、Claudeの使用量は約10%しか消費されなかった [373]
   3. 再テストでは、フロントエンドテストや実際のテストを再生成する必要はなく、コードの生成と実行のMCPツールに直接ジャンプできる [374]
   4. 同じ5つのテストが再び実行され、さらに10クレジットが消費される [377]

4. テストのオフロードの重要性:

   1. Anti-gravityはブラウザサブエージェントを通じて自律的にテストを実行できるが、それを使用するとGeminiの制限も消費される [383]
   2. このワークフローは、Gemini 3 ProとClaude Sonnet 4.5 Thinkingにアプリの構築を優先させ、Test Spriteにテストをオフロードすることで、多くのクレジットとレート制限を節約する [385]
   3. ブラウザエージェントをテストに使用するほど、Anti-gravityの制限を早く使い果たす傾向がある [388]

5. 最終テスト結果とレポート:

   1. 5つのテストすべてが100%の成功率で合格した [393]
   2. Test Spriteに戻ると、すべてのテストが合格し、さらに10クレジットしか使用されていないことが確認できる [394]
   3. Test Sprite AIレポートには、テストステータスと、機能している具体的な修正が示されている [396]
   4. この完全な分析は、すべての順列を反復して機能することを確認するだけでなく、失敗した場合に何が間違っていたかを説明する [399]
   5. このレポートはドキュメントに記録され、将来的にバックエンドを導入する際などに、何が機能したかの記録として役立つ [400]
   6. 最後に、この機能しているバージョンのスナップショットを取得するためにコミットを行うべきである [405]

9. 結論と今後の展望 [406]

1. 認証MVPの完了:

   1. 認証MVPが完了し、他のユーザーがサインインしてアプリをテストできるように、より大きくより良いデータベースを確立し、カスタムURLにアプリをデプロイするオプションが確立された [406]

2. 今後の可能性:

   1. アプリのデプロイ、バックエンドデータベースの設定、認証システムへの接続など、追加の機能に関する動画のアイデアをコメントで募集している [409]
   2. Claude Codeには、サブエージェントの構成、プラグインの追加、特定のスキルの導入など、まだ触れていない多くの機能がある [411]
   3. claude.mdドキュメントで、Claudeがこの特定のアプリケーションのアーキテクチャ内でどのように動作するかを変更するシステム指示を与えることができる [415]

3. ワークフローの要約:

   1. このセッションでは、セッション制限に達することなく、週次使用量の一部を節約できた [417]
   2. Geminiで計画し、Claude Codeでコーディングし、Test Spriteでテストするというワークフローが確立された [421]
   3. 各ツールが最も得意なことに焦点を当てることで、すべてのツールで使用量を節約できる [422]

4. Test Spriteの推奨:

   1. Test Spriteを試すためのリンクが提供されており、サインアップすると150クレジット/月が無料で提供され、最初の1ヶ月は拡張スタータープランも利用できる [423]
   2. Test Spriteは、より強力なコーディングエージェントの使用を拡張しながら、テストをオフロードすることでワークフローを最適化するのに役立つ [425]