Antigravity で仕様駆動開発を始める

このラボの目的

このハンズオンラボでは、Antigravity を使用して Google Antigravity を使用してアプリケーションを作成し、Google Cloud にデプロイする方法を学びます。このラボでは、**仕様駆動開発**のコンセプトについても説明します。

学習内容

- Google Antigravity の基本を理解する。
- 仕様駆動開発の基本を理解する
- Cloud Run でアプリを簡単にデプロイする方法を学習する。

図 1: Antigravity は、Google が開発したエージェントファーストの開発ツールです。

環境設定

- Google Antigravity をご自身の PC にインストールしてください（インストールはこちら）

👉インストール後、Antigravity を起動し、gmail.com アカウントを利用し認証を行ってください。

- Python 3 をインストール
- gcloud をインストール

👉gcloud は、Google Cloud でさまざまなオペレーションを実行できるコマンドラインツールです。

👉インストールが完了したら、システムターミナルを開いて gcloud と入力し、インストールをテストします。

図 2: gcloud をインストールしたら、ターミナルで「gcloud」と入力してインストールをテストできます。

プロジェクトの設定

このラボを実行するための Google Cloud クレジットを取得できます。クレジットを取得するには、こちらをクリックしてください。Google Cloud クレジットの申請方法については、こちらをご覧ください。

- 使用できるプロジェクトがまだない場合は、GCP コンソールで新しいプロジェクトを作成する必要があります。プロジェクトセレクタ（Google Cloud コンソールの左上）でプロジェクトを選択します。

図 2: Google Cloud ロゴの横にあるボックスをクリックすると、プロジェクトを選択できます。プロジェクトが選択されていることを確認します。

- このラボでは、Cloud Shell エディタを使用してタスクを実行します。Cloud Shell を開き、Cloud Shell を使用してプロジェクトを設定します。
- このリンクをクリックすると、Cloud Shell エディタに直接移動します。
- メニューから [Terminal] > [New Terminal] をクリックして、ターミナルを開きます（まだ開いていない場合）。このチュートリアルのコマンドはすべて、このターミナルで実行できます。
- プロジェクトがすでに認証されているかどうかを確認するには、Cloud Shell ターミナルで次のコマンドを使用します。

gcloud auth list

- Cloud Shell で次のコマンドを実行して、プロジェクトを確認します。

gcloud config list project

- プロジェクト ID をコピーし、次のコマンドを使用して設定します。

gcloud config set project <YOUR_PROJECT_ID>

- プロジェクト ID がわからない場合は、次のコマンドを使用してすべてのプロジェクト ID を一覧表示できます。

gcloud projects list

API を有効にする

このラボを実行するには、いくつかの API サービスを有効にする必要があります。Cloud Shell で次のコマンドを実行します。

gcloud services enable aiplatform.googleapis.comgcloud services enable cloudresourcemanager.googleapis.com

API の概要

- Vertex AIAPI（aiplatform.googleapis.com）を使用すると、Vertex AIプラットフォームにアクセスできます。これにより、アプリケーションはテキスト生成、チャットセッション、関数呼び出しのために Gemini モデルを操作できます。
- Cloud Resource Manager API（cloudresourcemanager.googleapis.com）を使用すると、プロジェクト ID や名前など、Google Cloud プロジェクトのメタデータをプログラムで管理できます。これらのメタデータは、プロジェクトの ID と権限を確認するために他のツールや SDK で必要になることがよくあります。

クレジットが適用されているかどうかを確認する

プロジェクト設定の段階で、Google Cloud でサービスを使用できるようにする無料クレジットを申請しました。クレジットを適用すると、「Google Cloud Platform Trial Billing Account」という新しい無料の請求先アカウントが作成されます。クレジットが適用されていることを確認するには、Cloud Shell エディタで次の操作を行います。

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

