GoogleのAntigravityでwebアプリを作って公開してみた
とみます(@20tomimasu)です。
GoogleのAntigravityが使いやすいようで。
早速、試してみたところ…
ほへ、簡単にwebアプリができたんだけど。
しかもいい感じ。アプリ公開までのログを残しておきます。
Antigravityで作ったwebアプリ
人数と当選者数の入力
ルーレットを回しランダム抽選
当選発表時は、華やかに
という指示を与えた結果…
ね、良い感じじゃない?
見れているかな。
簡単に、抽選ルーレットのwebアプリができるのか…
いいね、このスピード感。
とりあえず、ここまでのやり方をログに残しておこう↓
Antigravityの始め方・初期設定・使い方
- AntigravityをPCに導入する。
- アプリで指示して、AIコーディング。
- githubで公開する。
以下、画像を用いて↓
↑アクセスし、Antigravityをダウンロードする。
↑セットアップを完了し、アプリを起動させる。
↑とりあえず、日本語のプラグインを導入。(結局、英語表示されるので、無くても良い。)
↑生成したコーディングの結果を確認するために、liveserverを導入する。
↑トップに戻って、プロンプト入力項目辺りを確認していく。
Fastで、Gemini 3Pro。
↑とりあえず、抽選ルーレットを作るように指示すると、数十秒で、コーディングが完成。
いいよー、このスピード感。
右下の Go Liveを選択し、実際の動作を確認する。
うん、問題なし。
このままだと、ローカルなので、
どうやって、webで共有できるのだろうか?
Geminiに聞きながら進めていく↓
githubを使って公開する方法
↑久しぶりに、githubにログイン。
まずは、レポジトリーを新規に作る。
次に、ウェブブラウザにファイルをアップロードしていく。
さっき生成したファイルが、指定したフォルダの中にあるので、
- index.html
- style.css
- script.js
を、まとめてアップロードする。
↑Settings → Pages →Branchはmain → Saveで、新規にページ(URL)が公開された。
このURLがあれば、皆に共有できるね。
githubの注意点としては、
ソースコードも公開されるので、
機密情報などは扱わないようにしよう。
まあ、ちょっとしたwebアプリを作って共有するには、これで十分かと。
ちょっとしたwebサービス開発も視野に入れていければ。
おわりに
以上「GoogleのAntigravityでwebアプリを作って公開してみた」でした。
生成AIで、画像も、動画も、アプリも作れてしまう時代。
あなたは何を作る?
引き続き、生成AIを駆使して、マネタイズ方法も実践していければ。
それでは、また。
ようこそ! とみますん家へ (Discordコミュニティ)
・これまで発信してきた内容について、質問したい方
・気楽に相談したい方
・私への仕事依頼や共同コラボを考えていて、事前に検討したい方
・ちょっと様子を見たい方
を対象に、無料オンラインコミュニティを開設しました。
Discord(ディスコード)と呼ばれる、チャットコミュニティを利用しています。
現在注力しているテーマ↓
■3Dプリンターを使ったスモールビジネス、物販やMakerWorldの攻略。私が手掛けているブランド名やアカウントを共有しています。
過去↓
■投資 | 不動産・DIY / 日経225オプション取引 / テクニカル分析/ 米国株
■暗号資産・NFT | walk to earn / play to earn / cryotoニュース/ NFTの宣伝など
■AI・創作 | AI・ツール (FlikiやPictoryAIの公式ブログ更新通知など)
など。
主にブログ執筆前の情報収集、実践、分析、フィードバックを繰り返し、練度を高めています。
お気軽にどうぞ。