$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
共同編集ドローツールの作り方
Search
Ryohei Ikegami
November 09, 2023
3
920
共同編集ドローツールの作り方
Ryohei Ikegami
November 09, 2023
Tweet
Share
More Decks by Ryohei Ikegami
See All by Ryohei Ikegami
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
4
4k
Web Componentsを作れる デザインツールの開発
seanchas116
0
790
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
390
Featured
See All Featured
Writing Fast Ruby
sferik
627
61k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
GitHub's CSS Performance
jonrohan
1030
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
890
Rails Girls Zürich Keynote
gr2m
94
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Designing for Performance
lara
604
68k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
94
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
480
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
ありがとうございました!