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
WYSIWYGを使って関数計算を可能にした話
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Jonathan Wills
December 12, 2023
Technology
0
590
WYSIWYGを使って関数計算を可能にした話
Findy さんの「わたしの発見大発表会」のためのプレゼンになります。
Jonathan Wills
December 12, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
tsurunosd
0
120
Oracle Cloud Infrastructure(OCI):Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
oracle4engineer
PRO
2
17k
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
hirodragon112
1
100
AIエージェント勉強会第3回 エージェンティックAIの時代がやってきた
ymiya55
0
160
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
18k
脳が溶けた話 / Melted Brain
keisuke69
1
1.1k
契約書からの情報抽出を行うLLMのスループットを、バッチ処理を用いて最大40%改善した話
sansantech
PRO
3
320
AI時代のIssue駆動開発のススメ
moongift
PRO
0
300
Oracle AI Database@Azure:サービス概要のご紹介
oracle4engineer
PRO
4
1.3k
How to install a gem
indirect
0
1.9k
JEDAI認定プログラム JEDAI Order 2026 受賞者一覧 / JEDAI Order 2026 Winners
databricksjapan
0
400
OPENLOGI Company Profile for engineer
hr01
1
61k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
800
Rails Girls Zürich Keynote
gr2m
96
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
61
43k
Technical Leadership for Architectural Decision Making
baasie
3
300
Crafting Experiences
bethany
1
97
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
500
Become a Pro
speakerdeck
PRO
31
5.9k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
94
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Everyday Curiosity
cassininazir
0
180
Transcript
© CADDi Inc. WYSIWYGを使って関数計算 を可能にした話 Johny Wills・キャディ株式会社・フロントエンドエンジニア 2023年12月12日
© CADDi Inc. © CADDi Inc. ⽬次 2 1. キャディが採⽤しています!
2. 簡単な⾃⼰紹介 3. WYSIWYG とは? 4. 私のチームが直⾯した問題 5. なんで WYSIWYG が必要? 6. いろんな WYSIWYG エディターの紹介 7. カスタム‧インタラクティブ Node の実装 8. まとめ 2
© CADDi Inc. CADDi Engineer Tech Blog We are Hiring!!!
3 @CaddiTech エンジニア 募集職種 エンジニア採⽤ポータル CADDi Engineering お問い合わせ エンジニア採⽤担当まで お気軽にDMください! @hamadiii15 カジュアル⾯談 ちょっと興味ある⽅ がっつり聞いてみたい⽅ どなたでもWelcome!
© CADDi Inc. © CADDi Inc. 簡単な自己紹介 4
© CADDi Inc. • ジョニーと申します • 27歳 • イギリス生まれ・ケンブリッジ出身 •
日本には3年ほど住んでいます • キャディ株式会社でフロントエンドエンジニアとして働いてます 自己紹介 5
© CADDi Inc. © CADDi Inc. WYSIWYG とは? 6
© CADDi Inc. WYSIWYG とは? WYSIWYGの意味 What You See Is
What You Get 文書作成・編集ソフトウェアなどの特性の一つで、最終的な仕上がりを画面上に表示して確認しながら編集でき るという意味。 リファレンス: https://e-words.jp/w/WYSIWYG.html 7
© CADDi Inc. © CADDi Inc. 私のチームが直面した問題 8
© CADDi Inc. 私のチームが直面した問題 課題 見積もりアプリで、2D図面の寸法に対してユーザーが計算 を実行する必要がありました。 多くの場合、ユーザーはこれらの計算を Excel のような外部
ツールに頼っていました。 解決策 プロセスを合理化するために、アプリ内に計算パネルを導入 しました。これにより、ユーザーは Excel や Google Spreadsheet のような外部ツールを使用することなく、数学 演算を実行できるようになりました。 9
© CADDi Inc. © CADDi Inc. なんで WYSIWYG エディターが必要? 10
© CADDi Inc. なんで WYSIWYG が必要? 普通のテキスト入力で関数計算はできるはずが、ユーザーにより良いフィードバックと UX を提供するために WYSIWYG
エディターを使おうと思っていたからです。 11
© CADDi Inc. © CADDi Inc. いろんな WYSIWYG エディターの紹介 12
© CADDi Inc. WYSIWYG エディターの紹介 オンライン上には多くのWYSIWYGエディタがありますが、ここではいくつか の例を挙げます: • Draft.js ◦
作成者: Meta (Facebook) ◦ アーカイブされ、現在はサポートされていません。 • Quill.js ◦ オープンソースのWYSIWYGエディター • Lexical ◦ 作成者:Meta (Facebook) • TipTap ◦ 実は ProseMirror という別のエディターのラッパーです。 私たちが使うことにしたエディターはTipTapです。 13
© CADDi Inc. なぜ TipTap? • ドキュメンテーションが充実しています • 当たり前で、Draft.jsのようにアーカイブされていません •
ヘッドレス(そのため、私たちのビジュアルスタイルに合わせて完全にカスタマイズできる) • React (その他多くのフロントエンドフレームワーク )をサポート • カスタム Extension とインタラクティブ Node をサポートしています。 14
© CADDi Inc. インタラクティブ Node / Extension TipTap はいろんな Extension
を提供しているが、解決 したい問題のユースケースに合う物はなかったです。 なので、TipTap のカスタム Extension を使ってこのよう なインタラクティブコンポーネントを作りました。 15
© CADDi Inc. © CADDi Inc. カスタム・インタラクティブ Node の実装 16
© CADDi Inc. 実装 - 1 1. カスタム Node を作成します(このための基本的な
コードは右側にあります) 2. TipTapの <NodeViewWrapper> を使用して表示さ れるReactコンポーネントを作成します。 3. そのコンポーネントを提供されている ReactNodeViewRendererに渡します。 4. addNodeView()で登録します 5. カスタム Node をTipTapエディタに渡して、使えるよう にします 17
© CADDi Inc. 実装 - 2 このカスタム・Node 設定でできることをもう少し詳 しく説明します。 Attribute
を追加することができます。ここでは値と IDを指定します。 このカスタム Node の Attribute がパースとレンダ リング中にどのように処理されるかの関数を定義 できます。 また、このカスタム Node を「インライン」に設定し て、他のテキストとインラインで表示することもでき ます。 18
© CADDi Inc. 実装 - 3 表示されるReact Componentについてもう少し詳 しく説明します。 このコンポーネントは、先ほど定義したカスタム
Attribute にアクセスできます。 また、他の React コンポーネントと同様にイベント・ ハンドラをアタッチすることができます。 19
© CADDi Inc. 実装 - 4 図面の寸法がクリックされるたびに、エディターに私のカスタム Node が追加されます。エディターのコンテントにこのような文 字列を追加します。クリックした時に必要なデータ(
IDとvalue)を置き換えて追加されます。 この文字列は解析され、カスタム Node にアタッチしたReact Componentとしてレンダリングされます。 20
© CADDi Inc. 実装 - 5 これでカスタム・インタラクティブ・ Node が動作し、 このように参照された値をインラインで表示するこ
とができます。 この方程式の最終値を計算する必要があります。 しかし、これはTipTapを使うだけではできません。 計算ロジックを処理するために別のパッケージを 導入する必要があります。 21
© CADDi Inc. 実装 - 6 Math.js では、数式を文字列として math.js の
math.evaluate 関数に渡すだけで、複雑な数学的 計算を行うことができます。 さらに、"scope "オブジェクトを与えれば、 mathjsが シンボルを解決し、対応する答えを計算してくれま す。 それを使って、数式の中で参照されている値を評 価することができます。 22
© CADDi Inc. 実装 - 7 ユーザーが数式を書き終えた後に、計算ボタンを押すと、 TipTap から数 式の文字列を取得します。
簡単な例を使って説明すると、 TipTap の getText() 関数から取得した文 字列は青いテキストになります。まだ ID のままになっていますが、緑の ID と 値を合わせた scope オブジェクトを作ります。 これで、青いの文字列と緑のスコープオブジェクトを mathjs に渡してあ げると内部的にピンクのテキストに変換されます。そして、 mathjs の evaluate 関数を使って最終的な値を得ることができて赤い色の 3 が 返ってきます。 ( 2 + $A48 ) / 2 ( 2 + 8 ) / 2 { “$A48”: 8 } 5 23
© CADDi Inc. © CADDi Inc. まとめ 24
© CADDi Inc. まとめ WYSIWYGエディターのパワーを利用して数式を容易にするという私の LT にお 付き合いいただきありがとうございました。各実装面の複雑さをもっと深掘りした かったのですが、時間のためにできませんでした。 TipTap
はとても便利なパッケージで、拡張性はその実用性を高めていていろん なユースケースに合わせられます。 TipTap と Mathjs の相乗効果により、Excel や Googleスプレッドシートに見られるような動的な計算パネルを作成することが できました。 皆様のご関心とご協力に感謝いたします。ご質問やより詳しい情報をご希望の方 は、お気軽にご連絡ください! 25