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