1時間で展示会用アプリ作成、Antygravityの並走でアプリ開発からブログまで

バイブコーディングでAIイラスト展示会アプリ制作記：Supabaseスライドショー

AIイラストを登録するだけで、展示会場で自動的に30秒サイクルでスライド表示してくれる「展示会特化型アプリ」を制作しました。

今回はAIエージェント「Antigravity」とペアプログラミングを行い、技術選定の変更や環境構築のトラブルを乗り越えた過程を記録します。

開発の目的

建前

- 展示会場で、登録されたAIイラストを30秒ごとに美しくループ再生する。

- 誰でもその場で新しいイラストを追加（最大5MB）でき、即座にスライド列に加わる。

- ダークでスタイリッシュな、展示会の雰囲気を壊さないUI。

本音
展示会開いたけど、周知ほとんどしてない方暇ー。
そうだ、1時間で開発しちゃえ

🛠️ 技術スタック

- Frontend: HTML, Vanilla CSS, Vanilla JS (ES Modules)

- Backend: Supabase (Database & Storage)

- Design: ダークモード・グラスモフィズム（透過デザイン

🚀 開発ログ：AIエージェントとの試行錯誤

1. 突然のバックエンド変更

当初はFirebaseで設計していましたが、制作途中で「Firebaseの枠がないのでSupabaseにしたい」というリクエストに変更。

AIは即座にコードを書き換え、Supabase向けのロジックを提供しました。

 2. 🔰 初心者必見！Supabase設定の並走トラブルシューティング

ここが今回の開発のクライマックスでした。コードは合っているのに動かない、という「Web開発あるある」をAIと一つずつ解消していきました。

 ① APIキーの貼り付けミス (Invalid Compact JWS)

- 状況: 設定したはずのAPIキーがコード内でデフォルトのままだった。

- 解決: `app.js` の変数にSupabaseから取得した `anon` キーを正しく貼り付け。

② 「入れ物」がない問題 (Bucket not found / 404)

- 状況: コードはアップロードしようとしているが、Supabase側にテーブルとバケットがなかった。

- 解決: SQL Editorでテーブル作成コマンドを実行し、Storageに `artworks` バケットを手動作成。

 ③ セキュリティの壁 (RLS Policy)

- 状況: バケットは作ったが、書き込み権限がなくて弾かれる（new row violates row-level security policy）。

解決方法:

  - Database: `exhibition` テーブルに対して全員（anon）の `SELECT` と `INSERT` を許可するポリシーを追加。

  - Storage: `artworks` バケットに対して全員の `SELECT` と `INSERT` を許可し、バケット自体を「Public」に設定。

🎨 こだわりのUI設計

展示会という舞台に対応するため、UIには以下のエッセンスを加えました。

- 30秒の視覚化: 画面下部に青いプログレスバーを配置し、あと何秒で画像が切り替わるかを直感的にわかるようにしました。

- スムーズなフェード: 画像が切り替わる際、一瞬暗くなってから次の画像が浮かび上がる心地よいトランジション。

- 操作を邪魔しない登録画面: 登録ボタンは右下にフローティング配置し、メインのスライドショーを主役に。

💡 開発後記

今回の開発では、AI（Antigravity）がコードを書くだけでなく、「今どのサーバーエラーが出ているか」をログから読み取り、Supabase管理画面での具体的な操作手順をガイドするという並走スタイルが非常に強力でした。

特にプログラミング初心者の方にとって、バックエンドの設定（RLSやバケット権限）は大きな壁になりがちですが、AIと相談しながら「一つずつエラーを潰していく」ことで、短時間で実用的なアプリを完成させることができました。

裏話

実は↑の殆どは私とAntygravityのやり取りから、Antygravityにblog.mdとして出力させたものです。
恐らくバイブコーディングでフロント実装だけをしている人なら、エラーの見方も分からないでしょう。
Antygravityではエラーの内容をコピペすればエラーを理解する。バックエンド連携が出来るので、こちらでリポジトリ作成するだけでなくsupabeseで叩くコードまで準備してくれます。
AIエージェントツールと言われる所以がこの部分です。
最後に今回私の出した最初のPromptです。

Javascriptを使うことで、最後の数字まで行けば0に戻る。このロジックさえ分かれば、指示も一層明確ですよね。
こちらのスライドアプリ、展示会終了後、正式公開しますね。
もし、今見たい人がいましたら、本日20時まで展示会してますので。