[技術検証] 同時編集機能の実装について調べる

[Kassy0220]

• 1

上記のIssueで町田さんと打ち合わせを行い、チームメンバーが入力した内容を更新できるようにするには、同時編集機能があった方が良いという話になった。

そこで、同時編集機能を実現できないか調査を行う。

3/24 Yjsの調査を進める yjs/yjs: Shared data types for building collaborative software

[Kassy0220]

Yjsを利用すると同時編集機能を持つテキストエディタの実装はできることが分かった。 (ドキュメントのGetting Startedのコードをローカルで再現済みA Collaborative Editor | Yjs Docs)

次に、双方向通信をどう実現するかというところで、WebSocketやWebRTCについて調査し、それがRailsで実現できるのかについて調査する。

[Kassy0220]

RailsではActionCableを使ってWebSocket通信を利用することが確認できた。 Action Cable の概要 - Railsガイド

ActionCableをを使って同時編集機能を持つテキストエディタを実装することが可能かどうかを調査する。

[Kassy0220]

調査した結果、以下のGemを利用すると実装できることが分かった。

• y-crdt/yrb: Ruby bindings for yrs.
• y-crdt/yrb-actioncable: An ActionCable companion for Y.js clients.

実装例 : yrb-actioncable/examples/collaborative-text-editor at main · y-crdt/yrb-actioncable

実装可能であることを確認できたので、Issueをcloseします。

[Kassy0220]

同時編集エディタを利用した場合、バックエンド側で文章の状態を作成できないという問題が発生した。 (文章の状態はフロント側のパッケージでよしなに作成されるものであり、どのような値が作成されているかパッケージのコードを追ってみても確認できなかったため。)

バックエンド側で文章の状態を作成できないとなると、バックエンド側で議事録を自動生成しても、その内容を同時編集エディタに反映する事ができない。

以上のことから、Yjs関連技術を使った同時編集機能は実装に問題が発生する事がわかったので、別の方法で同時編集を実装できないか考えることにする。

リアルタイム処理を実現してくれるscaledroneというサービスを発見したので、これを調査する。 https://www.scaledrone.com/

[Kassy0220]

同時編集機能の実装に関して、次の問題が発生した。

• 議事録を作成して、直後に編集ページを開くと、編集エディタに議事録の内容が反映されていない

この問題を解決するために、以下のことを試してみたがうまくいかなかった。

• バックエンド側で(エディタに入力されている)文章の状態を作成し、Redisに保存する
  • 文章の状態はUint8Arrayで保存されており、どのような内容で保存されているのか分からなかった
  • ライブラリのコード(yrb_actioncable, y-prosemirror, Yjs)などを追ってみたが、どのような値が保存されているのか分からなかった
• DBに保存されている値をHTML要素に変換し、エディタの中にそのまま貼り付ける
  • 表示自体はうまくいったが、議事録編集ページを複数のウィンドウで開いた場合、議事録の内容が重複して表示されてしまう問題が発生した
  • エディタを開いた時に、「他のユーザーが入力している内容を反映する処理」と「DBに保存されている値をエディタに貼り付ける処理」がそれぞれ実行されることで、重複して表示されてしまうことが分かったが、この問題の解決がうまくいかなかった

駒形さんに、「重量級のライブラリを2-3個組み合わせて使っているので、ちゃんと実装するのは大変だと思う」という指摘もいただき、今回同時編集機能の実装をするのは難しいと判断した。 今後の方針としては、ReactまたはHotwireで実装することとなったため、scaledroneの調査は行わないこととする。 同時編集機能の実装は見送るということで、このIssueをcloseします。