Zenn
🎆

CursorとSupabase MCPの組み合わせでハッカソンの開発ログを爆速化！AI駆動開発賞を獲ったプロンプト術

に公開
AI
ハッカソン
Supabase
プロンプト
Cursor
tech

はじめに

先日、Findy様とAI駆動開発コミュニティ様が共催する「ゆるVibeCodingハッカソン」に参加してきました。この記事では、AIペアプログラミングツールであるCursorを活用した「Vibes Coding」という開発スタイルで、どのようにチーム開発を進めたのか、そしてその過程で得られた学びを共有します。Vibes Codingでのハッカソン参加を考えている方の参考になれば幸いです。

開発したものについて

今回のハッカソンで私たちが開発したのは、「🎆 Sky Canvas - 空に描く、あなたの創造力」というWebアプリケーションです。GitHub Repository

コンセプト：Vibes = 花火 = 音

「Sky Canvas」は、スマホのセンサーでユーザーの感情（Vibes）を読み取り、それをリアルタイムで美しい花火として大画面に可視化する体験を提供します。「音楽・視覚・触覚」が融合した、全く新しい表現の形を目指しました。

プロダクト概要

  • 役割分担: ユーザーはスマホでセンサー操作を行い、その結果がディスプレイに花火として映し出されます。
  • リアルタイム性: スマホを振ったり傾けたりすると、その動きがSupabase Realtimeを通じて即座にディスプレイに伝わり、p5.jsで描画された花火が打ち上がります。
  • 共同体験: 複数人が同時にアクセスし、それぞれの「Vibes」を融合させた集合的な花火アートを創り出すことも可能です。

技術スタック

  • フロントエンド: Next.js (TypeScript), p5.js, WebGL
  • バックエンド: Supabase (PostgreSQL, Realtime)
  • 利用API: DeviceMotion API, DeviceOrientation API, Web Audio API など

ありがたいことに、このプロダクトはハッカソンでAI駆動開発賞を受賞することができました。

Vibes Coding の実践：私たちの進め方

Cursor ではタブを開くことができ、複数の処理を並行で実行することができます

フェーズ1. アイディア出し

アイディアは行きの電車の中で、Gemini と一緒にまとめました。
今回のイベントの情報を渡しつつ自分がビビッとくる単語をいくつか提案を依頼します。

アイディアを発散させたいです！
箇条書きで関係しそうなワードを列挙してください。
今のシーズンは夏です

はい、アイデアを発散させるためのキーワードを列挙します！
「Vibe Coding」「生成AI」「スマホセンサー」「夏」「驚き」を掛け合わせたキーワードを考えてみました。
#### **【夏の要素】**
* 海、波、水、プール
* 花火、祭り、盆踊り
* 夏休み、旅行、冒険
#### **【スマホセンサー】**
#### 【生成AIの能力】
#### 【Vibe Coding / 体験 / 驚き】

Vibe Coding のハッカソンなので、自分がワクワクする内容だけを抽出しました。
アイディアの掛け算をすることで、考えているアイディアを具現化できます。

花火、GPS、リアルタイム、多感覚融合、ランダム性、遊び心、魔法
辺りから企画を考えてほしいです

企画名：「Sky Canvas - 傾けて描く、夏の夜空の魔法」
コンセプト
ユーザーがスマホを傾ける動作をトリガーに、リアルタイムでディスプレイ（大画面）に花火が打ち上がり、その花火が多感覚な表現（音、光、バイブレーション）としてランダムに生成されるインタラクティブアートシステム。まるでスマホが魔法の杖になり、夜空（ディスプレイ）に遊び心あふれる魔法の絵を描くような体験を提供します。

アイディアが固まってきたところで、また違うアイディア、切り口を考えてと依頼します。
アイディアを作って、壊してをすることで、より質の高いアウトプットになります。
AI を活用することで、提案を精査することに集中できていい体験ですね。

フェーズ2.1. 企画

要求（したいこと）と要件（どう実現するか）をまとめます。
新しいチャットにしたときに、この要求と要件を渡すことっで、今回の企画の意図を一致させることができます。
アジャイルでいうところのいつでも立ち戻れる。インセプションデッキのような役割です。

要求

ブレイクダウンして考えることが大事です。
実際に何のためにしたいのか、それはどのような点だと嬉しいのかを具体的に表現をします。
1階層、2階層と AI に依頼しつつ、レビューに入ったのですが、概ね期待通り企画案になりました。

# Sky Canvas - やりたいこと

## 1. ユーザー体験のゴール

私たちは、以下のような魔法のような体験を作り出したいと考えています：

