Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Google Antigravity を使用して構築する

1. はじめに

この Codelab では、エージェントの時代に開発を支援するために設計されたエージェント型開発プラットフォームである Google Antigravity について学びます。Antigravity は AI エージェントの中央コマンドセンターとして機能し、アクティビティの起動、モニタリング、オーケストレーションを行うための統合プラットフォームを提供します。

この Codelab では、Antigravity を使用して実際のアプリケーションを構築します。簡単なウェブ検索から、フルスタックアプリケーションとエンタープライズグレードの単体テストの生成まで、さまざまなタスクを実行します。

前提条件:

Antigravity と Antigravity IDE がインストールされ、構成されている。
Google Antigravity の基本知識。Codelab の Google Antigravity を使ってみるを完了することをおすすめします。

2. ユースケースについて

Antigravity の基本的な仕組みを理解できたところで、実際のユースケースを見ていきましょう。Antigravity はエージェントファーストのプラットフォームです。つまり、ほとんどの場合、Google はエージェントに指示を出すだけで、エージェントは自動的にタスクを実行し、必要に応じて権限を求め、アーティファクトを生成し、タスクが完了したら Google に通知します。そのため、次の各ユースケースで、エージェントの会話のすべての出力を生成することはできません。手順と、想定される結果のスクリーンショットをいくつか共有しますが、結果は多少異なる場合があります。

このガイドでは、外部サイトでのいくつかのタスクの自動化から、プロジェクトの単体テストケースの生成と検証、完全なウェブサイトの開発まで、さまざまなユースケースについて説明します。始める

3. ニュースのハイライト

これはシンプルなユースケースですが、ウェブブラウザを使用してウェブサイトにアクセスし、情報を抽出し、アクションを実行して、ユーザーにデータを返すための基盤となります。

この例では、Google ニュースのサイトにアクセスして、そこから情報を抽出します。ただし、任意のサイトで簡単にテストして、結果を確認できます。

この Codelab では、ルートフォルダの下にさまざまなプロジェクトを作成することを前提としています。このマシン上のルートフォルダの名前は agy2-pprojects です。

まず、上記のフォルダに news-highlights という名前のフォルダを作成して、最初からやり直します。

Antigravity を起動し、新しいプロジェクトを作成します。news-highlights フォルダを追加します。

新しくインポートした news-highlights ワークスペースで新しい会話を開始します。

次に、「news.google.com にアクセスして、最新のハイライトを取得して」と指示します。

これにより、エージェントプロセスが開始され、news.google.com サイトにアクセスして権限を求める必要があると判断されます。URL の読み取りを複数回求められることがあります。このプロジェクトの権限を付与するかどうかなどを選択できます。

思考プロセスに注意して、エージェントがどのように作業を進めているかを確認してください。エージェントによる実行の例を以下に示します。

試してみたいこと

この点を理解したら、利用可能なウェブサイトの中から、エージェントにアクセスしてデータを取得または要約してほしいウェブサイトを選択します。ダッシュボードとグラフがあることがわかっているウェブサイトをいくつか指定して、いくつかの値を選択するように指示します。
次のプロンプトを試します。Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Python と Flask を使用して動的ウェブサイトを生成する

次に、完全なウェブアプリケーションを生成します。作成するウェブアプリケーションは、複数の講演者が 1 日を通して講演する 1 日の技術イベントに関する情報を提供するサイトです。

もう一度、conference-website という名前の新しいフォルダを作成します。Antigravity Agent インターフェースで新しいプロジェクトを作成し、それに conference-website フォルダを追加していることを確認します。

次のプロンプトを入力して会話を開始します。

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review.

Antigravity はリクエストを分析し、まず実装計画を作成します。implementation_plan.md というキーアーティファクトが作成されます。このアーティファクトで、プロンプトで指定した要件の作成と満たす方法を確認できます。出力例を以下に示します。

[続行] をクリックする前に、実装計画を確認してください。上記の implementation_plan.md ファイルへのリンクをクリックするか、右上の補助ペインを切り替えることで、このファイルを開くことができます。アーティファクトビューが表示され、実装計画が確認できるようになります。

実行用に生成された実装プランの例を次に示します。

プランにコメントを追加してエージェントに再度プロンプトを入力するか、現時点では実装プランをそのまま承認して、会話インターフェースの [続行] ボタンをクリックして次に進むことができます。

エージェントはソースコードファイルの生成を続行します。また、タスクと呼ばれる別のアーティファクトも更新されます。これは、最終結果を達成するために実行する必要があるアクションまたはタスクのリストです。

タスクはいつでもクリックできます。また、アーティファクトのリストにアクセスしてタスクを表示することもできます。以下にリスティングの例を示します。

最終タスクのどこかで、アプリケーションの実行と検証を試みる際に、Antigravity は Python 環境をセットアップします。環境のセットアップ、依存関係のインストールなどを行うには、ユーザーの権限が必要になります。必要に応じて権限を付与します。

検証が成功すると、詳細がハイライト表示されます。また、完了した機能、技術スタック、検証結果、手順の詳細が記載された別のアーティファクトである Walkthrough も表示されます。

ウォークスルーのサンプルを以下に示します。

URL にアクセスしたときに表示される最終的なウェブサイトは次のとおりです。

生成されたコードを確認する場合は、右上にある [IDE を開く] をクリックします。Antigravity IDE が開き、生成されたコードを表示できます。以下のスクリーンショットに例を示します。

試してみたいこと

アプリケーションに追加する機能を追加します。エージェントに詳細を提供し、タスクリスト、実装計画などを変更してタスクを進めていく様子を確認します。
イベントスケジュールにデータを追加します。例: Add two more talks to the schedule。
エージェントに、アプリの README またはその他のドキュメントを生成するよう依頼します。

5. シンプルな生産性向上アプリを生成する

簡単なポモドーロタイマーウェブアプリケーションを生成します。

pomodoro-timer フォルダを作成します。Agent Manager に移動し、pomodoro-timer ワークスペースをインポートして選択していることを確認します。次のプロンプトで始めましょう。

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

実装計画とタスクリストを作成し、それらに取り組む方法に注目してください。フローに注意してください。審査を求めるメッセージが表示される場合があります。

ウォークスルーメッセージとタスクを含む実行例を以下に示します。

完成したアプリは次のようになり、見栄えもかなり良くなりました。

試してみたいこと

アプリケーションに画像をいくつか追加します。たとえば、アプリケーションにタイマー画像を追加します。
生成するアプリケーションのバリエーションをいくつか試してみます。スタイルや画像を試したり、変更をリクエストしたりします。

6. 単体テストの生成、モックスタブの生成、テストの検証

ここで試す最後のユースケースは、特定のコードファイルに対して単体テストを生成し、エージェントがテストを実行して検証するというものです。

このため、以下に示すように、単一の Python ファイルを含むワークスペースを作成します。

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}