成功すると、次のような結果が表示されます。「Successfully linked project」と表示された場合は、請求先アカウントが正しく設定されています。上記の手順を実行すると、アカウントがリンクされているかどうかを確認できます。リンクされていない場合は、リンクされます。プロジェクトを選択していない場合は、プロジェクトを選択するよう求められます。または、プロジェクトの設定の手順に沿って事前に選択することもできます。

図 3: 請求先アカウントのリンクの確認

Google Antigravity の概要

Google Antigravity は、Google DeepMind が開発した AI ファーストのソフトウェア開発ツールです。Google Antigravity は、長年にわたって蓄積されたソフトウェア開発のノウハウと最先端の AI を活用して、デベロッパーにスムーズでシームレスな AI 主導の開発エクスペリエンスを提供します。

Google Antigravity の主な機能は次のとおりです。

次の図は、Google Antigravity の基本要素を示しています。

- 👉ブラウザを開き、ブラウザのさまざまな部分を探索してみましょう。

図 4: Google Antigravity の基本要素（詳細は表 1 を参照）

表 1: Google Antigravity の基本コンポーネントの詳細

`Component Index`	`Component Name`	`Function`
`1`	`Agent Manager`	`Provide access to your agent manager where you can manage all your agents`
`2`	`Toggle Agent Pane`	`Toggles and untoggles your agent pane`
`3`	`New Session`	`Starts a new Agent Conversation while keeping old ones separately.`
`4`	`Past Conversations`	`Retrieve previous conversations`
`5`	`Agent Pane`	`The agent pane where you can have conversation with the AI agent`
`6`	`Explorer`	`File explorer`

- Gemini 3 と Nanobanana モデルを内蔵: Google Antigravity を使用すると、Gemini 3 や Nanobanana などの Google の最新の主力モデルを使用できます。これらのモデルに加えて、Claude などのサードパーティモデルも使用できます。

図 5: Google Antigravity 2 では、多くのモデルを使用できます。エージェント駆動型コーディング: Antigravity は、デベロッパーの作業を妨げることなく生産性を維持できる、ネイティブなエージェント駆動型コーディングエクスペリエンスを提供します。

- 計画とユーザーによる完全な制御: エージェントはユーザーの入力を受け取り、タスクを計画に変換します。エージェントは、実行前にユーザーの承認を求めます。これにより、ユーザーはタスクの実行前にいつでもエージェントの指示を変更できます。
- ユーザーフィードバック:エージェントの実行中に、ユーザーはエージェントに追加の指示を提供する必要がある場合に、エージェントにフィードバックを提供できます。
- マルチエージェント: 複数のエージェントを生成して、異なるタスクを同時に処理できます。たとえば、エージェント A が認証ロジックをリファクタリングしている間に、エージェント B が新しい API の単体テストを作成し、エージェント C がバックグラウンドでライブラリを調査している、といった状況が考えられます。
- エディタ、ターミナル、ブラウザをまたぐエージェント: Google Antigravity エージェントは複数のサーフェスで動作します。
- エディタ: Google Antigravity エージェントがコードを記述し、記述したコードをエディタに表示します。
- ターミナル: Google Antigravity エージェントは、タスクによっては、一部のコマンドを実行するためにターミナルへのアクセスが必要になることがあります。エージェントは、必要に応じてコマンドを実行できます。
- ブラウザ: エージェントはブラウザでもサポートできます。これは、ウェブアプリケーションをテストする必要がある場合に特に役立ちます。エージェントはウェブブラウザでアプリケーションを実行し、テストしてデバッグできます。

AI 仕様駆動開発の概要

仕様駆動開発は、構造化された仕様と AI エージェントを開発ライフサイクルの中心に据える、新しいソフトウェアエンジニアリングパラダイムです。基本的な AI コーディングで一般的な「プロンプトとパッチ」（試行錯誤）のアプローチとは異なり、SDD では、綿密な要件収集、システム/アーキテクチャ設計、テスト計画が優先されます。ウォーターフォールモデルの設計フェーズの厳密さを借用し、自動化を通じて最新のアジャイル反復ループに統合します。このプロセスでは、事前に綿密な計画とドキュメント作成が必要ですが、AI エージェントによって迅速な実装とテストが可能になるため、実際には反復プロセスとなります。これにより、ドキュメントの改善に役立つフィードバックを迅速に得ることができます。

