【Antigravity】流行りのAIにタイムカードアプリを作らせてみた

はじめに

みなさん、初めまして。

タイムカード、切っていますか？

先日、フリーランスの友人からこんな頼まれごとをされました。

「タイムカードアプリ作ってくれ～」

急すぎでは？
なので、最近流行りのAntigravityを使って作らせてみました。

この記事は、Antigravity触ってみたいけどどうすればよいかわからない方、簡単にWEBアプリを開発してみたい方を向けです。

その備忘録と、WEBアプリ開発初心者がこの程度なら1時間でできるよ、ということをお伝えできればと思います。

自己紹介

※興味無ければ飛ばしてください。

現在24歳、新卒でゲームプログラマーとしてゲーム会社に就職。
言語経験はC#が10年程、C/C++は6年程です。
一応JavaScriptやHTML、Pythonなども知識はありますが、ちゃんと作れるほどではありません。
世代的にAIネイティブなのですが、日常的にAIは使っておらず、個人制作でのヘルプ程度にしか使っていません。
基本AIは信用しておらず、最終的には目視でコードチェックし、自分の手でデバッグしています。

WEBアプリケーション開発経験は皆無、今回の制作が初めてです。

こんなものを作りました

先んじて、結論として下記のものを作りました。

１日ごとに出勤・退勤を記録でき、出勤中に休憩時間を記録できます。
また、カレンダーから過去の勤怠記録を見ることができます。

このアプリの特徴は、「スタンドアロンかつ自分の記録しか見れない」ことです。

他人の記録を閲覧・管理するアプリやWEBツールは無く、単純に自分の勤怠を記録するだけに特化させました。

理由として、社会人からフリーランスになった友人が、自分の勤怠時間が単純にわからないので、記録して働いている時間を振り返りたいというオーダーだったので、それに沿った形ですね。

シンプルに勤怠記録を取りたい方がいましたら、ぜひ使ってやってください。

開発環境

Windows11
Antigravity 1.23.2
Node.js 142.0.7444.175

アプリ制作

まずは要件定義

アプリとして必要な機能はシンプルなので、要件は以下のようになりました。

【概要】
・iOSで動く
・スタンドアロン
・１日ごとに出社時間、退勤時間、休憩時間を記録する
・出社時間、退勤時間、休憩時間はカレンダーから見返すことが可能
・シンプルなデザイン

【画面構成】
・メイン
・カレンダー

【機能要件】
・１日ごとの出社時間の記録
・１日ごとの退勤時間の記録
・１日ごとの休憩開始～休憩終了までの経過時間の記録


これぐらいならちょっと勉強すれば作れそうな気がしますが、せっかくなのでAIに作らせてみます。

AIの選定

とは堅苦しく書きましたが、ちょうどGoogleからAntigravityがリリースされ、それが無料（プレビュー版のため）というじゃないですか。
丁度良いので試しに使ってみよう、というところからスタートしました。

今回使用したAIモデル
Claude Sonnet 4.6(Thinking)

実際に作らせてみた

Antigravityを起動したら、フォルダを作り新しいワークスペースを開きます。

そして、エージェントウィンドウに下記内容を打ち込みました。

iOS用タイムカードアプリを作ってください。

【概要】
・スタンドアロン
・１日ごとに出社時間、退勤時間、休憩時間を記録する
・出社時間、退勤時間、休憩時間はカレンダーから見返すことが可能
・シンプルなデザイン

【アプリ要件】
以下の画面で構成。
・メイン
・カレンダー

また、アプリ全体を通して以下の機能を持つ。
・１日ごとの出社時間の記録
・１日ごとの退勤時間の記録
・１日ごとの休憩開始～休憩終了までの経過時間の記録

【画面要件】
・メイン
ボタンが２つのみ。
ボタン１：出社・退勤を記録する
ボタン２：休憩開始・休憩終了を記録する

ボタン１は

はい、ミスって途中で命令を送ってしまいました。

文章が解読されると、AIからこんなメッセージが。

頭良ッ！！！
リアルに声出ました。

間違いないので、処理は止めずに完成まで続行しました。

数分後、アプリが完成しました。嘘でしょ？

すごいな...
しかも自動でデバッグまで行っていました。


ただ、これだといくつか問題がありました。

・WEBで動くものになっている
・現状PCのみ

このとき、AppStoreからインストールするものを予定していました。
しかしハードルとして、AppStoreの有料アカウントを用意し、Xcodeでコーディングし、Macでビルドする必要があります。
自分はそういった経験はなく、知見も無いのでとりあえず以下のようにAIに質問してみました。

