Tweet
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

ありがとうございました!