コアフィロソフィー

このモデルでは、人間のエンジニアは「コード作成者」から「システムアーキテクト」に移行します。人間の主な責任は、問題と解決策を忠実に記述することです。この詳細な出力は、AI エージェントがコードベースの生成、検証、改善に使用する **Single Source of Truth（SSOT）**として機能します。

SDD ライフサイクル

このプロセスには次のコンポーネントがあります。ステップ 1 ～ 3 は人間中心ですが、ステップ 4 ～ 5 は AI エージェント中心です。これは、サイクルの終了後にフィードバックを使用して仕様を改善できる反復プロセスです。

- 要件の収集: ビジネスロジック、ユーザーのニーズ、システム制約を明確に特定します。
- アーキテクチャ設計: システム構造、データモデル、統合ポイントを定義します。
- システムとテストの仕様: システムの動作と検証方法を定義する、機械可読（または高度に構造化された）ドキュメントの作成。
- 自動コード生成: AI エージェントが仕様を読み取り、本番環境で使用できるコードを生成します。
- テストと検証: 自動化されたスイートは、生成されたコードをテスト仕様に照らして検証します。

主な運用原則

- 設計と実装のループ

ステップ 1 ～ 5 は線形パスではなく、継続的なフィードバックループです。コード生成（ステップ 4）とテスト（ステップ 5）は大部分が自動化されているため、エンジニアリングチームは帯域幅の大部分を最初の 3 つのステージに割り当てることができます。バグが見つかったり、機能が変更されたりすると、エンジニアはコードではなく仕様を更新し、ループを再度トリガーします。

- モジュールの粒度

システムの完全性を維持するため、SDD はモノリシックブロックではなく、きめ細かいモジュールに適用する必要があります。

- 分離: 特定のモジュールの検証が失敗した場合、そのモジュールのみを再指定して再生成する必要があります。
- スケーラビリティ: 小さく明確に定義されたモジュールにより、AI の「ハルシネーション」を防ぎ、AI エージェントのコンテキストウィンドウの焦点が正確に維持されます。

- 品質管理

このパラダイムでは、システム仕様がブループリント、テスト仕様が判定者となります。テスト仕様により、生成されたコードが常に所定の品質要件に準拠することが保証されます。このプロセス全体を既存の CICD パイプラインにシームレスに統合することで、システム全体の健全性が品質要件を満たすようにします。

このラボでは、Google Antigravity を使用して仕様駆動開発の基本を学びます。

Google Antigravity を使用したウェブアプリケーションの開発

このラボでは、シンプルなフォトギャラリーアプリケーションを作成します。画像生成モデルである Nanobanana は、Google Antigravity 内に構築されています。必要な画像を作成するには、Nanobanana を使用します。

ウェブブラウザを設定する

ウェブブラウザはアプリの自動テストに使用されます。以下の手順では、Antigravity がアプリケーションを自動的にテストできるようにブラウザを設定します。

- 👉右上にある [設定] ボタン（歯車アイコン）をクリックし、[Open Antigravity User Settings]（Antigravity ユーザー設定を開く）を選択します。
- 👉左側のペインで [エージェント] をクリックし、[ARTIFACT] セクションで [ポリシーを確認] を選択して [常に続行] を選択します。
- 👉左側のペインで [Browser]（ブラウザ）をクリックし、[Enable Browser Tools]（ブラウザツールを有効にする）が有効になっていることを確認します。

Google Antigravity でアプリケーションを作成する

- 👉Google Antigravity アイコンをクリックして Google Antigravity を開きます。
- **👉個人用フォルダフォルダ（例:**パソコン。
- 👉Antigravity で [Open Folder] を押し、Gallery フォルダを選択します。これにより、ギャラリーフォルダに新しいワークスペースが開きます。
- 👉[エージェント] ペインがまだ開いていない場合は、[エージェントペインの切り替え] ボタンをクリックして開きます。図 4 のボタン 2 を参照してください。
- 👉エージェントペインに指示を入力して、コーディングを開始できます。手順はできるだけ明確にすることが非常に重要です。[Agent Pane] に次のように入力します。**English Version:**