iOSアプリとしてビルドできる？

以下の返答をもらいました。

なるほど...？PWAだと配布はできないがアプリ化はできるようです。（？）

PWA(Progressive Web Apps)とは

自分もよくわからず使ってしまいましたが、こういうものだそうです。

Webアプリケーションが持つべき特性を備えたアプリのこと。
レスポンシブデザインであり、オフラインでも動作可能で、プッシュ通知を送信できるなど、ネイティブアプリのような機能を持っています。

インストール不要で、ブラウザを通じてアクセスできるという特徴があります。これにより、ユーザーはアプリストアを介さずに、Webから直接アプリを利用することができます。

引用　https://ebisumart.com/blog/pwa/

これ、覚えがあります。
くらげバンチという漫画サイトが、こういった事ができたサイトでした。

ホームに追加を押しアプリ化するとこで、ブラウザアプリを経由せずに使えたことを思い出しました。
なるほどそれならやってみましょう。

WEBアプリケーション化をしてみる

iOSでもやるにはどうするか

ここでもAIに聞いてみます。知見無いので...

iOSにインストールするには？

「Netlify」というサイトでプロジェクトをデプロイ～公開までできるようです。
なんじゃそりゃ。聞いたこともないのですが、有名なのでしょうか。

...
...
...

むちゃくちゃ有名じゃん....
早速やってみます。

Netlifyでアプリケーション化する

アプリケーション化するため、プロジェクトをZip化します。
index.htmlやapp.jsが入ったフォルダを圧縮し、Zipファイル化しました。


次にアカウントを作ります。

作れたら、プロジェクト一覧画面のココにZipファイルをドラッグアンドドロップします。

勝手にデプロイされ、WEBアプリとして公開されました。


え、これだけ？


アクセスしてみると、本当に動いています。
一応AIにもデバッグさせてみます。

アップロード完了しました。
以下のURLで問題ないか確認してください。
https://sss-timecard.netlify.app

はい、1時間足らずでWEBアプリケーションとして完成しました。

ホームにアプリとして追加するには

iOSなら、以下の方法でできます。

1. Safariで https://sss-timecard.netlify.app を開く
2. 画面下部の 共有アイコン（□に↑）をタップ
3. 「ホーム画面に追加」を選択
4. 名前を確認して「追加」をタップ

Androidなら、Chromeを使うことで同じようにできます。

1. Chromeで https://sss-timecard.netlify.app を開く
2. 右上の ︙（3点メニュー） をタップ
3. 「ホーム画面に追加」をタップ
4. アプリ名を確認して「追加」をタップ

改善点

指示が最低限だったので、かなりアップデートの余地がありました。

・出勤→退勤したらその日はもう出勤できない
・記録が消せない
・休憩が0分だと、カレンダーにオレンジ点が出ない

動作不能や思ってたのと違うみたいな不具合は全く出なかったので、改善点としています。

終わりに

ということで、初心者ながら１時間もせずにWEBアプリケーションを公開するまでができました。
Netlifyもすごい良いサービスですね。無料ですぐ公開できるので、個人開発の範疇なら十二分に有効です。

一応、無料アカウントの制約を置いておきます。

・帯域幅が月100GBまで
・ビルド時間月300分

そこまでデメリットになりません。（急にタイムカードアプリが有名になってしまったら課金する必要がありますが...；；）

Github Pageも考えましたが、１アカウント１サイトのみで手間がかかるとのことだったので、今回は選択しませんでした。（帯域幅無制限は魅力的）


また、Antigravityも優秀です。
もともとVSCodeが元になっているので、導入もしやすくPluginなども流用できます。
Claude Sonnetも頭が良く、これぐらいの規模感をすぐに実現できるのはとても良いツールだと思います。
できる気になってはいけないとプログラマーの自分が囁いてくるので、このあと勉強します

拙い文章でしたが、いかがでしたでしょうか。
同じ規模感でしたら、同じ様に作れると思いますので、参考になれば嬉しいです。


それでは。




参考文献
・PWAとは？今さら聞けない特徴と導入時の注意点を解説
（https://ebisumart.com/blog/pwa/）

・極力無料主義！ Netlify・Vercel・GitHub Pages 比較（使用量上限・制限超過時や商用利用可否などの特徴まとめ）
（https://zenn.dev/benjuwan/articles/2e8324f77b1ed8）

・Netlify、Vercel、GitHub Pages の商用利用や使用量の上限を超えた時の情報をまとめてみた
（https://qiita.com/benjuwan/items/4a2f175b648791412203）