ライブお絵かきの仕組み

Question

実現したいこと

ライブお絵描きの実現。。。
同時接続でのお絵描きがしたい。。。

考えてみたこと

1. CreateJSでお絵かきしたものを画像化してサーバに送りまくってそれっぽく見せる？
2. 何かライブラリがあるのか？ この時にCreateJSと出会いました。
3. Node.js系かな？

知識が乏しくまったく想像がつきません。。。
どうか私に知識を与えてください。。。

###　どうやって実現するのか

実現するのに必要な知識

参考になるサイト

どうか私に知識を！

Answer 1

ググったらサクッと出てくると思いますが、
HTML5のWebsocketを使ったお絵かきチャット

WebSocket
Canvas(CreateJSでもいい)
の知識が必要です

考え方は
１．何らかの描画をしたクライアントが描画命令をサーバーに送る
２．サーバーが受け取った命令を接続ユーザーに送る
３．命令をクライアントが命令通り描画させる
を繰り返すことになります
(途中で入ってきた人はどうするのかは作っていけばだいたい分かるかと)

Answer 2

絵は文字と違って1px単位にデータが発生するから、
キャンバスサイズが1000*1000だとすると100万、1ドット1Bとざっくり計算して1MB
有名絵師さんが絵を描くよ〜って1000人のユーザが押しかけると、絵師さんが線を1本引く度に1000人のユーザが1MBの画像をダウンロードするわけだ。

AmazonがやってるAWSというサービスは、ファイルのアップロードは無料だけど
ダウンロードに関しては従量課金だから3桁万円の請求を食らって死ぬ姿しか思い浮かばないね。

という訳で、多くのWebサービスをリリースしてきたようなプロが
数ヶ月スパンで悩みながら設計していく事になる難しい作業になるね。

---

質問文でCreateJSが出てきたのでCreateJSを使って設計していったとしようか。
線と塗りのページによると、円を描きたいならこんな感じのコードになる。

// シェイプを作成
var shape = new createjs.Shape();
// 線の色を指定
shape.graphics.beginStroke("DarkRed");
// 線の幅を指定
shape.graphics.setStrokeStyle(5);
// 円を描く
shape.graphics.drawCircle(0, 0, 80);

要するにだ、絵師がキャンバスでシュッと絵を描くような行動をすれば、
裏側ではこういう感じのコードが自動生成されて実行されるわけだね。

出来上がった画像ファイルをそのまま各視聴者へ送信はできない。

でもこのコードの文量自体はほんの数百Byteにしかならないんだ。
この自動生成されるコード部分をひっ捕まえてサーバーを経由して視聴者達のパソコンに転送する。
視聴者達は各自受け取ったデータを元に全く同じコードを実行してキャンバスをレンダリングする。

こういう発想ならば実現的なリソースで再現出来るだろう。
世のお絵描きチャットは大抵このような仕組みになっているはずだ。

もちろん、アンドゥ・リドゥが出来るローカルのお絵描きアプリも、
こんな疑似命令をバババっと保存しているから、高速にアンドゥ・リドゥが出来るわけで、
現状の画像データを何百枚単位で保持してるわけじゃない。

[
  {
    "type": "drawCircle",
    "size": 5,
    "position": {
      "x": 0,
      "y": 0,
      "z": 80
    },
    "color": "DarkRed"
  }
]

サーバとの送受信はJSONが多いから上記のような文字列に変換して、
各視聴者たちはこのコードをサーバから受け取ったら上記のJavaScriptコードを生成して実行する。

この辺の変換ロジックや疑似言語の設計は「お前が作るんだよ！」みたいな所があるから、
設計に慣れた凄腕エンジニアじゃないと紆余曲折はしょうがないだろうね。

---

Node.js系かな？

別にどれで作ってもいい。

ただ、Node.jsはWebSocketの仕組みのサービスを構築しやすいので、
リアルタイム性の高いお絵描きチャットを作るには優秀。

とはいえ、お絵かき配信くらいならば数秒のラグは許容出来るから、
PHPで各種命令をやり取りする仕組みを用意して、
JavaScriptから数秒おきにAjaxリクエストを飛ばすような設計にするだけで実装出来る。

Answer 3

Node.jsとsocket.ioを使って簡単なお絵かきチャットを作ったことがあります。
私の場合絵を描く部分はCanvasに素のJavascriptでゴリゴリ書いてた気がする
「お絵かき　チャット　実装」とかでぐぐるとたくさん情報出てきますよ。
最初ググるときは言語やフレームワークにとらわれずやりたいことを素直に検索するといいかもしれません。

https://ameblo.jp/aimhigh-1213/entry-12355529061.html
http://www.koikikukan.com/archives/2012/02/13-000300.php