VS Code Conference Japan 2024 LT Tomoya Chiba (@tomoasleep) LiveShare で森羅万象を共同編集する(?) 1

名前: 千葉 知也 (Tomoya Chiba) Twitter: @nemunemu3desu その他: @tomoasleep Qiita 株式会社 エンジニア Marp にはいつもお世話になっております！！ あまりに最高なので感想記事も書きました ↓ Markdown でスライドを作れる Marp はいいぞ #Marp - Qiita 自己紹介 2

LiveShare 知ってますか？ 3

図を作れるソフトウェア (VSCode 拡張機能もある) Draw.io 知ってますか？ 4

VSCode 拡張の説明に書いてある Ref: https://marketplace.visualstudio.com/items?itemName=hediet.vscode- drawio Draw.io は LiveShare できる ( ！？) 5

VSCode 拡張の README に説明がある Internally, this extension synchronizes Draw.io diagrams with text documents. These text documents are shared by Liveshare. As Liveshare has no understanding of the text, modification conflicts might occur on simultaneous modifications. https://github.com/hediet/vscode-drawio どうやって実現してる！？ 6

Draw.io (Custom Editor) の操作と、生データの操作を相互に反映 Draw.io 拡張の仕組み 7

生データを LiveShare で共有している 8

この図式なら、何でも LiveShare 出来ちゃう… ってコト！？ つまり？ 9

JSON Lines で内部データを表現するホッケーゲーム 作ってみた 10

カーソル位置、とかは流石にファイルに入ってないはず ところで、カーソルの表示とかはどうやってる？？？ 11

LiveShare に RPC 用の API がある (Ref: https://www.npmjs.com/package/vsls) カーソル共有、どうやる？: RPC 用 API を使う 12

Ref: https://github.com/hediet/vscode- drawio/blob/v1.6.6/src/features/LiveshareFeature/SessionModel.ts RPC でカーソルの位置などを共有 13

！？ これを真似てやってみる… が 14

Ref: https://github.com/microsoft/live-share/issues/2896 (Publisher 名と Package 名を偽装すると使えるという説もある) LiveShare RPC が使える拡張機能は制限されている 15

Draw.io 自体の LiveShare は生のデータを共有することで実現している Custom Editor を使うことで色んなものが共同編集できる Conflict はあるかも ( 未検証) ファイルの内容以外は RPC で共有している … が、この機能は、使える拡張が制限されている まとめ 16

宣伝 (Qiita CLI を公開しました) 17

https://github.com/increments/qiita-cli から利用できます!! 宣伝 (Qiita CLI を公開しました) 18