12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Google Antigravityを触ってみる- MAGI風アプリを作ってみた

12
Last updated at Posted at 2026-03-08

この記事ではAIこの記事では2025年にGoogleがリリースしたAIエージェント型統合開発環境であるAntigravityのインストール方法から簡易なwebアプリをAI駆動で作成する方法を説明します。

Antigravityとは
AntigravityはGoogleが2025年にリリースした、AIエージェントが自律的に動くことを前提としたAIエージェント型統合開発環境です。
使用者はAIに簡易な要件や指示を文字として指定するだけで、計画(タスク化)、実装、実行、テストをantigravityが自動で実行するAI駆動開発を実現するものです。
現時点では無料で利用することができます。
https://antigravityai.org/jp/

今回はAntigravityを使用して新世紀エヴァンゲリオンに出てくるMAGI風に与えられた議題に対してAIが多数決で可決、否決を提供するブラウザベースの簡単なウェブアプリを作ってみます。

MAGI(マギ)とは
新世紀エヴァンゲリオンに登場する、NERV本部施設の運用やEVAシリーズのサポート、第3新東京市の市政に利用されている、スーパーコンピュータシステム。第7世代有機コンピュータとされる。メルキオール(MELCHIOR)、バルタザール(BALTHASAR)、カスパー(CASPER)という3つの独立したシステムによる合議制をとり、人間の持つジレンマを再現している。

0 全体概要

Google antigravityアプリをご自身のPCにインストール。
antigravityにて自身のPCでの作業フォルダを指定し、作りたいwebアプリの要件を文字として入力。
あとはantigravityの成果物に対してレビューを行い、完成を待つのみ。

1 Google antigravityのインストール

1.上記URLにアクセスし、ご自身のPC向けのantigravityをダウンロードします。

unknown.png

2.ダウンロードしたAntigravity.exeを実行し、インストール作業を進めます。
セットアップ時の設定は基本全てデフォルトで問題ありませんが、デスクトップアイコン作成など必要に応じて初期設定を変更してください。
unknown.png

unknown.png

下記画面が出ればインストールは完了です。
unknown.png

2 Google Antigravityの初期設定

Antigravityを起動し、各種初期設定を行なっていきます。

1.画面のテーマタイプを決めます。
unknown.png

2.AIエージェントの振る舞い設定します。
左側での項目では、AIエージェントがどれほど開発を主導するかを選択できます。
今回はデフォルトのreview driven developmentにします。
Strict mode.. AIのアクションひつひとつに細かく人間の承認を求めます。想定外の更新リスクは減りますが、開発スピードは落ちます。
Agent driven development.. 人間のレビュー最小でAIが主導して開発します。
Review driven development.. AIが提案した内容を人間がレビューする、バランス型です(推奨)

右側はターミナルの実行ポリシーですが、今回は全てデフォルトにします

Now de you want to use the Antigravity Agent.png

3.エディタの設定をします。
KeybindingsでVimも設定できますが、こだわりがなければNormalを選択します。
Extensionで必要な拡張機能を選択もできますが、デフォルトのままRecommendedにします。

unknown.png

4.設定後、Googleアカウントのセットアップに遷移します。
ご自身のGoogleアカウントとの連携が必要になりますので、画面指示に従ってセットアップを行います。

5.最後に規約に同意すれば初期設定完了です。
Antigravity - Terms of Use.png

補足: 日本語パック導入
日本語でアプリを使用したい場合は日本語パックを導入します。
画面左メニューのブロックアイコン(Extension)を選択し、検索欄に「Japanese」と入力します。
Japanese Language Packを選択し、日本語パックのInstallを行います。
unknown.png
Japanese Language Pack for.png

3 OpenAI APIの取得

今回 Antigravity にてAIを利用したwebアプリを開発するため、Open AI API keyを取得します。
AIを利用しないwebアプリを開発する場合は本手順の実施は不要です。

1.OpenAI製品ページにアクセスし、ページ上部の「製品」部分の箇所にカーソルを合わせると、メニューが展開されます。その中から「APIログイン」を選択してください。
image.png

2.画面右上の「Sign up」を選択し、アカウント登録を進めてください。

image.png

3.ログイン後、右上タブからDashboardを選択し、左メニューからAPI keysを選択します。
unknown.png

4.画面中央の「Create new secret key」を選択、任意のNameを設定し、「Create secret key」を選択します。表示されたAPIキーをメモしておいてください。
unknown.png
ty. OpenAl may automatically disable any API ker.png