### 1.1. スマホを魔法の杖に
- 傾ける角度や動きによって、花火の打ち上がり方を変えたい
  - ゆっくり傾けると小さな花火
  - 素早く傾けると大きな花火
  - フリック操作で特殊な花火

## 2. 技術的なゴール
- 音楽もAIで生成して、花火と同期させたい
  - リアルタイム音楽生成
  - 花火との同期制御
  - 雰囲気に合わせた音楽生成

## 3. ハッカソンでのゴール
### 3.1. インパクトのある体験
- 3分のデモで審査員を「おお！」と言わせたい
  - デモシナリオの作成
  - 見せ場の設定
  - スムーズな操作感

要件

要件では、具体的にどう実現するかを考えます。
どのような技術を使うのか、どのような流れになるのか。
一部の技術だけでなく、全体の技術を理解した上で、 AI に依頼できるようになりました。

## 1. システムアーキテクチャ
## 2. 機能仕様
## 3. 非機能要件
## 4. 開発環境・ツール
## 5. デプロイメント

中では、mermaid 記法などを利用し、人間が認知しやすい状態にして管理します。

要件をもとにそれぞれの技術を列挙します。列挙した各技術に対して、技術調査のドキュメントの作成を依頼します。
依頼することで、必要なことがあれば RAG として、Cursor に情報を渡せます。また人がキャッチアップするためにも大切ですね

docs/07-01-tech-stack-React.md
docs/07-02-tech-stack-Three-js.md
docs/07-03-tech-stack-Supabase.md
docs/07-04-tech-stack-TypeScript.md
docs/07-05-tech-stack-DeviceOrientation-API.md
docs/07-06-tech-stack-Vibration-API.md
docs/07-07-tech-stack-Web-Audio-API.md
docs/07-08-tech-stack-WebGL.md
docs/07-09-tech-stack-Supabase-Client-SDK.md

ドキュメントは 11-xxxxx.md としてナンバリングしてまとめていました。
00-11-xxxxx.md のように、カテゴリ-ナンバリング のようにした方が後から関連情報を追加しやすですね。

フェーズ2.2. PoC

企画と同時並行として、技術的に可能であるかを確かめます。
今後パソコン版とスマホ版で、UIを分けることを決めていたので、共通で利用する箇所に関して PoC 早めに検証を行いました。
最初は Three.js で試してみたのですが、うまく行きませんでした。
p5.js のサンプルコードを見ると、実現したい資料があったので、そのままリンクを貼って、 Cursor にコードの記述を依頼しています。

Three.js 版

修正のプロンプト

今まで Three.js で調査をしてきましたが、p5.js でお願いしたいです。
一旦下記のリンクをまとめて　./docs/14-p5.js でまとめてください

https://koro-koro.com/p5js-firework/
https://editor.p5js.org/natunya1105/sketches/qBmciCxhh
https://qiita.com/tommy1038/items/31e75582156974439f54
https://future-coders.net/p5jsで花火/

p5.js 版

フェーズ3. 開発

とにかくがんばる。Cursor を信じてタスクを依頼します。
また、同じことを伝えても動作が変わらない場合については、新しいチャットを起動し、要求、要件のドキュメントを渡し、リフレッシュした状態で依頼をします。

フェーズ4. 作り込み

今回のハッカソンで一番評価されたポイントは、完成度の高さ。
作り込みがうまくできていたのです。
花火の音とリアルタイムでの体験の紹介します。

✅ ポイント1. 花火の音

まず、花火の音です。これは企画段階から実現させたかった機能の一つです。
効果音ラボ 夏らしい音楽[1] から利用させていただきました。

花火が打ち上がるタイミングで花火の効果音を出したいです
sounds.mp3 を利用してください
発火するタイミングと音声が終わるタイミングを合わせて欲しいです

今回のハッカソンで、一番驚いたのが Cursor が音声ファイルを認識。秒数計算を行い音ハメを自動で実装したことです。この処理が1分以内で完了してしまいました。

ユーザーは花火の発火タイミングと音声が終わるタイミングを合わせたいと言っています。これは、花火のビジュアルエフェクトが完全に終わった時点で音声も終わるように同期させたいということですね。
これを実現するには、以下の方法が考えられます：
音声の長さを調べて、花火のライフスパンと合わせる
花火の完了タイミングを検出して、音声を停止する
音声の長さに合わせて花火のライフスパンを調整する
まず、現在の花火のライフスパンがどの程度かを確認し、音声ファイルの長さと比較する必要があります。
P5Fireworksコンポーネントでは、Particleクラスのlifespanが255から始まって、毎フレーム減少していきます。フレームレートは50fpsに設定されているので、255/50 = 5.1秒程度で花火が完了すると推定されます。
音声ファイルの長さを確認し、花火のライフスパンか音声の再生時間を調整する必要があります。
まず音声ファイルの長さを確認してみましょう。
実際にCursorが実行したログ

