Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
共同編集ドローツールの作り方
Search
Ryohei Ikegami
November 09, 2023
3
840
共同編集ドローツールの作り方
Ryohei Ikegami
November 09, 2023
Tweet
Share
More Decks by Ryohei Ikegami
See All by Ryohei Ikegami
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
4
3.9k
Web Componentsを作れる デザインツールの開発
seanchas116
0
750
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
390
Featured
See All Featured
It's Worth the Effort
3n
182
27k
Clear Off the Table
cherdarchuk
90
320k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Why Our Code Smells
bkeepers
PRO
333
56k
The Cost Of JavaScript in 2023
addyosmani
39
5.1k
Designing the Hi-DPI Web
ddemaree
278
34k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Statistics for Hackers
jakevdp
793
220k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Transcript
共同編集ドローツールの作り方 意外と簡単に作れる? Ryohei Ikegami Nov 9, 2023 デザインエンジニアリングMeetup! Vol.0
池上 涼平 github.com/seanchas116 twitter.com/seanchas_t フリーランスエンジニア (Webフロントエンド・iOSなど...) 最近法人化して会社を作りました
自分のプロダクトとして HTMLベースのデザインツールの開発に取り組み中 プロダクト開発って難しい...
以前公開した HTMLベースのデザインツール (Web Componentsが作れる) macaron-elements.com/
デザインツールを作りたい と思ったことってありますか?
の場合... テキストエディタ自作やプログラミング言語自作 と同じで、 デザインツールも作ってみたい... 自分 (も他の人も) が使うツールを作るロマン デザインにもエンジニアリングにも興味がある
4 SaaSの一機能としてドローツール(的なもの)を入れた$ 4 Miroみたいなやつ作りたい やったことなくて難しいと思われがち...? ちらほら聞くニッチな需要 でも
そこで シンプルな共同編集ドローツールの 作り方の1例をまとめてみた ベストプラクティスがある分野ではないと思うので、 あくまで1例として見てもらえると嬉しいです
simple-drawing-tool.vercel.app github.com/seanchas116/simple-drawing-tool
デザイン データ設計 UI実装
エディタのデザインなども 面白いものがいっぱい見つかる dribbble.com/search/whiteboard-app Dribbbleで調べる
よく悩むところ UIを直で実装するか Figmaでデザインしてから作るか…? 今回は、シンプルなUIなので、UI直実装で作ってみg Y Tailwind を使w Y GitHub Copilotでそれっぽいデザインは勝手に作ってくれて便利
デザイン データ設計 UI実装
None
Firebase Realtime Databaseに入れる Firestoreや他のDBでもいけるはず
共同編集しやすいデータ構造 順序を保ちたくても、Arrayを使わない! (重要7 F 挿入/削除を同時に行うことができない(indexがズレるので7 F DBに格納しにくH F JSONとかにして格納しても、個別updateしにくい →できるだけObject(連想配列)でデータを持つことを考える
Fractional Indexing 今回は使ってないけど... 他のレコードを弄らなくても 挿入できる!
Fractional Indexing Figmaの技術ブログがわかりやすい https://www.figma.com/blog/realtime-editing-of-ordered-sequences/
テキスト共同編集なC G 順序の整合性が大事 (同時タイプ時に混じらないように G 要素数が非常に多い 場合、Fractional Indexingは使いにくい →他の手法を使った方がいいと思われる Fractional
Indexing
テキスト共同編集を作りやすい、CRDTライブラリ Yjs github.com/yjs/yjs
デザイン データ設計 UI実装
状態管理 MobXを使い、状態を表すクラスを作成 React外でシンプルなコードで状態を管理できるので 複雑な状態を伴うアプリで便利
SVGで要素を描画/イベントハンドル
リサイズハンドル 動かす点と対頂点から矩形を計算→セット
リサイズハンドル
カラーパレット Tailwindデフォルトの色一覧が グラフィクスツールの パレットとしても使いやすい説
カラーパレット Radix UIのPopoverを使って ドロップダウンを出す Radix UIは元々デザインツールを作っていた会社が作ったライブラリなので ツール作成(もちろん様々なWebアプリにも) にめちゃ便利 modulz.app
ありがとうございました!