企画趣旨
生成AIを使ったサービス開発を題材に100日連続で記事を書こうシリーズ、9日目です。
これは2025/05/30ぶんの記事です。
今回の取り組み
前回、めでたくEV Charger-sanというサービスをVercelにデプロイしました。
その際、下記が課題となっていました。
- 英語表記
- 効果音など一切無いので操作感に乏しい
- ランキングがブラウザリロードで消える
それぞれ下記のように対応していきます。
- 日本語化
- 効果音の導入
- ランキングの永続化
ランキングの永続化にはデータベースを使用します。無料で使えるDBは色々ありますが、人気のsupabaseにしました。使ったことあるし。
やっていき
Google AI Studioで対応内容のプロンプティングをします。
先に言ってしまうと、supabaseとの接続でつまずきました。下記キャプチャには解決時のプロンプトがチラ見しています。
今回、フロントエンドのフレームワークはViteです。Google AI Studioが選びました。
でも上記のキャプチャに出ているとおり、Google AI Studioが推奨してくれた環境変数名はViteを想定してないんですよね (変数の接頭辞に VITE_ が必要)。この点の解消に30分くらい使いました。
こちらがsupabaseのダッシュボード画面です。スタイリッシュ。
high_scoresというテーブルにちゃんとデータが入っています。感無量です。
こちらはEV Charger-sanのタイトル画面。ランキングが表示されました。感動の涙で前が見えません。
こいつ…動くぞ！
画像からは全く分からないですが、効果音がぴこぴこ鳴っています。
まるでカジュアルゲームです。
2位にランクインしました。
賢い充電マン意外と強いな…
読者特典
EV Charger-sanで遊ぶことができます。
万が一個人情報を入れてしまったら教えてください。削除します。
また、改善要望などあればください。
不具合報告
- 同名で2回目以降プレイしたときに得点保存がされない？
- タイトル画面で縦スクロールができない😢
- ボーナス充電が嬉しくない。発生条件も謎
今回の気づき
データベースのように、外部接続するような場面ではシステムエンジニアの地力が試されるかもしれません。
Discussion