リアルタイム協調編集とは

リアルタイム協調編集により、複数のユーザーが同じドキュメントを同時に編集でき、各ユーザーの変更が他のすべてのユーザーに即座に表示されます。初期のシステムは Operational Transformation (OT) を使用していました。これは競合する編集をその場で並べ替える技術ですが、OT ではすべての変更を仲裁するために中央サーバーが必要です。Yjs のような最新のシステムは Conflict-free Replicated Data Types (CRDTs) を使用します。これは任意の 2 つのレプリカをどの順序でもマージでき、常に同じ結果に収束する数学的フレームワークであり、誰が「勝つ」かを決定する中央の権限を必要としません。

CRDT はオフライン編集を自然にします。ユーザーは接続が切れていても編集を続けることができ、再接続時に変更がクリーンにマージされます。これが CRDT 上に構築されたリアルタイム協調エディターが瞬時に感じられる理由です。編集はまずローカルで適用され、その後ピアに同期されます。サーバーへのラウンドトリップを待ってから画面に表示されるのではなく。

ツール説明

協調コードエディターは、Yjs と CodeMirror 6 を搭載したリアルタイムマルチプレイヤーコードエディターです。ルーム URL をチームメイトと共有すると、ルーム内のすべてのユーザーが同じドキュメントを一緒に編集でき、各ユーザーのカーソルと選択範囲がラベル付きインジケーターで表示されます。

エディターは数十のプログラミング言語の構文ハイライトをサポートしており、共有言語ドロップダウンで選択できます。あるブラウザーで言語を変更すると、ルーム内のすべてのユーザーに即座に更新されます。ファイルは「ファイルを開く」ボタンでローカルディスクから読み込み、「ファイルを保存」で再度ダウンロードできます。

機能

  • ライブマルチユーザーカーソル: 各協調編集者のカーソルと選択範囲は、色分けされた名前付きラベルで表示されます。同じ位置に複数のカーソルがある場合は、視覚的なノイズを減らすために単一の「N ユーザー」インジケーターに折りたたまれます。
  • 共有言語選択: アクティブなプログラミング言語はルームに保持されるため、すべての参加者は常に同じ構文ハイライトを見ることができ、後から参加したユーザーは即座に正しい状態を取得します。
  • ローカルでファイルを開いて保存: ディスクから任意のソースファイルを共有エディターに直接読み込むか、現在のドキュメントを正しい拡張子を持つファイルとしてダウンロードします。

仕組み

ルームに参加すると、エディターはファイルの内容を表す共有 Y.Text ノードを持つ Yjs ドキュメントを作成します。すべてのキーストロークはコンパクトなバイナリ Yjs 更新としてエンコードされ、Base64 にシリアル化され、WebSocket ルーム経由でブロードキャストされます。接続されているすべてのピアは更新を独自のレプリカに適用します。CRDT の保証により、更新が到着する順序に関係なく、すべてのレプリカは同じテキストに収束します。

カーソルと選択位置は、軽量な Awareness レイヤーを通じて共有され、位置データを同じ WebSocket ルーム経由でルーティングします。完全なドキュメント状態は 1 秒ごとにデバウンスされ、永続的なルームストレージに書き込まれるため、セッション開始後に参加したユーザーは現在のドキュメントを即座に受け取ります。

オプション説明

  • 言語ドロップダウン — エディターの構文ハイライト言語を選択します。選択はすべてのルームメンバーにブロードキャストされるため、すべてのユーザーが一貫したハイライトを見ることができます。ドロップダウンはルームに接続されるまで無効です。
  • ファイルを開く — ローカルファイルピッカーを開き、選択したファイルのテキスト内容を共有 Yjs ドキュメントに読み込み、ルーム内のすべてのユーザーの現在の内容を置き換えます。
  • ファイルを保存 — 現在のエディターの内容をファイルとしてダウンロードします。ファイル拡張子は選択された言語に基づいて自動的に選択されます。
  • テーマ — エディターはシステムのダーク/ライト設定に従います (localStorage に保存)。OS またはブラウザーのテーマを切り替えて、VS Code スタイルのダークおよびライトエディターテーマを切り替えます。

制限事項

  • 同期にはリレーサーバーへのアクティブな WebSocket 接続が必要です。接続が切れた場合、オフラインで行われた編集は再接続時に自動的に再同期されます。
  • 永続的なバージョン履歴はありません。セッションが終了してルームが閉じられると、「ファイルを保存」ボタンでローカルに保存しない限り、ドキュメントは削除されます。
  • バイナリファイル (画像、コンパイル済みバイナリなど) は読み込めません。エディターはプレーンテキストソースファイルのみで動作します。
  • このツールは ベータ版 です。ルームの安定性と最大同時ユーザー数は制限される可能性があります。

ヒント

  • ブラウザーのアドレスバーから完全なルーム URL を共有して、協調編集者を招待します。ルーム ID は URL にエンコードされています。
  • セッションの終了時に ファイルを保存 でローカルコピーを保存します。ルームデータは無期限に永続することは保証されません。
  • 協調編集者のカーソルラベルが重要なコードをカバーしている場合、エディターの右端の近くではラベルが自動的に左にフリップします。