Asopitech With · デザインツール
Figma マルチプレイヤー with Alopex Chirps
Figmaのマルチプレイヤーは、デザインツールのFigmaで、複数の人が同じデザインを同時に編集できる仕組みです。これをAlopex Chirpsを応用して再現すると…？
更新: 2026/10/13
どんなサービスか
Figmaでは、同じデザインの文書を、複数の人が同時に編集できます。Figmaの技術ブログによると、クライアントはWebSocketでサーバーのクラスタにつながり、文書ごとに別のプロセスが動き、その文書を編集する全員がそこにつながります。サーバーは、オブジェクトのプロパティごとに最後に届いた値を持ちます。扱うデータは、文書のオブジェクトの木と、各人のカーソルと選択です。
通信の組み立て
- ノードのメンバーシップ：文書を受け持つサーバーをノードとしてメッシュに入れます。どのノードが動いているかを、gossipで全ノードが知ります。
- 編集の転送：別のノードにつながった人の編集は、その文書を受け持つノードへ、宛先を指定して送ります。
- カーソルの配信：カーソルや選択の位置は、古くなってもかまわない一時的な配信方式で送ります。編集の通信と分けて流れます。
- ノードの離脱：文書を受け持つノードが止まると、離脱のイベントが届き、別のノードで文書を開き直せます。
どの文書をどのノードが受け持つか、プロパティの値をどう決めるかは、アプリのコードです。
配置の形
サーバーの各ノードにChirpsを組み込みます。ノードどうしは、QUICと相互TLSでつながります。
Alopex Chirpsが合う理由
共同編集のサーバーは、確実に届けたい編集と、間引いてもかまわないカーソルの、性質の違う2つの流れを運びます。Chirpsは、配信方式を分けて送れ、ノードの増減もgossipで知らせます。
編集とカーソルを配信方式で分けてノードどうしに送れるAlopex Chirpsで、共同編集のサーバーを作ってみよう。GitHubのクイックスタートから始められます。