Create a photo granary with following specs.1. Visual Design & LayoutTitle: The gallery must prominently display the title "My photo gallery" at the top.Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.2. Photo ContentQuantity: The page will feature a total of 20 photos. Nature Themes: The collection will include a diverse range of nature photography:Landscape: Mountains, deserts, and forests.Water: Waterfalls, oceans, and lakes.Atmosphere: Northern lights, sunsets, and starry skies.Macro: Close-ups of flowers, leaves, and moss.Generate all the needed photos3. Core Functionality (The "Lightroom" Effect)Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.Manual Navigation:Right Arrow: Swaps the current view to the next image.Left Arrow: Swaps the current view to the previous image.Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.4. Technical Constraints (Strict)Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.5. Perform the following testsOpen the App in a web browserClick on the images and see the image opens in the lightboxCheck the navigation

日本語版:

以下の仕様でフォトギャラリーを作成してください。1. ビジュアルデザインとレイアウトタイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。2. 写真の内容枚数: 合計20枚の写真を掲載。自然のテーマ: 多様な自然写真のコレクションにすること。風景: 山、砂漠、森林。水: 滝、海、湖。空気・雰囲気: オーロラ、夕焼け、星空。マクロ: 花、葉、苔の接写。画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。3. コア機能（ライトボックス・エフェクト）全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。手動ナビゲーション:右矢印: 次の画像に切り替え。左矢印: 前の画像に切り替え。無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。4. 技術的制約（厳守）純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。5. 以下のテストを実行しますウェブブラウザでアプリを開きます画像をクリックすると、ライトボックスで画像が開きますナビゲーションを確認します

- 👉[実行] ボタンをクリックします。エージェントを実行すると、次のような実行プランが表示されます。

図 5: Antigravity エージェントが実装プランを表示する

- 👉確認を求めるメッセージが表示されます。以下のように、メッセージが表示されたら確認してください。Antigravity は、Nanobanana と選択した LLM モデルを自動的に使用してタスクを実行します。

図 6: Antigravity がコマンドを実行しようとしています。[実行] を押して実行を許可します。

図 7: プロンプトが表示されたら [すべて承認] を押します。

- 👉コードが生成されると、Antigravity はブラウザを開いてテストを開始します。テストが完了すると、テスト結果が表示されます。図 8: Antigravity にテスト結果が表示されます
- 👉プロンプトが表示されたら、[すべて適用] を押して、エージェントペインで生成されたすべてのコードを保存します。
- 👉Antigravity の [エクスプローラ] ペインに、新しく生成されたコードが表示されます。図 9: 最終的なコード
- 👉アプリケーションをテストするには、index.html を右クリックしてファイルのパスを取得し、ウェブブラウザのアドレスバーにパスを貼り付けます。

図 10: アプリをテストするには、ウェブブラウザで index.html ファイルのパスをコピーします。

デプロイ用の環境を設定する

- 👉Google Cloud プロジェクト ID を取得します。https://console.cloud.google.com にアクセスします。
- 👉左上をクリックして、プロジェクト ID をコピーして任意の場所に保存します。この ID は次の手順で使用します。図 11: プロジェクト ID をコピーして、後で参照できるように保存する
- 👉Antigravity で、メニューから [Terminal] -> [New Terminal] をクリックして、ターミナルを開きます。
- 👉Windows と Mac/Linux で異なる環境変数を設定する必要があります。「YOUR CLOUD PROJECT」は、ステップ 2 でメモした値に置き換えます。Windows Powershell ユーザー向けの注: 管理者モードで Powershell を開く