5.OpenAI APIの無料クレジットは廃止されたため、APIクレジットが必要です。
右上の歯車(Setting) -> 左側メニューのBilling -> Overview -> Add payment method を選択し、任意の金額のチャージを行なってください。5ドルもあれば十分です。(クレジットカード情報の入力が求められます。

unknown.png
unknown.png

4 Google antigravityでAI駆動開発を行う。

インストールしたAntigravityにて、開発を行います。
1.Antigravity上にて「Open Folder」を選択し、今回作成するアプリの自PCにおける作業場所を指定します。
今回の手順では自PC上に「test_prjoct1」という名のフォルダを作っており、当該フォルダを指定。

unknown.png

unknown.png

2.画面右欄に作成したいアプリの要件を入力し、送信を押します。
今回はChatgptと壁打ちしながら作成したMAGI風アプリの機能要件を使ってみます。

ブラウザ上で動作する「マギシステム風意思決定アプリ」を作成してください。
・アプリ概要
ユーザーが質問を入力すると、3つの異なる人格AIがそれぞれ回答・判断を行い、最終的に多数決で「可決」または「否決」を表示するWebアプリ。

・ 機能要件
1. UI
シンプルで近未来的(黒背景+ネオン風)
入力フォーム(質問入力)
「判定開始」ボタン
3つのAIの回答表示エリア
最終判定表示(可決 / 否決)

2. AI人格(マギ風)
3つの人格を定義:
-CHIOR(論理)
冷静で論理的
データや合理性重視
-BALTHASAR(感情)
人間的で感情重視
倫理や共感を考慮
-CASPER(現実)
実利・現実主義
リスクやコストを重視

3. AIレスポンス仕様
各AIは以下の形式で回答:
{
"judge": "可決" or "否決",
"reason": "理由(日本語で簡潔に)"
}

4. 処理フロー
ユーザーが質問を入力
3つのAIに並列で問い合わせ
それぞれの回答を表示
多数決で最終判断を決定
結果を強調表示

unknown.png

3.入力された要件をもとにImplementation plan(実行計画)が画面左欄に作成され、ユーザにレビューが求められますので、内容を確認してみます。
unknown.png

4.実行計画の中で修正したいポイントがあれば、当該箇所にコメントを入力します。

unknown.png

AIの回答にGemini APIを利用する、と計画に記載がありましたが、今回のアプリではせっかく作成したOpen AI APIを使いたいので、そのようにコメントします。
青い色のReviewのアイコンでコメントの確認、submitができ、内容の確認と必要なコメントの入力が完了したら、
Proceedを押すことでAntigravityが実行計画の修正をします。

Open AI APIの使用を希望します

Proposed Changes.png

Open AI APIを利用する計画になりました。
計画を承認すると、Antigravityにて開発が自動的に始まります。
要所要所でレビューを求めてくるので、問題なければ承認をしていきます。
unknown.png

5.数分でアプリケーションの開発-テストが完了しました!
どのようなステップで開発が行われ、どのようにテスト実行され、自律的にバグ解消をしたかが右欄に記入されていきます。(すごい..)

unknown.png

完了したアプリのウォークスルーとアーキテクチャオーバビュー、マニュアルでの確認方法が作成されました。
おおむね想定通りの仕様になっています。

unknown.png
Added pulsin.png

6.実際に作成されたアプリを見てみましょう!
Antigravityの掲示した通りに作成されたindex.htmlをブラウザで開きます。

画面にOpen AI API keyと質問を入力し、Execute judgementを押すことで、
3種のAIが入力された質問に対して「可決 or 否決」とその見解を応答、
合議制にて最終判断表示しており、
当初の要件通りの仕様になっていることが確認できました!

MAGI SYSTEM.png

人類は宇宙に進出するべきですか?
⇨可決
unknown.png
ピザにパイナップルを乗せるべきですか?
⇨否決
unknown.png

7.完成後のデザインや仕様変更もチャットベースで簡易に行えます。

ユーザが画面上で処理を実行した後に、当該の処理が実行中であることをわかるエフェクトを追加してほしい。
具体的には各々のAIの欄にて処理を実行中であることがわかるようにローディング中であることがわかるSFチックなエフェクトを追加してほしい

指示通り、ロード中エフェクトが追加されています。
MAGI SYSTEM.png

5 まとめ

以上、AIエージェント型統合開発環境であるAntigravityのインストール方法から簡易なwebアプリをAI駆動で作成する方法を解説しました。
簡易な要件や指示を文字として指定するだけで、計画(タスク化)、実装、実行、テストをAIが自律的に実行する様子と、ちょっとした要件であれば、ここまで簡単にアプリが開発できるようになっていることに大変驚きました。

今後はAntigravityが具体的にどのようなステップで計画、実行、テストを行なっているのかをもう少し深ぼってみるとともに、 IBM bobなどの他社AI駆動開発ツールも利用してみて、各製品の違いも見ていきたいと思います。

12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?