目的
非エンジニアが、WebサービスをAIで自作して世の中に使ってもらうまでの手法をまとめる。
実現したいこと・条件
・ソースコードの中身が見えないAIサービスやプラットフォーム依存はNG。
・継続的な開発が可能。
・再現可能なやり方で。
・アクセス数が少なければ無料でサービス運用できる。
使うツールと構成
- Google Antigravity（AIコーディングツール）
- Google Cloud Run（クラウド環境：毎月無料枠あり）
- Github（ソースコード管理）
サンプルとして開発するウェブサービス
複数タイムゾーン対応・世界時計のウェブサービス。
機能：選択した複数の国の現在時刻を、JSでリアルタイムに更新して並べて表示。
準備
Antigravityは日本語化しておく。
空のフォルダを作成して、Antigravityでそのフォルダを開く。
Antigravityへの指示
これ以降は基本的にAntigravityのエージェントへ自然言語で指示を出す。
応答速度やコスト低減を狙って、AIモデルは「Gemini 3 Flash」を利用する。
複数タイムゾーン対応・世界時計のウェブサービスを開発したい。
選択した複数の国の現在時刻を、JSでリアルタイムに更新して並べて表示。
PHPとJSとCSSとHTMLで実装。
データベースやサーバ上へのファイル追加保存は行わない仕組みで。
実装計画
実装計画が.mdファイルで出力される。
英語で出力されたら日本語での出力を指示する。
# 世界時計ウェブサービス 実装計画
複数のタイムゾーンをリアルタイムで監視できる、モダンな世界時計アプリケーションを作成します。
## ユーザー確認事項
> [!IMPORTANT]
> データベースを使用しないため、選択したタイムゾーンの保存にはブラウザの `localStorage` を使用します。そのため、設定は使用しているブラウザごとに保存されます。
## 提案される変更点
### [コンポーネント] 世界時計ウェブアプリ
#### [新規] [index.php](file:///Users/atsuto/Documents/Antigravity/sample/index.php)
メインページの構造。PHPを使用して初期ページの読み込みと、必要に応じてタイムゾーンのリストを提供します。
- HTML5 構造。
- 時計カードのメインコンテナ。
- タイムゾーン追加用の検索・選択インターフェース。
#### [新規] [style.css](file:///Users/atsuto/Documents/Antigravity/sample/style.css)
モダンな美学を取り入れたプレミアムなスタイリング。
- 深みのあるグラデーションを使用したダークモードテーマ。
- 時計カードへのグラスモーフィズム（透過・ぼかし）の適用。
- レスポンシブなグリッドレイアウト。
- 滑らかなトランジションとホバーエフェクト。
#### [新規] [script.js](file:///Users/atsuto/Documents/Antigravity/sample/script.js)
アプリケーションの中核ロジック。
- `Intl.DateTimeFormat` を使用したリアルタイムの時計更新。
- タイムゾーンの管理（追加・削除）。
- `localStorage` を使用した永続的な保存。
- 動的なUI更新。
## 検証計画
### 自動テスト
- `localStorage` がタイムゾーンの選択を正しく保存・復元できるか確認。
- 既知のUTCオフセットに対して時間の計算が正確か確認。
### 手動確認
- ブラウザで開き、複数のタイムゾーン（例：東京、ロンドン、ニューヨーク）を追加。
- リアルタイムで秒が更新されることを確認。
- さまざまな画面サイズでのレスポンシブレイアウトをテスト。
実装
実装計画を「進める(Proceed)」ボタンを押す。
自動的に各種ファイルが作成される。
実行・動作確認
ローカル環境（自分のPC内）で動かしてみる。
「実行(Run)」ボタンを押す。
自動でブラウザ（Antigravity Browser Control）が立ち上がる。
これはAntigravityから自動で操作と確認が実行される、特別なブラウザWindowとなっている。
動作画面
自動でウェブサービス画面が立ち上がり、Antigravity自身が自動で動作確認を行ってくれるので完了まで待つ。動きが止まったら自分で使ってみることも可能。
完了報告
ファイル保存/変更許可
自動作成されたファイルについて、内容を許可するボタン（Accept all）を押す。
リリース
Google Cloud Runで動かしたいのでエージェントに指示を出す。
Google Cloud Runで動かしたい。
実装計画（リリース関連）
下記のような実装計画が出力される。
# Google Cloud Run デプロイ実装計画
既存の世界時計ウェブサービスを Google Cloud Run で動作させるための設定を追加します。
## ユーザー確認事項
> [!IMPORTANT]
> デプロイには Google Cloud SDK (gcloud) がインストールされ、適切に設定されている必要があります。
> 今回はコンテナ化に必要なファイル（Dockerfile等）を作成します。
## 提案される変更点
### [コンポーネント] デプロイ設定
#### [新規] [Dockerfile](file:///Users/atsuto/Documents/Antigravity/sample/Dockerfile)
PHPを実行するためのコンテナイメージを定義します。
- ベースイメージ: `php:8.2-apache`
- Cloud Run の要求に合わせて、動的にポートを変更できるように設定。
- アプリケーションファイルをコンテナ内にコピー。
#### [新規] [.dockerignore](file:///Users/atsuto/Documents/Antigravity/sample/.dockerignore)
ビルド時に不要なファイルを除外します。
- `.git`
- `Dockerfile`
- ローカルのドキュメント類
## 検証計画
### 自動テスト
- `docker build` が正常に完了することを確認。
- ローカルで `docker run` し、アクセスできるか確認。
### 手動確認
- `gcloud run deploy` コマンドの説明を提供し、ユーザー側でのデプロイをサポート。
リリース/デプロイ準備完了
自分のフォルダにもDockerfileが作られているはず。
リリース/デプロイ環境整備
このように、「ターミナルから以下のコマンドを実行してください。」のように頼まれることもあるが、逆に頼めばやってくれる。
Google Cloud SDKインストール指示
Google Cloud SDKをインストールできますか？
Runする。
お願いする。
待つ。
たまにこのまま応答がないことがあるので、しばらく待ったら状況を確認してみる。
案の定、完了していた。
Google Cloud アカウントへのログイン
ここでもAntigravityにログイン操作を実行してもらう。ブラウザが開くのでそこは自分でログインする。
Google Cloud上にプロジェクトの新規作成
Google Cloudプロジェクトの請求アカウントの紐づけ
予算設定
無料枠はあるが、予想外にクラウド費用が使われないように予算を設定しておく。
リリース/デプロイ実行
通常のリリース環境は東京リージョンでもよいが、無料枠はus-central1が確実なようなのでリージョンを変更する。
リリース後の確認
下記にリリースが完了した。
https://world-clock-911355080803.us-central1.run.app/
ソースコード管理
継続的な開発のため、完成したソースコードはGithubで管理する。
Githubのリポジトリ（保存先）作成
Github上にコミット完了
継続的な開発
Coming Soon..