Upgrade to Pro — share decks privately, control downloads, hide ads and more …

共同編集ドローツールの作り方

Ryohei Ikegami
November 09, 2023
660

 共同編集ドローツールの作り方

Ryohei Ikegami

November 09, 2023
Tweet

Transcript

  1. 共同編集ドローツールの作り方
    意外と簡単に作れる?
    Ryohei Ikegami
    Nov 9, 2023 デザインエンジニアリングMeetup! Vol.0

    View full-size slide

  2. 池上 涼平
    github.com/seanchas116
    twitter.com/seanchas_t
    フリーランスエンジニア (Webフロントエンド・iOSなど...)

    最近法人化して会社を作りました

    View full-size slide

  3. 自分のプロダクトとして

    HTMLベースのデザインツールの開発に取り組み中
    プロダクト開発って難しい...

    View full-size slide

  4. 以前公開した

    HTMLベースのデザインツール

    (Web Componentsが作れる)
    macaron-elements.com/

    View full-size slide

  5. デザインツールを作りたい
    と思ったことってありますか?

    View full-size slide

  6. の場合...
    テキストエディタ自作やプログラミング言語自作

    と同じで、

    デザインツールも作ってみたい...
    自分 (も他の人も) が使うツールを作るロマン
    デザインにもエンジニアリングにも興味がある

    View full-size slide

  7. 4 SaaSの一機能としてドローツール(的なもの)を入れた$
    4 Miroみたいなやつ作りたい
    やったことなくて難しいと思われがち...?
    ちらほら聞くニッチな需要
    でも

    View full-size slide

  8. そこで
    シンプルな共同編集ドローツールの

    作り方の1例をまとめてみた
    ベストプラクティスがある分野ではないと思うので、

    あくまで1例として見てもらえると嬉しいです

    View full-size slide

  9. simple-drawing-tool.vercel.app
    github.com/seanchas116/simple-drawing-tool

    View full-size slide

  10. デザイン
    データ設計
    UI実装

    View full-size slide

  11. エディタのデザインなども

    面白いものがいっぱい見つかる
    dribbble.com/search/whiteboard-app
    Dribbbleで調べる

    View full-size slide

  12. よく悩むところ
    UIを直で実装するか

    Figmaでデザインしてから作るか…?
    今回は、シンプルなUIなので、UI直実装で作ってみg
    Y Tailwind を使w
    Y GitHub Copilotでそれっぽいデザインは勝手に作ってくれて便利

    View full-size slide

  13. デザイン
    データ設計
    UI実装

    View full-size slide

  14. Firebase Realtime Databaseに入れる
    Firestoreや他のDBでもいけるはず

    View full-size slide

  15. 共同編集しやすいデータ構造
    順序を保ちたくても、Arrayを使わない! (重要7
    F 挿入/削除を同時に行うことができない(indexがズレるので7
    F DBに格納しにくH
    F JSONとかにして格納しても、個別updateしにくい
    →できるだけObject(連想配列)でデータを持つことを考える

    View full-size slide

  16. Fractional Indexing 今回は使ってないけど...
    他のレコードを弄らなくても

    挿入できる!

    View full-size slide

  17. Fractional Indexing
    Figmaの技術ブログがわかりやすい
    https://www.figma.com/blog/realtime-editing-of-ordered-sequences/

    View full-size slide

  18. テキスト共同編集なC
    G 順序の整合性が大事 (同時タイプ時に混じらないように
    G 要素数が非常に多い

    場合、Fractional Indexingは使いにくい
    →他の手法を使った方がいいと思われる
    Fractional Indexing

    View full-size slide

  19. テキスト共同編集を作りやすい、CRDTライブラリ
    Yjs
    github.com/yjs/yjs

    View full-size slide

  20. デザイン
    データ設計
    UI実装

    View full-size slide

  21. 状態管理
    MobXを使い、状態を表すクラスを作成
    React外でシンプルなコードで状態を管理できるので

    複雑な状態を伴うアプリで便利

    View full-size slide

  22. SVGで要素を描画/イベントハンドル

    View full-size slide

  23. リサイズハンドル
    動かす点と対頂点から矩形を計算→セット

    View full-size slide

  24. リサイズハンドル

    View full-size slide

  25. カラーパレット
    Tailwindデフォルトの色一覧が

    グラフィクスツールの

    パレットとしても使いやすい説

    View full-size slide

  26. カラーパレット
    Radix UIのPopoverを使って

    ドロップダウンを出す
    Radix UIは元々デザインツールを作っていた会社が作ったライブラリなので

    ツール作成(もちろん様々なWebアプリにも) にめちゃ便利
    modulz.app

    View full-size slide

  27. ありがとうございました!

    View full-size slide