Day 26。今回はコラボレーション的なもの、みんなでリアルタイムに一緒に創作できるものを作りたかった。だからピクセルアートキャンバスにした。
プロンプト#
出発点はシンプルだった：
「複数のユーザーがリアルタイムで一緒に描ける共同ピクセルアートキャンバスを作って。」
どうやって作ったか#
Watchfireがこれを13のタスクに分解してくれた。1日プロジェクトにしてはかなり多い。でもピクセルアートエディタって、みんなが期待するツールを全部考え出すと、意外と動く部品が多いんだよね。
最初のいくつかのタスクは基盤作り：Firebase Realtime Databaseを使ったキャンバスの同期設定、選択可能なグリッドサイズ（16x16、32x32、64x64）の追加、カスタムカラーピッカー付きの32色パレットの構築。そこから実際の描画ツールに分岐：ペン、消しゴム、塗りつぶし。
そしてどんどん続いた。アンドゥ/リドゥのサポート。ミラーデザインを作るためのシンメトリーモード。四角形と直線のシェイプツール。調整可能なブラシサイズ。毎回ゼロから始めなくていいキャンバステンプレート。キャンバスがどう描かれたかを再生するタイムラプス機能。他のユーザーが何をしているか表示するアクティビティフィード。領域を移動・コピーするための選択ツール。前景と背景レイヤーの2レイヤーシステム。そして最後に、様々なサイズのPNGとしてアートを書き出すエクスポートオプション。
13タスク。これはフル機能のドローイングアプリケーションだ。
完成したもの#
ランディングページからもう雰囲気が出ている。スターターテンプレート（ハート、剣、スマイリー、木）と、他のユーザーが作った最近のキャンバスのギャラリーが表示される。どれにでも飛び込めるし、ゼロから新しいのを作ることもできる。
上部にはフルツールバー：ペン、消しゴム、塗りつぶし、直線、四角形、円、選択ツール。左側にはカスタムピッカー付きの展開されたカラーパレット。右側には前景と背景レイヤーのレイヤーパネルがあり、それぞれ表示/非表示の切り替えができる。
描き心地はレスポンシブ。各ピクセルのクリックはFirebaseを通じて同期されるので、同じキャンバスURLにいる人は変更を即座に確認できる。グリッド線が正確さを保つのに役立ち、ズームレベルは異なるグリッドサイズでもうまく調整される。
タイムラプス機能は、ここまでうまく動くとは思わなかったものの一つ。すべてのピクセル配置を記録し、描画プロセス全体を最初から最後まで再生できる。再生コントロールと速度オプションもある。
複雑な作品がピクセルごとに組み上がっていくのを見るのは、不思議と気持ちいい。他の人がどうやって絵に取り組んでいるかを見る良い方法にもなる。
エクスポートダイアログにはちゃんとしたオプションがある。透過背景を設定でき、複数の出力サイズ（1x、2x、4x、8x）から選べて、PNG、SVG、またはクリップボードに直接コピーとしてエクスポートできる。ピクセルアートツールとしては、拡大機能が内蔵されているのは重要。16x16のPNGを実寸で欲しい人なんていないからね。
テンプレートはナイスな機能。このハートテンプレートはプリロードされているので、ゼロからアウトラインを描く代わりに、すぐにディテールやシェーディングを追加し始められる。2レイヤーシステムのおかげで、テンプレートを背景レイヤーに置いたまま、ベースの形を崩す心配なく前景に描ける。
ホームページの最近のキャンバスセクションは、コミュニティギャラリーのような役割を果たしている。他の人が作ったものを見ることができ、各キャンバスにはグリッドサイズが表示される。ハート、顔、剣、木…みんな自然と同じようなピクセルアートの題材に惹かれるんだよね。
バグレポート#
テスト中に遭遇した主な問題：
- 大きなグリッド（64x64）での塗りつぶしは、変更されたピクセルを個別に同期すると重く感じることがあった。バッチ更新が必要だった。
- シンメトリーモードは最初、偶数のグリッドサイズで正しく整列しないことがあった。
- モバイルでのタッチ描画は、描こうとしている最中にページがスクロールしないようにする調整が必要だった。
- レイヤーの切り替えが視覚的にわかりにくく、気づかないうちに間違ったレイヤーに描いてしまいやすかった。
数字#
- Watchfireタスク13個 初期キャンバスからエクスポートオプションまで
- 3つのグリッドサイズ すべてでリアルタイム同期
- 32色パレット ＋カスタムカラーピッカー
- 8つの描画ツール シェイプと選択を含む
- 2レイヤーシステム 独立した表示/非表示機能付き
- Firebase Realtime Database がすべてのコラボレーションを処理
試してみて#
キャンバスを作ってリンクをシェアしよう。URLを知っている人なら誰でも一緒に描ける。
Day 26の評価#
ピクセルアートキャンバスってシンプルに聞こえるけど、レイヤー、シンメトリー、テンプレート、タイムラプス、リアルタイムコラボレーションを加えると、本格的なクリエイティブツールになる。
Firebase連携がすべての中核。すべてのピクセル変更がRealtime Databaseを通るので、複数の人が本当に同じキャンバスに同時に描ける。ポーリングなし、更新ボタンなし、ただライブアップデート。13のタスクすべてが、たった1つのプロンプトからまとまりのあるものに仕上がった。
AsepiteやPiskelの代わりになる？ならない。でも手軽な共同ピクセルアートセッションには十分使える。そしてタイムラプス再生だけでも試す価値がある。空白のグリッドが1ピクセルずつアートに変わっていくのを見るのは、本当に楽しい。
これは30 Days of Vibe Codingの26日目です。AIアシストコーディングを使って30日間で30プロジェクトを出荷する様子をフォローしてください。
