tech#Antigravity

Antigravityで3日でホームページリニューアルした話

お金無いのでClaudeもCursorも経験無くいきなりAntigravity使って目ん玉飛び出た記録です。Antigravityについての具体的な紹介や説明はありません。

これまでの背景と振り返り

この度、ウェブページをリニューアルしました。

元々はコロナ禍に暇だったのでHugoというMarkdownで記事が書けるSSGライクなウェブページを運用していましたが、昨年の育児休暇中に Kubernetesとウェブアプリの勉強がしたい という理由でGKE+NextJSのブログサイトをスクラッチで開発(絶望的に無謀)。運用して1年ほど経ちましたが以下のような課題がありました。

  1. ちゃんとしたフロントエンジニアではないのでUI/UXが終わってる(致命的)
  2. ブログを投稿するたびに手動でデプロイするのが面倒でモチベが下がる
  3. GKE+ロードバランサー運用のため、毎月4200円の出費がかかる

ということで、これらの課題を解決すべく、リニューアルを計画しました。

1つ目の課題から勉強は満足したので今度はとにかくまともな普通のサイトを作りたい、でも自分にはそんな力はないということで今流行りのAIにそのあたりはお任せしてみます。

ちなみに今回開発してもらったコードはこちらのGitHubにて公開しています。
AIに作ってもらっているのでいくつかおかしな点があることも自覚していますが、最低限ESLintは通していて、今後リファクタリングしていく予定です。

要件定義から詳細設計まで

着想自体は10月頭にしていたので、まずはやりたいことの整理とそれをドキュメントに起こす作業から始めました。
Githubでいうとこちらで定義しています。

当時はGemini2.5 Proが無料で利用できており、VSCodeのExtensionを使ってエディタ内でやり取りをし、ドキュメントの生成までできました。
この段階で要件、各機能、インフラ周りといったところまで一通り整理することができ、完成までのイメージを持つことができました。

しかし、ここからAIの泥沼にハマります。

Gemini 2.5 Pro による開発 (1敗目)

設計の勢いそのままにタスクまで分解できたので、あとは開発までお願いしようとしたのですが、やっていると以下のような課題にぶち当たりました。

  1. タスクを進めるにつれて処理が激遅になる
  2. セッションを新しくすると改善されるが、そうするとこれまで設計した内容や依頼した内容を忘れ暴走する
  3. 無料枠の制限があり思うようにタスクを消化できない
  4. 何度か新しいセッションを経てそれぞれのエージェントが思い思いに開発するので結合テストで矛盾が発生して解決できずにAIが爆発する(これを解決するのは無理です、とか平気で根を上げる)

初めのうちは順調そのものでしたが、進捗率50%を超えたあたりから課題1, 2が多発し、何度かやり直しているうちに課題4が発生して堪忍袋の緒が切れて開発を断念しました。

仕様駆動設計(Specific Driven Development)による開発(2敗目)

前回の挫折から数週間後、世間ではSSDが注目されていることに気づき、またローカルLLMができるgpt-ossがリリースされたこともあり、これならいけそうということでMacをM4 Proチップのものに新調して再度挑戦することにしました。

結果としてはこちらも無事に失敗
SSDが悪い、というのではなくgpt-oss:20Bでは小規模程度でも何度かプロンプトをやり取りする開発ができなかったです。
薄々最初から気づいてはいたのですが、これだけのためにPCを新調したということもあり引くに引けず、何度もやり直しては期待した結果が出ずにブランチを消して、の繰り返しの日々でした。

それでもSpec-Kitを使ったSSD体験は結構おもしろかったです。技術内容を記載するplanを毎ブランチ回す時に書くのが冗長に感じましたが、もっと成功体験が広がればこれだけでもある程度のものは作れそうなポテンシャルは感じました。

Antigravityによる開発

このタイミングで、GoogleからGoogle Antigravityが発表されました。

で、よく分からないままインストールして、事前に作成していた設計書類を食わせてゴニョゴニョしたら3日でウェブサイトがローカル環境で動きました
その後、いくつか本番デプロイの設定をしてめでたくリニューアル完了です。

Antigravityを使ってわずか数日でこれまで2ヶ月詰まっていた課題を解決し完成させた、それがAntigravityとGemini 3 Proのすごいところだなと実感させられました。

良かった点として、とにかく記憶してくれるコンテキストのサイズがこれまでのものと桁違いなことが挙げられます。といっても比較対象がGemini 2.5とgpt-ossですが。。。
最初にドキュメントを食わすとAntigravityの方で勝手に内容を解釈してWalkthrough, Implementation Plan, Taskを作ってそのまま一通りの機能実装までやってくれました。

それでもまだアプリが不安定なのか、何度かクラッシュし、Artifactsが消滅する事故もありましたが、それでも何とかなるくらいにはGemini 3 Proが仕事してくれます。

アーキテクチャ図

shanari.png

ここで本運用しているアーキテクチャ図を簡単に紹介です。
構造としてはシンプルでCloud RunでNextJSアプリを稼働し、DBはコスト削減のためSQLite3をCloud Storage上にファイルとして保存してCloud Runからはファイルマウントすることでアクセスできるようにしています。

また、Cloud Runの最小インスタンス数を0とすることで誰もアクセスしていないときはコストを0にすることができます。これが今回のリニューアルでもっとも大きく、これで誰もアクセスしていないのに毎月4200円徴収される負のスパイラルから解放されることになりました。

リニューアルして数日ですが、今のところは1日1-9円程度の課金が発生しているため、月額100円以下で運用できそうです。

コードの理解度がAI>開発者になってはいけないと思いつつ

今回、機能追加として管理者ページや、ブログ記事の編集ページといったものを追加したのですが、その際に生成されたコードについては知見がないということもあり、ほとんどがまずは承認してローカル環境で動作を確認、変な挙動があれば伝えて直してもらう、という感じで進めていました。

このあたりはVibe Codingに近い感覚で、MVPやPoCでは良い手法と思い、今回は自分向けのウェブページなので最悪被害を受けるのは自分だけという精神でやっていましたが、AIが生成した内容を自分が理解してなくても進められる状態は自社の本運用システム向けの開発とかには到底受け入れられないので、この辺はAI手動の開発になってもエンジニアの仕事は当分無くならないんだろうなと安心しました。まだ勉強せなあかんのかいとちょっと暗い気分にもなってますが。。。

Antigravityで3日でホームページリニューアルした話 | Shanari