共同編集ドローツールの作り方

Transcript

1. 共同編集ドローツールの作り方 意外と簡単に作れる? Ryohei Ikegami Nov 9, 2023 デザインエンジニアリングMeetup! Vol.0
2. 池上 涼平 github.com/seanchas116 twitter.com/seanchas_t フリーランスエンジニア (Webフロントエンド・iOSなど...) 最近法人化して会社を作りました
3. 自分のプロダクトとして HTMLベースのデザインツールの開発に取り組み中 プロダクト開発って難しい...
4. 以前公開した HTMLベースのデザインツール (Web Componentsが作れる) macaron-elements.com/
5. デザインツールを作りたい と思ったことってありますか?
6. の場合... テキストエディタ自作やプログラミング言語自作 と同じで、
 デザインツールも作ってみたい... 自分 (も他の人も) が使うツールを作るロマン デザインにもエンジニアリングにも興味がある
7. 4 SaaSの一機能としてドローツール(的なもの)を入れた$ 4 Miroみたいなやつ作りたい やったことなくて難しいと思われがち...? ちらほら聞くニッチな需要 でも
8. そこで シンプルな共同編集ドローツールの 作り方の1例をまとめてみた ベストプラクティスがある分野ではないと思うので、 あくまで1例として見てもらえると嬉しいです
9. simple-drawing-tool.vercel.app github.com/seanchas116/simple-drawing-tool
10. デザイン データ設計 UI実装
11. エディタのデザインなども
 面白いものがいっぱい見つかる dribbble.com/search/whiteboard-app Dribbbleで調べる
12. よく悩むところ UIを直で実装するか Figmaでデザインしてから作るか…? 今回は、シンプルなUIなので、UI直実装で作ってみg Y Tailwind を使w Y GitHub Copilotでそれっぽいデザインは勝手に作ってくれて便利
13. デザイン データ設計 UI実装
15. Firebase Realtime Databaseに入れる Firestoreや他のDBでもいけるはず
16. 共同編集しやすいデータ構造 順序を保ちたくても、Arrayを使わない! (重要7 F 挿入/削除を同時に行うことができない(indexがズレるので7 F DBに格納しにくH F JSONとかにして格納しても、個別updateしにくい →できるだけObject(連想配列)でデータを持つことを考える
17. Fractional Indexing 今回は使ってないけど... 他のレコードを弄らなくても 挿入できる!
18. Fractional Indexing Figmaの技術ブログがわかりやすい https://www.figma.com/blog/realtime-editing-of-ordered-sequences/
19. テキスト共同編集なC G 順序の整合性が大事 (同時タイプ時に混じらないように G 要素数が非常に多い 場合、Fractional Indexingは使いにくい →他の手法を使った方がいいと思われる Fractional Indexing
20. テキスト共同編集を作りやすい、CRDTライブラリ Yjs github.com/yjs/yjs
21. デザイン データ設計 UI実装
22. 状態管理 MobXを使い、状態を表すクラスを作成 React外でシンプルなコードで状態を管理できるので 複雑な状態を伴うアプリで便利
23. SVGで要素を描画/イベントハンドル
24. リサイズハンドル 動かす点と対頂点から矩形を計算→セット
25. リサイズハンドル
26. カラーパレット Tailwindデフォルトの色一覧が グラフィクスツールの パレットとしても使いやすい説
27. カラーパレット Radix UIのPopoverを使って
 ドロップダウンを出す Radix UIは元々デザインツールを作っていた会社が作ったライブラリなので
 ツール作成(もちろん様々なWebアプリにも) にめちゃ便利 modulz.app
28. ありがとうございました!