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
960
共同編集ドローツールの作り方
Ryohei Ikegami
November 09, 2023
Tweet
Share
More Decks by Ryohei Ikegami
See All by Ryohei Ikegami
Figmaプラグイン(非Webページ環境)での Supabaseログイン
seanchas116
0
27
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
5
4.1k
Web Componentsを作れる デザインツールの開発
seanchas116
0
810
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
400
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Building Adaptive Systems
keathley
40
2.4k
Optimizing for Happiness
mojombo
376
70k
Become a Pro
speakerdeck
PRO
26
5.1k
Code Reviewing Like a Champion
maltzj
521
39k
Music & Morning Musume
bryan
46
6.3k
Docker and Python
trallard
44
3.3k
Visualization
eitanlees
146
15k
Done Done
chrislema
182
16k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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
ありがとうございました!