概要
https://qiita.com/sion_neko/items/e22e632e826f45fc17b6
詳細内容
## Google Antigravity IDEで焼き肉部位サイトを作ってみた - 開発フローと知っておくべき機能
https://qiita.com/sion_neko/items/e22e632e826f45fc17b6
Google Antigravity IDEを使って焼き肉部位確認サイトを構築する実践を通じて、その開発フローと重要な機能を解説する。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[Google Antigravity IDE, AI開発環境, 対話型AI, コード生成, エージェント開発]]
本記事では、Googleが提供する新しいAI統合開発環境「Google Antigravity IDE」を実際に利用し、焼き肉の部位を視覚的に解説するウェブサイトを構築する過程を通じて、その開発フローと知っておくべき機能を詳細に紹介しています。
まず、Antigravity IDEには、複雑な調査や詳細な計画が必要な「Plan」モードと、変数名変更などの単純作業を迅速に行う「Fast」モードの2種類の会話モードがあり、タスクに応じて使い分けることが重要だと著者は述べています。
ウェブサイト開発フローでは、まず「焼き肉の部位の名前が視覚的にわかるWebサイトを作成したい」というシンプルなプロンプトから開始。AIが自動生成する「Implementation Plan」（計画書）をレビューし、必要に応じてコメントで修正指示（例：計画書の日本語化）を行います。計画実行後には、プロジェクト概要や技術スタックが記載された「Walkthrough」（報告書）が自動生成され、作成されたWebサイトを確認します。初期版のUIに不満がある場合、著者はチャットよりもUI上で的確に修正指示を出せる「Walkthroughへのコメント機能」の利便性を強調しており、ここで画像生成機能「nano banana」を活用してリアルな写真の組み込みを指示することで、サイトの品質を向上させるプロセスが紹介されています。
さらに、開発フローでは伝えきれなかった実用上重要な機能と設定として、以下の点が挙げられています。
* **スクリーンショットと画面録画機能**: UIのレビューに活用できるが、自動修正は行わないため、最終的なUI確認は手動が必須であり、ブラウザ拡張機能の導入が必要となります。
* **MCP（Model Context Protocol）接続**: 外部モデルとの連携設定が可能です。
* **エージェントモード**: エディタモードとは異なり、AIエージェントとの対話が中心となるモードです。「Workspaces」で複数リポジトリを跨いだ作業が可能になり、「Playground」ではメインプロセスを汚さずにAIとの会話を試せるため、ChatGPTなどのアプリを切り替える手間が省けます。
* **エージェント設定**: セキュリティと開発効率の両面から重要な設定が紹介されています。
* **レビューポリシー**: 著者はAIが勝手に進めることを避けるため「Request Review」（毎回レビュー依頼）を推奨しています。
* **ターミナルコマンド実行**: セキュリティ上の観点から「off」に設定し、許可リストに登録したコマンドのみ実行させることを推奨しています。
* **ファイルアクセス**: ワークスペース外のファイルへのアクセスを許可する「Agent Non-Workspace File Access」は、情報流出のリスクがあるためオフにすべきだと指摘しています。
著者は、nano bananaが搭載されていることで、次々とアイデアが湧き、開発が非常に楽しいと述べており、無料で使える今のうちに試すことを推奨しています。