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
850
共同編集ドローツールの作り方
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
Ruby is Unlike a Banana
tanoku
96
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Atom: Resistance is Futile
akmur
261
25k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Practical Orchestrator
shlominoach
185
10k
Web development in the modern age
philhawksworth
204
10k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Testing 201, or: Great Expectations
jmmastey
36
7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
590
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
ありがとうございました!