初めてのAntigravityで手製のWebアプリをアップデートしてみた
動機
最近になって、Gemini AI Proの一か月無料トライアルがあることを知り、加入してみました。
色々試すうちに、今まであまり有効に使えてなかったAIコーディングに興味が出てきたので、学習を兼ねてやってみることにしました
Antigravityについて
AntigravityはGoogleが提供するAIコーディングツールです。
やること
以前作成した、手でゴリゴリコードを書いたWebアプリ、これをアップデートする
作る前に考えていたアップデート内容は下記の内容、あとは作りながら思いついたものを追加した
- 見た目をリッチに
- 多言語対応
- マニュアル
- 音源の種類を増やす
成果物
新旧比較できるように、新しいバージョンをCloudflareで公開してます
| 旧バージョン | 新バージョン |
|---|---|
 |
 |
| 旧サイトへ | 新サイトへ |
Antigravityの準備
インストールと使い方学習
下記の二つのチュートリアルをやり、インストールからなんとなくの使い方までとりあえず覚えた
Rules
RulesはAIがやり取り全体を通して守ってほしい約束事を記述したマークダウンファイル
Antigravity全体で設定できるルールと、各ワークスペース個別で設定するルールが作れる
全体ルールは下のようにとりあえず日本語にしてもらうことだけお願いしてみた
1. 日本語で答えてください
2. Artifactは日本語にしてください
3. ソースコードに記述するコメントは日本語にしてください
Artifactとは、AIが指示を実行する前に作成する、実装プランや実行タスク一覧などのこと
ワークスペースのルールはパッと思いついた見た目に関しての指針を書いてみた
1. canvasの表示領域は出来るだけ大きくする
2. 多言語対応、対応する言語は日本語と英語
3. レスポンシブデザイン対応
ちょいちょい守られないこともあったが、その場合は都度指示をして修正してもらった。
Artifactが英語になってたとか、多言語対応が漏れてるとか。
AIの設定
インストール時に推奨されていた都度人間に承諾を求めるモードをそのまま採用。
AIはPlanningでGemini 3 Pro(High)だけを使った
アップデートの作業内容
見た目をリッチに
見た目に関してはプロンプト入力だけで全部済ませることができた
最初に下記の内容で更新してもらった
Index.htmlを内容を維持しながら、レスポンシブ対応したモダンなHTMLにしてください
| 前 | 後 |
|---|---|
 |
 |
UIが少ないのも影響してるのか、ちゃんとアップデートされた。
UIの位置はとんでもないところにあるが。
後は細かく指示だしして微調整
- UIを上部に一列で配置して
- UIの文字をアイコンに置き換えて
- ループの小節入力部分はチェックが有効な時だけ表示して
- ..等々
多言語対応
Ruleに書いたおかげか、見た目の変更作業でついでに言語切り替えがUIで出来るようになっていた
ただ手動切り替えはどうかと思ったので
言語切り替えは自動で行うようにしてください
と指示して解決。
後に追加したUI要素もちゃんと対応してくれた
マニュアル
Github用のREADME.mdにマニュアルを書いていたので、
README.mdのアプリ説明以降を参考に、
ボタンを押したら画面にオーバーレイで表示されるマニュアルを実装して
と指示して実装できた
速度変更機能
JavaScriptのコードでMIDI再生処理のtickに渡しているdeltaTimeに速度をかければいけそうな感じだったので
速度変更機能を実装してください
- deltaTimeに再生速度をかけて速度変更を実現する
- 0.5xから2.0xの間で速度を変更できるUIをスライダーで用意
みたいな指示で実装
音源種作成
既存の音源生成コードを修正して作ろうとしたが、元のコードに引っ張られてか実装があまりうまくいかなかったので、別で作成して組み込むという方法をとった。
Playgroundを使用して
RustでFM音源でADSR制御つきのピアノ音を生成するWebAudioApiを使用したコードを出力してください
と指示して、コードを出力してもらった。
そのコードを元の音源生成コードと合うように手で修正。
同じ手順でアナログシンセバージョンのコードも作成。
その後、できたコードをこのWebアプリのフォルダにコピってきて
３つのコードをまとめて、音源種を切り替えれるようにしてください
でコードをまとめてもらうと、JavaScriptから切り替えれるようにするコードまで生成してくれたので、
音源種を切り替えるUIをラジオボタンで作成してください
と指示をだして実装完了
音源の微調整
出来たコードで再生してみると、ノイズがひどかったので、
ノイズが出ているので修正してください
と指示したり、他にも試してみたが、結局直らず手動で修正。
コンパイルエラーや、HTMLのUI崩れなどはしっかり直せる感じだったが、
音はそもそも診断が出来ないので原因にたどり着くのはしんどそうな感じ、指示の出し方も難しい・・。
githubリンクボタン
最後に、アプリからGithubに飛べたほうがいいなと思い、
下記のようなプロンプト打ち込んですんなり実装
githubのマークが書かれたボタンを右端に配置して、押されたら下記のURLに飛ぶようにして
https://github.com/t0k0na2/dynamic-piano-sheet
紹介動画作成
Antigravityは実装後のChrome上でのテストを録画していて、作業が終わった後にこんな感じで出来ましたと動画で知らせてくれるのですが、
それならアプリの紹介動画でも軽く作ってくれるんじゃないかと思いプロンプトに指示
このアプリを紹介するための短い動画を作成したいです。10秒くらいにまとめてください
- 再生ボタンで再生開始
- 位置変更を操作
- ズームを操作
- 再生速度変更を操作
- 停止ボタン押す
- 演奏画面をドラッグしてスクロール
出来た動画のサイズが大きかったので、後で7秒バージョンを作り直してもらって出来た結果がこちら
出力された動画のフォーマットはwebp形式
どこに保存されたかわからないので、どこに保存したのか聞く必要があった
最近は簡単に録画できる環境があったり、webp形式だったりで、使う場面はあまりなさそうかな……。
最後に
使ってみた感想としては、今の時点でもずいぶん楽だなぁと思ったので、慣れてくればもっと生産性も上がるのではないかと思いました。
自分はHTMLやCSSには疎いので、その部分の負担がかなり軽減されるのがうれしかったです
行った作業をつらつらと備忘録的に書き記したのでちょっとまとまりが悪いですが、何かの参考になれば幸いです
Discussion