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
940
共同編集ドローツールの作り方
Ryohei Ikegami
November 09, 2023
Tweet
Share
More Decks by Ryohei Ikegami
See All by Ryohei Ikegami
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
4
4.1k
Web Componentsを作れる デザインツールの開発
seanchas116
0
800
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
400
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Become a Pro
speakerdeck
PRO
26
5.1k
Optimizing for Happiness
mojombo
376
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Code Review Best Practice
trishagee
65
17k
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
ありがとうございました!