Antigravityを実際に操作してみよう

「AI部下」と始める新しい仕事術 ～仕事の単位は作業から承認へ～【CDLE AIプログラミング主催】勉強会資料

Transcript

1. CDLE AIプログラミング勉強会 Antigravityを実際に操作してみよう 2026.2.17 CDLE AIプログラミング サポーター CDLE 名古屋 サポーター CDLE ロボットAI 運営 　　　Y.Miyado
2. 自己紹介 G検定2020#1 毎日X（旧Twitter）でAI最新情報収集するのが日課です。 最近はAIエージェントやロボットAIに関心があります。 会社では物理シミュレーション AI関連の業務をしてます。 → 人工知能学会誌 Vol.38 No.3 (2023年5月号)の特集「AIとシ ミュレーション」 に寄稿してま す。 CDLE (Web, Slack) ビジネス関連のご連絡はこちら
3. Antigravityを起動する 事前に案内したセットアップが完了していれば、こんな画面になっていると思います。 エディタ画面はVisual Studio Code（VSCode）とだいたい同じです。 エディタ画面 Agent Manager画面
4. 設定確認 Antigravityにあまり慣れていない人は Strict Modeにしましょう。 ブラウザツールは安全上の理由から今回は OFFにしておきます。
5. Agent Manager Agent ManagerはAIエージェントを管理するための画面です。ここからいろんな指示を AIに投げて作業してもら います。 今日はやりませんが、実際には AIエージェントを複数並列で走らせることができます。 AIとやり取りした内容が表 示されます
6. フォルダを開く [Open local folder]をクリックして適当なフォルダを選択します。このフォルダが AntigravityのWorkspaceになり ます。 もし「作成者を信頼しますか？」と聞かれたら、 [フォルダーを信頼して続行 ]をクリックします。 Agent Manager画面 エディタ画面でも同じように操作できます
7. AIと会話する前の準備 Planningモードになっているのを確認してください。このモードでは AIがまず計画を作成して提示してくれます。 AIモデルのデフォルトはGemini 3 Pro (High)ですが、好みに応じて変更できます。 AIモデルは使用量に応じて制限がかかります。 Google AI Pro/Ultraプランでは制限が緩和されます。
8. AIにやってもらいたいことを記述する AIにやってもらいたいことを記述します。詳細が決まってなくても後で調整できます。 Agent Manager画面 ブラウザだけで動くゲームを作りたい。 4色のボールがランダムに上から落ちてきてプレイヤーは下のバ スケットを左右に動かしてキャッチします。 同じ色を連続で取るとコンボでボーナスポイントが入る。 キャッチできなかったボールが合計 5個になったらゲームオー バー。 # 制約条件 外部ライブラリなし。 1ファイルで完結。ファイル名「 color_ball_catcher.html」 回答はすべて日本語で行うこと。 エディタ画面を使う場合は画面右側のAgentにプロンプトを入れます プロンプトの例
9. AIが計画を作成・提示 Antigravity（Planningモード）ではAIがいきなりコードを書き始めるのではなく、最初に計画を作ってくれます。 計画ができあがるとAIからメッセージが届くのでInboxを確認しましょう。 Agent Manager画面
10. AIが作成した計画をレビュー：タスク管理 タスク管理（Task Lists）ではAIエージェントが構造化されたプランを生成します。 通常、このプランを編集する必要はありませんが、確認して、必要に応じてコメントを追加して変更できます。
11. AIが作成した計画をレビュー：実装計画 実装計画を表示します。 （補足）実装計画が表示されないとき 会話から実装計画を開く。 または、画面右側にアーティファクト一覧 を出して選択する。 ここをクリックしてサイドバーを展開 現在使っている会話を 選択
12. AIが作成した計画をレビュー：実装計画 AIが作成した計画に修正を加えることができます。行または選択した箇所にコメントをいれます。 レビューが終わったら[Proceed]をクリックして実装をスタートさせます。 行にコメントする場合 選択部分にコメントする場合
13. AIが作成した計画をレビュー：実装計画 念のため、実装計画にて検証プロセスが「手動検証」になっているか確認してください。 AntigravityにはAIがブラウザを操作する機能が備わっているのですが、今回は安全上の理由でブラウザツー ルをOFFにしており、ユーザーが手動で動作検証するためです。
14. 実装状況を見守る AIが実装を開始するので見守ります。（ずっと見てなくてもいいですが） Agent Managerの画面右側にアーティファクト一覧を表示して、 TasksやImplementation Plan（実装計画）が書 き変わっていくのを眺めていると面白いです。 AIがどこまで作業してるかわかります
15. 検証＆修正 実装が終了したら、作成された HTMLファイルをブラウザで開いて動作確認してみましょう。 思い通りにできていなかったら AIに修正を依頼します。修正時には エディタ画面で変更をAcceptしてください。 「ブラウザで開きました」みたいなメッセージが出ることがありますが、ブラ ウザツールOFFなので手動で開いてください。 修正依頼コメント例 修正時はエディタ画面で変更を Acceptします
16. 検証＆修正 補足 実装後、Agent ManagerでAIが停止して書き込みできなくなることがあります。その場合は、 Inboxを表示して [Run]をクリックします。（クリックするとブラウザで HTMLが表示されます）
17. 作成例 シンプルですが、こんな感じのゲームができました。 皆さんはいかがでしょうか？
18. （補足）アーティファクト 「アーティファクト」というと考古学の人工遺物のようなイメージを持つかもしれませんが、ソフトウェア開発の文脈 では「ソフトウェア開発の副生成物」というような意味です。 Antigravity では、単にコード（ファイル）を作成 /修正するだけでなくAIエージェントがそれを「実装計画」や「タス クリスト」などの形でわかりやすく説明するようになっており、それをアーティファクトと呼びます。
19. （補足）アーティファクト タスクリストや実装計画のほかには次のようなアーティファクトがあります。 • Walkthrough: エージェントがタスクの実装を完了すると、変更の概要とテスト方法がまとめられたものが 作成されます。 • Screenshots: 変更前後の UI の状態をキャプチャします。 • Browser Recordings: 動的なインタラクションでは、エージェントはセッションの動画を録画します。この動 画を見ることで、アプリを自分で実行しなくても機能要件が満たされていることを確認できます。
20. いろんなアイディアを 試してみましょう！
21. 作成例２：逆インベーダーゲーム