ヘッドレスCMSのリッチエディタを支えるヘッドレス○○

PWA Night vol.49 ～GUI特集〜
https://pwanight.connpass.com/event/276266/

microCMSのリッチエディタ開発での技術選定などについてお話ししました。

Transcript

1. #pwanight りゅーそう ヘッドレスCMSの リッチエディタを支える ヘッドレス◦◦
2. 目次1 2 • microCMSのリッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 • microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
3. 自己紹介 • りゅーそう (@ryusou_mtkh) • microCMS のプロダクトエンジニア • 現在は新しいリッチエディタ(ベータ版)の開発を担当 3 #pwanight
4. 目次 4 • microCMSの(新)リッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 • microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
5. • microCMSでは新しいリッチエディタを開発中です！ ◦ microCMSのDiscordコミュニティ内で新機能の紹介などをしています。 ◦ microCMS公式ツイッター(@micro_cms)の固定ツイートからぜひ！ (新)リッチエディタについて 5 #pwanight
6. DEMO 6 #pwanight
7. • microCMSの新しいリッチエディタ開発に当たって ◦ 要望がとても強い（なるべく早く機能提供したい....） ◦ 使い心地にもこだわりたい ◦ リッチエディタ独自の学習コストをなるべく減らしたい →　これらを達成するための技術選定を考える (新)リッチエディタについて 7 #pwanight
8. 目次 8 • microCMSのリッチエディタについて • microCMSを支える 「Headless WYSIWYG Text Editor」 • microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
9. • 現行のエディタライブラリの辛み ◦ グローバルCSSでスタイルを管理する必要がある ▪ 独自のCSSがすでに適用されているため ◦ ロジックがライブラリ側で隠蔽されている範囲が多い ▪ よって、カスタマイズ・修正がしにくい ▪ 学習コストが高い Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 9 #pwanight
10. • そもそも「ヘッドレス」とは？（ヘッドレスエディタ、ヘッドレスUI...） ◦ スタイル（ヘッド）がないUIライブラリ ◦ ロジックのみを提供、スタイルは自由に書く Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 10 #pwanight
11. • tiptap (https://tiptap.dev/) ◦ “It’s headless and comes without any CSS. You are in full control over markup, styling and behaviour.” ◦ microCMSでは(新)リッチエディタで利用 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 11 #pwanight https://tiptap.dev/
12. • tiptapのメリット ◦ スタイル管理のしやすさ ▪ エディタ内の余白など細かい部分のスタイル調整 ▪ コンポーネント単位でCSSを管理 ▪ !important からの解放 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 12 #pwanight
13. • tiptapのメリット ◦ ProseMirror(https://prosemirror.net/)のラッパーライブラリ ▪ ProseMirror自体の利用実績、ナレッジが豊富 ▪ カスタムするときにだけ、ProseMirrorのコアの知識が必要 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 13 #pwanight
14. • tiptapのメリット ◦ ロジックの分離 ◦ Hooksにロジックを分けてテスト Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 14 #pwanight
15. • tiptapのデメリット ◦ UIを1から作成しなくてはいけない ◦ 後々の管理コストを考えると、むしろメリットと考えた ◦ とはいえUIロジックを１から全て作成するのは大変 ▪ ここで「Headless UI」 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 15 #pwanight
16. 目次 16 • microCMSの(新)リッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 • microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
17. • Radix UI (https://www.radix-ui.com/) ◦ “Unstyled, accessible components for building high‑quality design systems and web apps in React.” Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 17 #pwanight https://www.radix-ui.com
18. • 「Radix UI」ここで使ってます！（一例） ◦ ツールバー、セレクト、モーダル....etc Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 18 #pwanight
19. • Radix UIのメリット ◦ ロジックの分離 ◦ Radix UIの責務は「HTML本来が備える機能の担保」といえる ◦ 以下は利用側の責務にできる ▪ スタイル ▪ モーダルの開閉、イベントなどのロジック ◦ UIの表示とロジックを利用側で自由に設計することができる Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 19 #pwanight
20. • Radix UIのデメリット ◦ ヘッドレスエディタと同様 ◦ 同然だが、依存ライブラリが増えるというデメリットは存在する Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 20 #pwanight
21. 目次 21 • microCMSの(新)リッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 • microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
22. • ここまでの話 ◦ リッチエディタのコンテンツ外部UIの話 リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 22 #pwanight
23. • ここからの話 ◦ リッチエディタのコンテンツにUIを組み込む話 リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 23 #pwanight
24. • tiptap「NodeView」 ◦ 独自のNodeを埋め込むことができる ◦ Reactなどのコンポーネントも使用できる リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 24 #pwanight https://tiptap.dev/guide/node-views/react
25. • tiptap「NodeView」＋ Radix UI ◦ NodeViewの中で、Radix UIで作成したコンポーネントを使用する ◦ エディタ内でも操作性に優れたUIを作成できる リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 25 #pwanight
26. • しかし、リッチエディタのコンテンツはインタラクティブ ◦ Radix UIは固定のNodeをイベントトリガーとする必要がある ◦ インタラクティブ要素にもリッチな UIを適用したい....。 リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 26 #pwanight
27. • Floating UI（https://floating-ui.com/） ◦ “Floating UI is a small library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.” ◦ Radix UI内部でも依存している リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 27 #pwanight
28. リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor • getBoundingClientRect() ◦ https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect ◦ ProseMirrorで取得した状態をもとにDOMRectを返す ◦ （結局ProseMirrorの知識は必要なんですね） 28 #pwanight
29. • Floating UI（https://floating-ui.com/） ◦ そのほかにも、ComboboxなどRadix UIでは表現できないUIを作成する際にも活用し ています！ リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 29 #pwanight
30. • 開発スピードを保ちつつ、使いやすさを追及する ためにライブラリに依存すると いう選択 • リッチエディタのライブラリ選定方針を定める ◦ なるべく少ない学習コストで実装できる ◦ スタイルは利用側で管理できる ◦ 設計を利用側で決められる責務のなるべく少ないライブラリ まとめWYSIWYG Text EditorWYSIWYG Text Editor 30 #pwanight
31. やっぱり 「ヘッドレス」は最高！ （PRを含みません） 31 #pwanight
32. ご清聴ありがとうございました 32 Copyright © microCMS All rights reserved. #pwanight microCMS Community Japan　 https://discord.gg/K3DPqw4EJ2