#This is only for Powershell users.Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"$env:GOOGLE_CLOUD_LOCATION="us-central1"#For Windows Command Prompt  follow the following steps.set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"set GOOGLE_CLOUD_LOCATION="us-central1"#for Mac/Linux follow the following steps.export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"export GOOGLE_CLOUD_LOCATION="us-central1"

- 👉コンソールにログインします。メッセージが表示されたら、ブラウザで Google Cloud にログインします。

gcloud auth logingcloud auth application-default logingcloud config set project YOUR CLOUD PROJECT

図 12: 認証を実行する

- 👉Cloud Run MCP サーバーをインストールします。Antigravity ウィンドウの右上にある [...] をクリックします。[MCP Servers] オプションが表示されるので、クリックします。MCP サーバーは、エージェントが外部のデータやツールにアクセスできるようにするエージェントの拡張機能のようなものです。
- 👉検索ボックスに「Cloud Run」と入力し、[Cloud Run] をクリックします。図 13: Cloud Run MCP サーバー
- 👉[MCP Servers] タイトルの横にある戻る矢印キーを押して、[Agent Pane] に戻ります。これで、Google Cloud Run の操作を開始できます。[Agent Pane] に次のように入力します。これにより、Cloud Run MCP サーバーが自動的に使用され、Cloud Run で実行されているサービスのリストが表示されます。

Find me the list of services running in Cloud Run.

- 👉次のコマンドを使用してアプリをデプロイします。自然言語を使用して簡単にデプロイできます。Antigravity は、MCP サーバーを自動的に使用してデプロイします。

Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80

- 👉エージェントがアプリのデプロイ先を表示します。例: https://photogallery-85469421903.us-central1.run.app。Cloud MCP Server を使用すると、ウェブアプリを Cloud Run に簡単にデプロイできます。

