落書きシティ

落書きしかできないくらいシンプルなお絵描きチャットです。 ちょっとしたお遊びや概念説明時の図解に使えます。

• URLによる共有 — 簡単に他人に共有できます。
• ユーザー登録不要 — 共有相手が初めてでもすぐ使えます。
• シンプルなUIと機能 — ホワイトボード並のシンプルさ、迷い少なめ。

落書きシティというドメインからアプリを開けます。
https://rakugaki.city/

セットアップ方法

このプロジェクトでは、パッケージマネージャとしてpnpmを使用しています。 pnpmがコンピュータにインストールされている状態で、以下を実行すればセットアップと起動ができます。

# 依存関係のインストール
$ pnpm install --frozen-lockfile

# 開発サーバーの起動
$ pnpm run dev

設計

用語:

• パス（Path）
  キャンバスに描いた線。ペンを下ろして動かし、上げるまでの一筆書き単位。 線の最初から最後を経由する飛び飛びの座標を持つ。（マウスカーソルの移動で追跡できる範囲）
• スタック（Stack）
  キャンバスに描かれている線（パス）をまとめた配列。配列の中身は描かれた順で並ぶ。
• 部屋（Room）
  絵チャの部屋。CloudflareのDurable Objectで表現され、スタックを持つ。 クライアントが加えた変更は、Durable Objectにより他のクライアントに配信される。

機能の実装方法:

• ペン
  パスを作ってスタックに追加する。
• 消しゴム
  白色のペンと同じ。
• Undo（「元に戻す」）
  ちゃんと元に戻すわけではなく、スタックの最後のパス（直近で描かれた線）をスタックから消し、 キャンバスを全消ししてスタック内のパスを最初から最後まで再描画する。 （この仕組みなら、消しゴム機能の中身が白色のペンでも問題ない。）
• リセット
  キャンバスをリセットして、スタックを削除する。

謝辞

このプロジェクトでは、キャンバスのズームなどにPanzoomを使用しました。 アイコンにはLucideを使用しました。

また、以下の文献を参考にしました。ありがとうございます。

• https://github.com/cloudflare/workers-chat-demo/
• https://blog.mooriii.com/entry/hono-durable-objects-tldraw
• https://zenn.dev/mizchi/articles/cf-worker-for-pro-day2

ライセンス

このリポジトリはGNU General Public License v3.0 or laterの下で公開されています。