はじめに
Google Antigravity IDEは、Googleが提供する新しいAI統合開発環境です。公式ドキュメントを読んで、実際にしっかり使ってみました。今回は実際にWebサイトを作りながら開発フローを体験し、その過程で見えてきた便利な機能や重要な設定について紹介します。
1. 会話モードの使い分け
Antigravityには2つの会話モードがあり、用途に応じて使い分けます。
Plan
エージェントがタスクに取りかかる前に作業計画を立てます。詳細な調査や複雑な作業に適しており、コードを作成する際は基本的にこちらを選択するのが良さそうです。
Fast
エージェントがタスクをすぐ実行します。変数名の変更や簡単なbashコマンドなど、単純作業でスピード優先、品質低下も許容できる場合に使用します。
2. 開発フロー: 焼き肉部位確認サイトを作ってみた
焼き肉を食べるとき、どこの部位か分からないことが多いので、その説明をしてくれるWebサイトを作成してみました。実際の開発フローを通して、Antigravityの使い方を見ていきます。
2-1. 初回プロンプト
まずはプロンプトを入力します。今回はシンプルにこんな感じで依頼しました。
焼き肉の部位の名前が視覚的にわかるWebサイトを作成したい
2-2. Implementation Plan(計画書)のレビュー
プロンプトを入力するとImplementation Planが自動作成されます。「こんな感じで実装しますがいいですか」という計画書のようなものです。
この計画書に不満があれば、各行にコメントを付けます。
操作方法は以下の通りです。
- 各行のコメントボタンを押してコメントを入力
- 右上のReviewボタンで計画を再修正
- Proceedボタンで計画を実行
コメントがある状態でもProceedは可能です。おそらく計画の修正はしないものの、意図は汲み取って実行するという動きになります。
今回は計画書が英語で生成されたので、日本語にしてもらうようにコメントし、無事日本語になりました。
図1: 計画書へのコメント入力画面
2-3. 計画実行結果
Proceedをクリック後、計画が完了するとWalkthroughが自動生成されます。
これは報告書のようなもので、プロジェクトの概要、機能、技術スタックなどが記載されています。
図2: 自動生成されたWalkthrough
そして今回作成されたWebサイトがこちら。あんまり牛っぽくないです...。
図3: 作成されたWebサイト
2-4. Walkthrough(報告書)のレビュー
実装の修正をしてほしいのでWalkthrough(報告書)にコメントします。
報告書のコメントではなくチャット画面で指示することも可能なのですが、個人的にこのコメント機能が便利だったので使用しています。チャット画面だと、AIの発言を>で引用していちいち指摘する必要がありますが、コメント機能ではUIでポチポチと的確な場所に指摘できるので非常に楽です。
図4: Walkthroughへのコメント機能
リアルな写真も添えてほしい
Antigravityはnano bananaも搭載されているので、画像生成をしてUIやWebサイトに組み込むことができ非常に強力です。
図5: 生成中の画像
2-5. 修正結果
修正結果が返ってきました。だいぶ牛に近づきました。
画像も文字に対してだいぶ大きいですが、いい感じの写真が使われています。
図6: 修正後のWebサイト(上部)
スクショに入りきらなかったのですが、上下で1つの画面です。牛の部位を選択すると、牛の下のほうに以下の画面が出てきます。
図7: 修正後のWebサイト(下部)
基本的な流れは以上です。
修正が必要な場合は、再度Walkthroughへコメントしたりチャットしたりしてブラッシュアップして開発を進めていきます。
3. 知っておくべき機能と設定
開発フローでは紹介しきれなかった、実用上重要な機能や設定について補足します。
3-1. スクリーンショットと画面録画機能
「スクショ、画面録画を作成して」と指示することで、ブラウザのスクリーンショットや画面録画を取得してくれる機能があります。これらのスクリーンショットや録画はWalkthroughに表示され、レビューも可能です。
注目の機能として紹介されているのを見かけますが、ただ画面の状態を取ってくるだけでUIに問題があれば自動で修正するという挙動をしてくれるわけではないので、個人的には微妙と感じています。エディタ内でブラウザ操作ができるわけでもありません。結局、UIが問題ないかは自分でブラウザを開いて確認することになります。
ただ、そのスクショを使って画面領域を指定してレビューできるので、この点だけは便利かもしれません。
図8: 画面領域を指定したレビュー
この機能を利用するにはブラウザ拡張機能の追加が必要です。
エディタ右上のChromeマークをクリックすることでブラウザに遷移し、拡張機能を追加できます。
図9: ブラウザ拡張機能の追加
3-2. MCP接続
以下でMCP(Model Context Protocol)の接続設定を行うことができます。
チャット画面の [...] ボタン -> MCP Servers
より詳しくは公式ドキュメントをご参照ください。
図10: MCP接続設定
3-3. エージェントモード
エディタモード(いつものVSCodeの画面)とは別にエージェントモードがあります。
Ctrl + E(またはエディタ右上の「Open Agent Manager」)でエージェントモードを開くことができます。
このモードでは、コードの編集がメインのエディタモードとは違い、AIエージェントとの対話がメインになります。
図11: エージェントモードの画面
エディタモードとの主な違いは以下です。
左サイドバー
ファイル一覧ではなく、WorkspacesとPlaygroundが表示されます。
- Workspaces: Antigravityのリポジトリが表示されており、リポジトリをまたいで作業が可能です。複数リポジトリを並列で作業する場合に、Antigravityのウィンドウを複数開かなくてもこの画面だけで完結することができます。
- Playground: 今の作業中のリポジトリとは関係なくAIと会話できます。軽く確認したい場合や質問する際に、メインのプロセスを汚さずに対話できる機能です。いちいちChatGPTやClaudeにアプリを切り替える必要がありません。
図12: 左サイドバーの表示
右サイドバー
Implementation Plan(計画書)、現在のタスク状況、Walkthrough(報告書)、スクリーンショット、画面録画、ファイル変更差分などを確認できます。
図13: 右サイドバーの表示
エディタモードとエージェントモード、好みのほうを使うとよいと思います。
3-4. エージェントの設定
Ctrl + EでAgent Managerを開き、右上のsettingsから各種設定ができます。
図14: エージェント設定画面
ⅰ. レビューポリシー
ドキュメント作成時のレビュー要否設定です。
勝手に進められるのは困る(経験則的にあまりうまくいかない)ので、私はRequest Reviewにしています。
図15: レビューポリシー設定
- Always Proceed: レビュー依頼は来ない
- Agent Decides: エージェントが状況に応じてレビュー依頼をするか自動判断
- Request Review: 必ず毎回レビュー依頼が来る
ⅱ. ターミナルコマンド実行
Terminal Command Auto Execution
ターミナルコマンドを実行する際の許可設定です。
セキュリティの観点から、offにして許可リストに問題ないコマンドを追加していくのがよさそうです。
図16: ターミナルコマンド実行設定
- off: 自動実行しない(設定可能な許可リストにあるコマンドを除く)
- auto: 特定のコマンドを自動実行するかどうかをAIが判断
- Turbo: 常に自動実行(設定可能な拒否リストにあるコマンドを除く)
ⅲ. ファイルアクセス
エージェントのファイルアクセス設定です。
真ん中のAgent Non-Workspace File Accessが重要で、ワークスペース以外のファイルにもアクセスできるようにするオプションがあります。
これは思わぬ情報流出や事故につながるのでオフがいいでしょう。
Agent Gitignore Accessはgitignoreに記載されているファイルを触ってよいか、Auto-Open Edited Filesは編集したファイルをバックグラウンドで開いてよいかで、これらはお好みでよいかと思います。
図17: ファイルアクセス設定
まとめ
nano banana搭載しているのがすごくいいですね。
あれやってみようかな、これもできるかなとアイデアが次から次へと湧いて楽しいです。
無料でここまで使えるのは今だけかもしれないので、興味がわいた方は今のうちにぜひお試しください。
参考