WYSIWYGを使って関数計算を可能にした話

Findy さんの「わたしの発見大発表会」のためのプレゼンになります。

Transcript

1. © CADDi Inc. WYSIWYGを使って関数計算 を可能にした話 Johny Wills・キャディ株式会社・フロントエンドエンジニア 2023年12月12日
2. © CADDi Inc. © CADDi Inc. ⽬次 2 1. キャディが採⽤しています！ 2. 簡単な⾃⼰紹介 3. WYSIWYG とは？ 4. 私のチームが直⾯した問題 5. なんで WYSIWYG が必要？ 6. いろんな WYSIWYG エディターの紹介 7. カスタム‧インタラクティブ Node の実装 8. まとめ 2
3. © CADDi Inc. CADDi Engineer Tech Blog We are Hiring!!! 3 @CaddiTech エンジニア 募集職種 エンジニア採⽤ポータル CADDi Engineering お問い合わせ エンジニア採⽤担当まで お気軽にDMください！ @hamadiii15 カジュアル⾯談 ちょっと興味ある⽅ がっつり聞いてみたい⽅ どなたでもWelcome！
4. © CADDi Inc. © CADDi Inc. 簡単な自己紹介 4
5. © CADDi Inc. • ジョニーと申します • 27歳 • イギリス生まれ・ケンブリッジ出身 • 日本には3年ほど住んでいます • キャディ株式会社でフロントエンドエンジニアとして働いてます 自己紹介 5
6. © CADDi Inc. © CADDi Inc. WYSIWYG とは？ 6
7. © CADDi Inc. WYSIWYG とは？ WYSIWYGの意味 What You See Is What You Get 文書作成・編集ソフトウェアなどの特性の一つで、最終的な仕上がりを画面上に表示して確認しながら編集でき るという意味。 リファレンス： https://e-words.jp/w/WYSIWYG.html 7
8. © CADDi Inc. © CADDi Inc. 私のチームが直面した問題 8
9. © CADDi Inc. 私のチームが直面した問題 課題 見積もりアプリで、2D図面の寸法に対してユーザーが計算 を実行する必要がありました。 多くの場合、ユーザーはこれらの計算を Excel のような外部 ツールに頼っていました。 解決策 プロセスを合理化するために、アプリ内に計算パネルを導入 しました。これにより、ユーザーは Excel や Google Spreadsheet のような外部ツールを使用することなく、数学 演算を実行できるようになりました。 9
10. © CADDi Inc. © CADDi Inc. なんで WYSIWYG エディターが必要？ 10
11. © CADDi Inc. なんで WYSIWYG が必要？ 普通のテキスト入力で関数計算はできるはずが、ユーザーにより良いフィードバックと UX を提供するために WYSIWYG エディターを使おうと思っていたからです。 11
12. © CADDi Inc. © CADDi Inc. いろんな WYSIWYG エディターの紹介 12
13. © CADDi Inc. WYSIWYG エディターの紹介 オンライン上には多くのWYSIWYGエディタがありますが、ここではいくつか の例を挙げます： • Draft.js ◦ 作成者: Meta (Facebook) ◦ アーカイブされ、現在はサポートされていません。 • Quill.js ◦ オープンソースのWYSIWYGエディター • Lexical ◦ 作成者：Meta (Facebook) • TipTap ◦ 実は ProseMirror という別のエディターのラッパーです。 私たちが使うことにしたエディターはTipTapです。 13
14. © CADDi Inc. なぜ TipTap？ • ドキュメンテーションが充実しています • 当たり前で、Draft.jsのようにアーカイブされていません • ヘッドレス（そのため、私たちのビジュアルスタイルに合わせて完全にカスタマイズできる） • React (その他多くのフロントエンドフレームワーク )をサポート • カスタム Extension とインタラクティブ Node をサポートしています。 14
15. © CADDi Inc. インタラクティブ Node / Extension TipTap はいろんな Extension を提供しているが、解決 したい問題のユースケースに合う物はなかったです。 なので、TipTap のカスタム Extension を使ってこのよう なインタラクティブコンポーネントを作りました。 15
16. © CADDi Inc. © CADDi Inc. カスタム・インタラクティブ Node の実装 16
17. © CADDi Inc. 実装 - 1 1. カスタム Node を作成します（このための基本的な コードは右側にあります） 2. TipTapの <NodeViewWrapper> を使用して表示さ れるReactコンポーネントを作成します。 3. そのコンポーネントを提供されている ReactNodeViewRendererに渡します。 4. addNodeView()で登録します 5. カスタム Node をTipTapエディタに渡して、使えるよう にします 17
18. © CADDi Inc. 実装 - 2 このカスタム・Node 設定でできることをもう少し詳 しく説明します。 Attribute を追加することができます。ここでは値と IDを指定します。 このカスタム Node の Attribute がパースとレンダ リング中にどのように処理されるかの関数を定義 できます。 また、このカスタム Node を「インライン」に設定し て、他のテキストとインラインで表示することもでき ます。 18
19. © CADDi Inc. 実装 - 3 表示されるReact Componentについてもう少し詳 しく説明します。 このコンポーネントは、先ほど定義したカスタム Attribute にアクセスできます。 また、他の React コンポーネントと同様にイベント・ ハンドラをアタッチすることができます。 19
20. © CADDi Inc. 実装 - 4 図面の寸法がクリックされるたびに、エディターに私のカスタム Node が追加されます。エディターのコンテントにこのような文 字列を追加します。クリックした時に必要なデータ（ IDとvalue）を置き換えて追加されます。 この文字列は解析され、カスタム Node にアタッチしたReact Componentとしてレンダリングされます。 20
21. © CADDi Inc. 実装 - 5 これでカスタム・インタラクティブ・ Node が動作し、 このように参照された値をインラインで表示するこ とができます。 この方程式の最終値を計算する必要があります。 しかし、これはTipTapを使うだけではできません。 計算ロジックを処理するために別のパッケージを 導入する必要があります。 21
22. © CADDi Inc. 実装 - 6 Math.js では、数式を文字列として math.js の math.evaluate 関数に渡すだけで、複雑な数学的 計算を行うことができます。 さらに、"scope "オブジェクトを与えれば、 mathjsが シンボルを解決し、対応する答えを計算してくれま す。 それを使って、数式の中で参照されている値を評 価することができます。 22
23. © CADDi Inc. 実装 - 7 ユーザーが数式を書き終えた後に、計算ボタンを押すと、 TipTap から数 式の文字列を取得します。 簡単な例を使って説明すると、 TipTap の getText() 関数から取得した文 字列は青いテキストになります。まだ ID のままになっていますが、緑の ID と 値を合わせた scope オブジェクトを作ります。 これで、青いの文字列と緑のスコープオブジェクトを mathjs に渡してあ げると内部的にピンクのテキストに変換されます。そして、 mathjs の evaluate 関数を使って最終的な値を得ることができて赤い色の 3 が 返ってきます。 ( 2 + $A48 ) / 2 ( 2 + 8 ) / 2 { “$A48”: 8 } 5 23
24. © CADDi Inc. © CADDi Inc. まとめ 24
25. © CADDi Inc. まとめ WYSIWYGエディターのパワーを利用して数式を容易にするという私の LT にお 付き合いいただきありがとうございました。各実装面の複雑さをもっと深掘りした かったのですが、時間のためにできませんでした。 TipTap はとても便利なパッケージで、拡張性はその実用性を高めていていろん なユースケースに合わせられます。 TipTap と Mathjs の相乗効果により、Excel や Googleスプレッドシートに見られるような動的な計算パネルを作成することが できました。 皆様のご関心とご協力に感謝いたします。ご質問やより詳しい情報をご希望の方 は、お気軽にご連絡ください！ 25