花火の発火タイミングと音声の長さを同期させるために、まず音声ファイルの長さを確認しましょう。

ffprobe -v quiet -show_entries format=duration -of csv=p=0 mobile/public/sounds.mp3

ffprobeが利用できないので、Web Audio APIを使って音声の長さを取得し、花火のライフスパンと同期させる実装を行います。

まず、displayページで音声の長さを取得し、それをP5Fireworksコンポーネントに渡すように修正します。

次に、花火イベントを作成する際に音声の長さを含めるように修正します。

フォールバック用の花火イベントにも音声の長さを追加します。

P5Fireworksコンポーネントに音声の長さを渡すようにJSXを修正します。

次に、P5Fireworksコンポーネントを修正して、音声の長さに基づいて花火のライフスパンを調整します。

Particleクラスのコンストラクタを修正して、音声の長さに基づいてライフスパンを調整できるようにします。

Read file: mobile/components/P5Fireworks.tsx

Fireworkクラスを修正して、音声の長さに基づいて花火のライフスパンを調整できるようにします。

Fireworkクラスのコンストラクタ内で音声の長さを保存します。

explodeメソッドを修正して、音声の長さに基づいてライフスパンを計算するようにします。

P5Fireworksコンポーネントで新しい花火を作成する際に、音声の長さも渡すようにします。

fireworkEventから花火を作成する部分を修正します。

カスタムイベントで二次爆発を作成する部分も修正します。

最後に、Particleクラスのupdateメソッドで、音声の長さを考慮した減衰率を適用するように修正します。

花火の発火タイミングと音声の終了タイミングを同期させる実装が完了しました！

実装内容

  1. 音声の長さを動的に取得

    • loadedmetadataイベントを使用してsounds.mp3の長さを自動取得
    • 音声の長さはコンソールに出力されるので確認可能

  2. 花火のライフスパン調整

    • 音声の長さ（秒）× 50fps = 花火のライフスパン
    • 二次爆発は音声の長さの40%で設定

  3. 同期の実現

    • 花火イベントにaudioDurationを追加
    • Fireworkクラスで音声の長さを受け取り、適切なライフスパンを計算
    • 花火が完全に消えるタイミングと音声が終わるタイミングが同期

動作詳細

  • 音声の長さが3秒の場合: 花火のライフスパンは150フレーム（3秒×50fps）
  • 音声の長さが5秒の場合: 花火のライフスパンは250フレーム（5秒×50fps）
  • 二次爆発: メインの花火の40%の長さで設定

これで、花火が打ち上がってから完全に消えるまでの時間と、音声が再生されてから終了するまでの時間が完全に同期されます！

docs/19-xxx.md に情報をまとめてください

花火効果音実装について、docs/19-fireworks-sound-implementation.mdに詳細なドキュメントを作成しました。

✅ ポイント2. QRコード

もう一つの作り込みポイントが、会場で参加者、審査員の方々に試してもらうためのQRコードです。こちらもサクっと実装が完了しています。
ただ、右上に出す調整が難しく、新しいチャットに対応を引き継ぎました。

デスクトップページに スマホページへアクセスする QR コードを作成できますか？

QRコードライブラリをインストールしてから、displayページに追加しましょう。

...

それでは、開発サーバーを起動して動作を確認しましょう。

おわりに

最後のアウトプット

会場の雰囲気

今回のハッカソンでは Cursor と Supabase MCP 利用し開発を行いました。開発者体験はとてもあがっています。今回のハッカソンでは、チームがなく、AIと人がタッグを組んで個人で頑張るスタイルでした。

学び

Vibe Coding では、AI に全てお任せではなく、人間がどう実現したいかゴールの言語化が重要なことがわかりました。人同士の開発と同様に AI との開発でもドキュメント化して伝えることの大切さがわかりました。

このブログを書いている途中に AWS の Kiro がリリースされました。言語化、フェーズを分けた方が生産性高く開発できるのかなーとモヤモヤしていた部分は一部証明された気持ちです。

Cursor のタブを使って、企画とPoC、デスクトップとスマホ版を並列で進めていたのですが、やはり脳のリソースが持っていかれます。
脳の使い方のトレーニングの部分なので、これからも鍛えていきます💪💪

今回イベントを企画いただいた Findyさん AI駆動開発さん ありがとうございました。1日で自分がしたいものが形になる体験。実務でも活かせそうなAI開発の進め方を学ことができました。

最後まで読んで、よかったら ❤️ お願いします！

Discussion