2025年8月 · Webプロジェクト
Draw Of The Day
5分で描く、1分で挑む、または2人で1枚を描く。最後には、作品を公開するか、自分だけで残すかを選べます。
- 担当
- プロジェクトリード・フルスタック開発
- 形式
- Web・ソロとデュオ
- 開発状況
- Webアプリ
- 使用技術
01プロジェクト
タイマーがゼロになる前に、1枚。
DRAWは1人で5分、BLITZは1分。DUOでは2人で同じ絵を5分間描きます。まず描き始めて、限られた時間でどんなものができるか楽しむ、シンプルな仕組みです。
最後に作品を残すか、ホーム画面で公開するかを選べます。ギャラリーでは作品をランダムに並べ、24時間表示します。画像にある「test」の絵は、主に動作確認に使ったものです。
使い方
- 01
選ぶ
DRAW、BLITZ、DUOから選ぶ。
- 02
描く
ツールを使い、時間内に描く。
- 03
共有する
プレビューして、公開するか決める。
- 04
見つける
作品を見て、いいねやお気に入りをつける。
02担当したこと
画面側も、サーバー側も。
プロジェクトとフルスタック開発を担当しました。描画画面、リアルタイムの共同作業、アカウント、作品管理を制作し、線を描く感覚も、その裏で動く仕組みも大切にしました。
画面と描画ツール
時間制限付きモードと、ツール、色、線の太さを選べる制作画面を開発しました。スマートフォンでも使えるようにしています。
2人で描く
DUOは描画をリアルタイムに同期します。片方が描くものをもう片方にも表示し、同じ5分の制限を共有します。
アカウントとデータ
メールとGoogleによる認証、プロフィール、公開、お気に入り、いいね、ダウンロードも担当しました。画面から、それを動かすロジックとデータまで扱うフルスタックのプロジェクトです。
03技術について
キャンバスの周りで動くもの。
HTML、CSS、JavaScriptに、Node.jsとFirebaseを組み合わせました。描画、セッション共有、保存データの取得に合う構成です。ほかのWebやモバイルのプロジェクトでは、PHP、Python、別のデータベースも使います。
絵ができて、届くまで
詳しく見る描く時間を選ぶ。
DRAWとDUOは5分、BLITZは1分。開始前に、モードで制限時間が決まります。
1人で、または2人で描く。
ツール、色、線の太さを選びます。DUOでは、絵をリアルタイムに共有します。
絵を見せるか決める。
公開前にプレビュー画面を表示します。時間が終わっても、自動でギャラリーに送られるわけではありません。
ほかの人の作品を見る。
作品を24時間表示するギャラリーです。いいね、お気に入り、ダウンロードができます。
モード選択からギャラリーまで、絵の流れをたどれます。
開発で選んだこと
公開するかは、自分で選ぶ
完成した絵を、毎回見せたいとは限りません。
プレビューと確認ボタンを設け、時間切れと公開を分けました。
お気に入りが消えたとき
作品の公開期間は短くても、お気に入りに追加されていることがあります。
作品が見られなくなった際、お気に入り画面に説明を表示します。理由の分からない空白にはしません。
04画像で見る
画面で見るプロジェクト。
5枚の画像クリックして拡大 ↗
開発中の画面です。「test」の絵がよく登場します。名前のとおり、テスト用でした。
セッションを選ぶ
ホーム画面の3つのモードと、ギャラリーへの入口。
描画スペース
キャンバスの周りにまとめたタイマー、ツール、色、線の太さ。
プロフィール
アカウントのカスタマイズと認証設定。
公開する前に
描き終わった際のプレビューと公開確認。
お気に入り
削除済みや表示できない作品を考慮した、空の状態の表示。
05振り返りとチーム
描くところから、共有まで。
描いたもの、相手に届くもの、アプリが保存するものまで、全体の流れを開発しました。アカウントやギャラリーも、キャンバスのツールと同じくらい大切な部分です。
実装したもの
- リアルタイムのデュオを含む3つのモード。
- 描画ツールとアカウント管理。
- 公開、いいね、お気に入り、ダウンロード。
現在の状況
- 画像は開発中のバージョンです。
- 現在、ポートフォリオから試せる公開版はありません。
DUOでは、描いた線を両方のプレイヤーに即時表示する必要がありました。アカウント、お気に入り、ギャラリーも担当しました。
このプロジェクトについて話してみませんか？
話してみる次の世界へ