以下のエラーが発生している場合は、手元の環境に[Node.js](https://nodejs.org/ja/download)をインストールしていないことが原因なので、インストールして、Refreshしましょう。

クリーンアップ

作成したものをクリーンアップしましょう。

- 👉作成した Cloud Run アプリを削除します。Cloud Run にアクセスして、Cloud Run に移動します。前の手順で作成したアプリが表示されます。アプリの横にあるチェックボックスをオンにして、[削除] ボタンをクリックします。

図 38: Cloud Run アプリの削除

まとめ

おめでとうございます！仕様駆動開発の手法に沿って Google Antigravity を使用してアプリを作成できました。また、Cloud Run にアプリケーションをデプロイする方法も学びました。これは、最新のクラウドネイティブアプリケーションのコアライフサイクルを網羅する重要な成果であり、独自の複雑なシステムをデプロイするための確固たる基盤となります。

内容のまとめ

このラボでは、次のことを学習しました。

- Google Antigravity を使用してマルチエージェントアプリケーションを作成する
- アプリケーションを Cloud Run にデプロイする

便利なリソース

参考

- https://codelabs.developers.google.com/codelabs/getting-started-with-spec-driven-development-in-antigravity?hl=ja#0

✨ AI 記事サマリー

この記事のポイントをAIが3行でまとめます。

🔍 AI 検索アシスタント

AI猫アシスタント Gemini 2.5 Active

<div style="background: #f0f7ff; border-radius: 10px; padding: 15px; min-height: 50px; margin-bottom: 15px;">
    <p id="cat-ai-text" style="margin: 0; line-height: 1.6;">こんにちはニャ！この記事の要約や、Google検索を使った質問に答えるニャ。</p>
</div>

<div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <button id="cat-summary-btn" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-weight: bold;">要約するニャ</button>
    <button id="cat-next-btn" style="background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-weight: bold;">次は学ぶニャ？</button>
    <div style="width: 100%; display: flex; gap: 5px; margin-top: 10px;">
        <input type="text" id="cat-query-input" placeholder="Googleで検索して質問..." style="flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px;">
        <button id="cat-search-btn" style="background: #111; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer;">検索</button>
    </div>
</div>

AI猫アシスタント Gemini 2.5 Grounding Active

<div style="background: #f0f7ff; border-radius: 10px; padding: 15px; min-height: 50px; margin-bottom: 10px;">
    <p id="cat-msg" style="margin: 0; line-height: 1.6; font-size: 0.95em;">RAGの開発、頑張るニャ！記事の要約や最新情報の検索はお任せニャ。</p>
    <div id="cat-refs" style="margin-top: 10px; padding-top: 10px; border-top: 1px dotted #007bff; display: none;">
        <p style="margin: 0 0 5px 0; font-size: 0.8em; font-weight: bold; color: #555;">📚 出典元だニャ：</p>
        <ul id="cat-link-list" style="margin: 0; padding-left: 20px; font-size: 0.8em;"></ul>
    </div>
</div>

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
    <button id="btn-sum" style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 0.85em; font-weight: bold;">要約</button>
    <button id="btn-suggest" style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 0.85em; font-weight: bold;">次は？</button>
    <div style="width: 100%; display: flex; gap: 5px; margin-top: 8px;">
        <input type="text" id="cat-input" placeholder="Googleで検索して質問..." style="flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 8px 15px; font-size: 0.9em;">
        <button id="btn-go-search" style="background: #111; color: white; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 0.85em;">検索</button>
    </div>
</div>

ああああああ

AIアシスタント Powered by Gemini 2.5 Flash-Lite

<div id="ai-response-box" style="background: #f0f7ff; border-radius: 10px; padding: 15px; min-height: 50px; margin-bottom: 15px; position: relative;">
    <p id="ai-text" style="margin: 0; line-height: 1.6;">こんにちは！この記事について知りたいことはありますか？「要約」や「関連トピックの提案」ができますよ。</p>
    <div id="ai-sources" style="margin-top: 10px; font-size: 0.85em; border-top: 1px dotted #ccc; padding-top: 10px; display: none;">
        <strong>📚 出典元:</strong> <span id="source-links"></span>
    </div>
</div>

<div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <button id="btn-summary" class="ai-btn" style="background: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold;">記事を要約する</button>
    <button id="btn-next-topic" class="ai-btn" style="background: #28a745; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold;">次は何を学ぶ？</button>
    <div style="width: 100%; display: flex; gap: 5px; margin-top: 10px;">
        <input type="text" id="ai-input" placeholder="Google検索で質問..." style="flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 8px 15px;">
        <button id="btn-search" style="background: #111; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer;">検索</button>
    </div>
</div>

AI猫アシスタント Gemini 2.5 Flash-Lite Active

<div id="ai-response-box" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-height: 60px; margin-bottom: 15px;">
    <p id="ai-text" style="margin: 0; line-height: 1.6; color: #444; font-size: 0.95em;">記事について気になることがあれば聞いてほしいニャ！最新のGoogle検索も使えるニャ。</p>
    
    <div id="ai-sources" style="margin-top: 12px; font-size: 0.8em; border-top: 1px solid #dee2e6; padding-top: 8px; display: none; overflow: hidden;">
        <strong style="color: #6c757d;">📚 参考ソース:</strong>
        <div id="source-links" style="margin-top: 5px; max-width: 100%;"></div>
    </div>
</div>

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
    <button id="btn-summary" style="background: #007bff; color: white; border: none; padding: 7px 14px; border-radius: 18px; cursor: pointer; font-size: 0.85em; font-weight: 600;">要約する</button>
    <button id="btn-next-topic" style="background: #28a745; color: white; border: none; padding: 7px 14px; border-radius: 18px; cursor: pointer; font-size: 0.85em; font-weight: 600;">次は何学ぶ？</button>
    <div style="width: 100%; display: flex; gap: 5px; margin-top: 8px;">
        <input type="text" id="ai-input" placeholder="Googleで検索して質問..." style="flex: 1; border: 1px solid #ced4da; border-radius: 18px; padding: 7px 15px; font-size: 0.9em;">
        <button id="btn-search" style="background: #343a40; color: white; border: none; padding: 7px 15px; border-radius: 18px; cursor: pointer; font-size: 0.85em;">検索</button>
    </div>
</div>