Day 20。グループのみんなが画像やリンク、メモを壁にぶん投げて、何がハマるか見る――そんな共有キャンバスが作りたかった。文字通り。
プロンプト#
「コラボレーション型ムードボードアプリを作って。リンクを知っている人なら誰でも、画像やテキストメモ、リンクを共有キャンバスにピン留めできる。リアルタイム同期、匿名認証、自由配置レイアウトで。」
これが出発点。Watchfireがこれを7つのタスクに分解して、基本的なFirebaseバックボーンからフル機能のコラボレーションピンボードまで仕上げてくれた。
どうやって作ったか#
7つのタスク、それぞれが新しいピースを重ねていく：
- Firebaseリアルタイム同期を土台に
- 3種類のピン：テキスト付箋、画像アップロード、OGプレビュー付きリンクカード
- キャンバス上でピンをドラッグして配置
- ピンの色タグで視覚的にグルーピング
- ズーム＆パン、ピンのリサイズでキャンバスを自在にコントロール
- ボードロック機能で作成者が読み取り専用に固定可能、PNG書き出しも
- カーソルプレゼンスで他の人がどこにいるか見える、さらにビジュアルリデザインも実施
この進め方は理にかなっている。ピンが存在しないとドラッグできないし、コアのインタラクションが動かないうちにビジュアルの仕上げを心配しても仕方ない。
できたもの#
これは最初からしっくりきた。
ランディングページでトーンが伝わる。 大きなロゴ、背景に散らばったサンプルピン、ボードを作るボタンが1つ。サインアップなし、アカウントなし、摩擦ゼロ。「Create New Board」をクリックすればすぐ始められる。
新しいボードは真っ白なキャンバス。 ダークな背景にさりげないドットグリッド。ツールバーは最小限で、右上にロック、エクスポート、共有URLのコピーだけ。右下のフローティングアクションボタンでピンタイプの選択が開く。
3種類のピンで基本をカバー。 テキストは付箋用、画像はアップロード用、リンクはURLカード用。プラスボタンを押して、タイプを選んで、キャンバスにドロップ。リンクを知っている人なら説明なしで使えるくらいシンプル。
付箋は本物の付箋みたいに見える。 少し傾いた紙のような質感がある。好きなテキストを入力して、色を選んで、好きな場所にドラッグ。ダークなキャンバスの上のピーチカラーは、思いのほかいい感じ。
画像アップロードはストレート。 モーダルが表示されて、ファイルを選ぶと、Firebase Storageにアップロードされる。画像はキャンバス上のピンとして表示され、他と同じようにドラッグやリサイズができる。
全部混ぜると、本物のムードボードっぽくなってくる。 画像、付箋、サイズもいろいろ。ドラッグして配置を試行錯誤できる。フリーフォームキャンバスだからグリッドに縛られず、オーガニックなコラージュ感が出る。
リンクカードはOGメタデータを取得する。 URLを貼ると、タイトル、説明文、プレビュー画像を取ってきてくれる。WatchfireカードもBlowfishカードもOpenClawカードも、ブランディングそのままできれいに表示された。生のURLを貼るよりはるかに見栄えがいい。
バグレポート#
リアルタイムコラボレーションにはエッジケースがつきもの：
- 複数ユーザーが素早く動くと、カーソルプレゼンスがたまにちらつく
- かなり大きな画像をアップロードすると、読み込み完了までキャンバスがもたつく
- PNGエクスポートが、ビューポート中心から遠いピンを拾い損ねることがある
体験を壊すほどではないけど、本番利用前にはきれいにしておきたい系のポリッシュ課題。
数字で見る#
- Watchfireタスク7つ Firebase設定からビジュアルリデザインまで
- Firebaseスタック： 匿名認証、リアルタイム同期用Firestore、画像アップロード用Storage
- Next.js 15 + Tailwind CSS 4 フロントエンド
- html2canvas PNG書き出し機能用
- ピンタイプ3種： テキスト、画像、リンク（OGプレビュー付き）
- コラボ機能： リアルタイム同期、カーソルプレゼンス、ボードロック
試してみて#
ボードを作ってリンクをシェアしよう。誰でもピン留めできるよ。
Day 20の評価#
チャレンジの3分の2が終了。Day 10はコラボ機能なしのMiroクローンだった。Day 20はフルリアルタイム同期のムードボード。これは進歩を感じる。
Firebase連携がこれを成立させている。匿名認証があるからボード参加のハードルがゼロ。Firestoreのリアルタイムリスナーのおかげで、ピンが全員に瞬時に表示される。カーソルプレゼンスがあるから、誰かが一緒にいることが分かる。こうした機能が、ソロキャンバスを共有スペースに変える。
一番驚いたのはリンクカードだった。URLを貼ると、サイトのブランディングや説明文、プレビュー画像付きのきれいなカードが表示される。この一機能だけで「付箋を貼る場所」から、プロジェクトのリファレンスを集めて共有するのに実際使えるツールに変わった。
リアルタイムコラボレーションアプリにしては、7タスクはタイトなスコープだった。でもそれぞれのタスクが前のタスクの上にきれいに積み上がって、最終的なプロダクトはまとまりがある。Day 20にしては悪くない。
これは30 Days of Vibe CodingのDay 20です。AI支援コーディングで30日間に30プロジェクトを出荷する挑戦を追いかけてね。
