Antigravity と html で Hello, World

はじめに

生成AIブームに出遅れた感を感じている週末エンジニアが、AIエージェント機能のある開発環境 Google Antigravity を使ってみた記事です

前回は思いついた勢いでAntigravityのセットアップをしてみたので、今回は実際にコードを出してもらいます
具体的には html で Hello, World してもらい、それをブラウザを使って表示してもらいます

環境など

• Windows 11 24H2
• Google Antigravity
• Java 25: インストール済み
• Python: 未インストール

JDK18から実装されたJavaの簡易webサーバー機能からhtmlを表示させる想定です

Let's Start

Step 1: htmlでHello, World

まずはエンジニアの入門の定番の Hello, World をhtmlでしてもらおうと思います
ただ毎度同じ文面になってしまうと今後不都合がありそうなので少しアレンジして "Hello, html" と出してもらおうと思います
Antigravityへの依頼は

htmlでHello, htmlと表示するコードを書いて

としたところ、下記のコードが出力されました

出力されたコード（折りたたんでいます）

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello, html</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Hello, html</h1>
  </body>
</html>

style.css

:root {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
  --accent-color: #38bdf8;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
}

h1 {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

• 出力されたコードをそのまま記載しているためご注意ください
• そのまま使用した場合、Google Fontsへの外部通信が発生します

Antigravity的にはhtmlは基本をおさえながらも、文字をGoogle Fontで表示したいようです
ただviewportやpreconnectなど見慣れない記載もあるので確認したところ viewport は初期表示用の指定で、preconnect は外部接続への事前接続指示とのことらしいです
勉強になりました

cssはフォントをInterを基本に各環境を考慮したうえで中央に表示して、さらに文字にグラデーションをつけつつアニメーションでフェードインさせたいようで
なかなかリッチなことをしようとしてくれています

どうやらざっくりとした依頼をした時に出力されるコードにはAIエージェントの好みが入るようです
よく言われていることではありますが、出力結果を細かく自分で確認しないとAIエージェントの好みが混入してしまう可能性があることを身をもって体験することが出来ました

ちなみに想定していたのは最小限のコードなので

Hello, html と表示する最小限のコードを書いて

と依頼したところ、思っていた通りの最小限のコードが出力されました

出力された最小限のコード（折りたたんでいます）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello, html</title>
  </head>
  <body>
    Hello, html
  </body>
</html>

出力されたコードをそのまま記載しているためご注意ください

自宅のような安心感です

Step 2: ブラウザで表示

せっかくなので最初のコードをブラウザで表示してもらおうと思います
依頼はシンプルに

ブラウザで表示して

と依頼としたところ、setupとextensionのinstallを求められ、確認しながら Chrome の拡張機能を追加したところブラウザで表示すことができました
実際に見てみると思ったよりもスタイリッシュです

ただ、ブラウザで表示できたものの file プロトコルで開いているので、ここはもう一歩踏み込んで file ではなく http で表示してもらおうと思います
今回はJDK18から実装されたJavaの簡易webサーバー機能(jwebserver)を試したいと思っていたものの、ざっくり依頼するとどうなるか見てみたかったので

webサーバーで起動してhttpでブラウザに表示して

とざっくり依頼

結果は前回同様に端末に入れていないpythonのコマンドが出てきました
AIエージェントはpython推しのようです

ただ今回はJavaの簡易サーバーを起動してほしいので、提案をRejectして

Javaでwebサーバーを起動してhttpでブラウザに表示して

と再依頼

結果は期待通りとはいかず SimpleWebServer.java というサーバ処理を作ってくれました
以前自分でやってみたこともあるので懐かしくも、そうじゃないんだよと思いつつ、せっかく出力してくれたので中身が問題ないことを確認して実行
無事に localhost:8080 でアクセスできました

Javaの歴史の中ではまだ HttpHandler でサーバ処理を書く方法が主流で、jwebserverで起動させる方法は浸透していないのかもしれません

気を取り直して今度は具体的に jwebserver を依頼文に入れて

Javaのjwebserverでwebサーバーを起動してhttpでブラウザに表示して

と再再度依頼

今度は jwebserver で起動して無事に localhost:8080 でアクセスができました
やればできる子です

AIエージェントはざっくりとした依頼でも対応してくれるものの希望する方法がある場合は依頼に含めたほうがいいようです
このあたりは対人でも同じですが、、

学び

• ざっくりした依頼でも解釈してよきにはからってくれる
• 結果は確認しないと思わぬものが紛れ込んでいる可能性がある
• 望む動作がある場合は手を抜かずに書いた方がいい

• 本記事は個人の学習メモであり、所属組織の公式見解ではありません
• ローカル環境（127.0.0.1/localhost）を前提としているため外部公開する場合は設定・公開範囲にご注意ください