AntigravityでAIアプリを作る方法

TL;DR

Antigravityでは、フォルダーを開いてモデルと計画モードを選び、作りたい画面や機能を自然言語で指示すると、Webアプリの実装と動作確認まで進められる。画像生成も組み合わせられるが、自動実行の設定、APIキーの露出、外部APIの利用制限には注意が必要である。

Transcript

はい、どうもしです。え、今回はですね、 アンチグラビティのAIエディターを実際 に使ってみて、カーソルのエディターと 比較してみて、どこがいいのか、ま、そこ のメリットデメリット、え、そういった ものを比較してみようかなと思います。ま 、今回はアンチグラビティでいろんな アプリとかゲームとか作ってみて、ま、 その出力のやり方だったりとか、あと なノバナとかも使えますので、ま、そう いった画像をどうやって組み合わせていく のかっていうとこもね、お見せできたらな と思います。カーソルにはない機能とかも 、ま、あったりするので、え、そういった ものもお見せできたらなと思います。なの でこの動画最後まで見れば、ま、そんな 感じでアンチグラビティって実際どうなの とか、カーソルと比較してどんな感じなん... Read More

Key Insights

• Antigravityの日本語化は、コマンドパレットで表示言語の設定を検索し、日本語を選択する手順で行える。タブやメニューも日本語表示に切り替わる。
• プランニングモードは、実装前に開発手順のチェックリストを作り、AIが完了状況を参照しながら作業を進める仕組みである。話者は精度向上のために利用している。
• アプリの指示は、欲しい画面、デザイン、詳細ページ、利用するAPIなどを自然言語で具体化して送れる。内蔵マイクを使えば、話すだけで指示内容を入力できる。
• ウォークスルーは、完成した機能の説明に加えて、画面のスクリーンショットや動作デモ動画まで提示する機能である。話者はこれをCursorにはない特徴として紹介している。
• YouTube風Webアプリは、ReactとViteを使った構成で生成され、ローカルホストの5173番から確認できた。初期版の動画やコメントはダミーデータである。
• YouTube Data API連携は、Google Cloud Platformで対象APIを有効化し、認証情報からAPIキーを発行して実装へ渡す流れで行われた。キーの露出には注意が必要である。
• Nano Banana Proの画像生成は、モックアップやWebサイト用素材をエディター内で用意し、実装へ組み込める点が特徴である。無料枠では週単位の利用制限が示された。
• AIだけの開発は、個人用や少人数向けのアプリでは実用的になったというのが話者の見解である。一方、大規模サービスには性能、保存先、データベース、セキュリティの設計が必要になる。
• 🎬 このチャンネルの他の動画:
  • パートナーとの同棲を始めるか判断する方法
  • Bolt.newでフルスタックWebアプリを作る方法
  • Claude Codeで有料記事アプリを作る方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Antigravityをインストールして日本語化する方法は？

GoogleでAntigravityを検索して公式サイトを開き、Windows版またはMac版をダウンロードする。起動後は上部のViewからコマンドパレットを開き、表示言語の設定を検索して日本語を選択すれば、タブやメニューを日本語表示に変更できる。

Q: AntigravityでWebアプリを作り始める方法は？

最初に開発用フォルダーを作成し、Antigravityの「フォルダーを開く」からそのフォルダーを選択する。右側のエージェントでモデルと動作モードを選び、作りたいアプリの見た目、画面構成、必要な機能、利用したいAPIを自然言語で伝える。

Q: プランニングモードを使う理由は何ですか？

プランニングモードを使う理由は、実装前に作業手順を整理し、AIがチェックリストを参照しながら進捗を判断できるようにするためである。話者は、Webサイト、ゲーム、Webアプリ、スマホアプリのいずれでも、先に計画を立てる方が精度が上がるとしている。

Q: AntigravityでYouTube風アプリを作る方法は？

YouTubeに近いUI、ホーム画面と詳細画面、YouTube APIを使う方針をエージェントへ伝え、計画作成後に実装を進める。紹介例ではReactとViteが使われ、約5分後にローカルホストの5173番で画面を確認できたが、初期の動画とコメントはダミーデータだった。

Q: YouTube Data APIを連携する方法は？

Google Cloud Platformでプロジェクトを選び、YouTube Data APIを検索して有効化する。次に認証情報の作成画面からAPIキーを発行し、そのキーを使うようAntigravityへ指示する。外部APIには無料枠やレート制限があるため、開発前に上限を調べる必要がある。

Q: ターミナル操作を自動実行する際の注意点は？

レビューやターミナルのポリシーを常時続行にすると、確認を挟まず処理を進められる一方、ファイル削除なども自動実行される可能性がある。話者は設定変更を自己責任とし、便利さだけでなく、意図しない操作が起きる危険も考慮するよう注意している。

Q: Nano Banana ProでWebサイト素材を作る方法は？

まずデザインの傾向を探索させ、複数のモックアップやワイヤーフレームを画像として生成する。好みの案を選んでHTMLとCSSによる実装を依頼し、絵文字などの簡素な素材が残った場合は、Nano Banana Proで必要な画像素材を作ってページへ挿入するよう追加指示する。

Q: AntigravityとCursorの違いは何ですか？

紹介された範囲では、計画作成、コード差分の確認、外部APIを使ったアプリ開発は両方で行える。一方、話者は完成後のデモ動画を含むウォークスルーと、エディター内での画像生成をAntigravityの特徴として挙げている。最終的な優劣は用途と料金条件によって変わる。

Q: Antigravityの無料枠ではどこまで使えますか？

無料枠でもWebアプリ生成や複数モデルの利用を試せるが、話者はOpus 4.5を使い続けたところ上限に達したと報告している。また、Nano Banana Proの無料枠は週単位でリセットされる制限があると説明しており、利用可能量は機能ごとに確認する必要がある。

Q: AIだけで大規模アプリを開発できますか？

話者の見解では、個人用や少人数向けのアプリなら、コードを細かく確認せずAI中心で構築できる段階に近づいている。一方、多数の利用者を抱えるサービスでは、動画の保存先、通信量への対応、データベース設計、性能、セキュリティまで考える必要があり、AIへの一度の指示だけでは難しい。

Summary & Key Takeaways

• 導入時は公式サイトからWindows版またはMac版をダウンロードし、コマンドパレットの表示言語設定で日本語を選ぶ。開発用フォルダーを作って開いた後、右側のエージェントからモデルを選択する。話者は実装前に計画を作るプランニングモードを使い、AIがタスク一覧を参照しながら進捗を管理する流れを紹介している。

• YouTube風Webアプリの例では、見た目、詳細画面、YouTube APIの利用方針を自然言語で伝え、React製の画面を約5分で生成した。完成後は差分、スクリーンショット、デモ動画を含むウォークスルーを確認できた。Google Cloud PlatformでYouTube Data APIを有効化すれば、動画やコメントも取得できるが、APIキーと利用制限の管理が必要になる。

• ランディングページ制作では、Web上のデザイン探索、複数のモックアップ生成、好みの案を基にしたHTMLとCSSの実装を試している。HTMLとCSSだけでは画像素材が簡素になりやすいため、Nano Banana Proで素材を生成して組み込む方法を提案した。無料枠にはモデルや画像生成の制限があり、課金後の料金とリセット条件も確認すべきだとしている。