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

Slide 1

Slide 1 text

#pwanight りゅーそうヘッドレスCMSのリッチエディタを支えるヘッドレス○○

Slide 2

Slide 2 text

目次1 2 ● microCMSのリッチエディタについて ● microCMSを支える「Headless WYSIWYG Text Editor」 ● microCMSを支える「Headless UI」 ● リッチエディタにリッチなUIを組み込む #pwanight

Slide 3

Slide 3 text

自己紹介 ● りゅーそう (@ryusou_mtkh) ● microCMS のプロダクトエンジニア ● 現在は新しいリッチエディタ(ベータ版)の開発を担当 3 #pwanight

Slide 4

Slide 4 text

目次 4 ● microCMSの(新)リッチエディタについて ● microCMSを支える「Headless WYSIWYG Text Editor」 ● microCMSを支える「Headless UI」 ● リッチエディタにリッチなUIを組み込む #pwanight

Slide 5

Slide 5 text

● microCMSでは新しいリッチエディタを開発中です！ ○ microCMSのDiscordコミュニティ内で新機能の紹介などをしています。 ○ microCMS公式ツイッター(@micro_cms)の固定ツイートからぜひ！ (新)リッチエディタについて 5 #pwanight

Slide 6

Slide 6 text

DEMO 6 #pwanight

Slide 7

Slide 7 text

● microCMSの新しいリッチエディタ開発に当たって ○ 要望がとても強い（なるべく早く機能提供したい....） ○ 使い心地にもこだわりたい ○ リッチエディタ独自の学習コストをなるべく減らしたい →　これらを達成するための技術選定を考える (新)リッチエディタについて 7 #pwanight

Slide 8

Slide 8 text

目次 8 ● microCMSのリッチエディタについて ● microCMSを支える「Headless WYSIWYG Text Editor」 ● microCMSを支える「Headless UI」 ● リッチエディタにリッチなUIを組み込む #pwanight

Slide 9

Slide 9 text

● 現行のエディタライブラリの辛み ○ グローバルCSSでスタイルを管理する必要がある ■ 独自のCSSがすでに適用されているため ○ ロジックがライブラリ側で隠蔽されている範囲が多い ■ よって、カスタマイズ・修正がしにくい ■ 学習コストが高い Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 9 #pwanight

Slide 10

Slide 10 text

● そもそも「ヘッドレス」とは？（ヘッドレスエディタ、ヘッドレスUI...） ○ スタイル（ヘッド）がないUIライブラリ ○ ロジックのみを提供、スタイルは自由に書く Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 10 #pwanight

Slide 11

Slide 11 text

● 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/

Slide 12

Slide 12 text

● tiptapのメリット ○ スタイル管理のしやすさ ■ エディタ内の余白など細かい部分のスタイル調整 ■ コンポーネント単位でCSSを管理 ■ !important からの解放 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 12 #pwanight

Slide 13

Slide 13 text

● tiptapのメリット ○ ProseMirror(https://prosemirror.net/)のラッパーライブラリ ■ ProseMirror自体の利用実績、ナレッジが豊富 ■ カスタムするときにだけ、ProseMirrorのコアの知識が必要 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 13 #pwanight

Slide 14

Slide 14 text

● tiptapのメリット ○ ロジックの分離 ○ Hooksにロジックを分けてテスト Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 14 #pwanight

Slide 15

Slide 15 text

● tiptapのデメリット ○ UIを1から作成しなくてはいけない ○ 後々の管理コストを考えると、むしろメリットと考えた ○ とはいえUIロジックを１から全て作成するのは大変 ■ ここで「Headless UI」 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 15 #pwanight

Slide 16

Slide 16 text

目次 16 ● microCMSの(新)リッチエディタについて ● microCMSを支える「Headless WYSIWYG Text Editor」 ● microCMSを支える「Headless UI」 ● リッチエディタにリッチなUIを組み込む #pwanight

Slide 17

Slide 17 text

● 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

Slide 18

Slide 18 text

● 「Radix UI」ここで使ってます！（一例） ○ ツールバー、セレクト、モーダル....etc Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 18 #pwanight

Slide 19

Slide 19 text

● Radix UIのメリット ○ ロジックの分離 ○ Radix UIの責務は「HTML本来が備える機能の担保」といえる ○ 以下は利用側の責務にできる ■ スタイル ■ モーダルの開閉、イベントなどのロジック ○ UIの表示とロジックを利用側で自由に設計することができる Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 19 #pwanight

Slide 20

Slide 20 text

● Radix UIのデメリット ○ ヘッドレスエディタと同様 ○ 同然だが、依存ライブラリが増えるというデメリットは存在する Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 20 #pwanight

Slide 21

Slide 21 text

目次 21 ● microCMSの(新)リッチエディタについて ● microCMSを支える「Headless WYSIWYG Text Editor」 ● microCMSを支える「Headless UI」 ● リッチエディタにリッチなUIを組み込む #pwanight

Slide 22

Slide 22 text

● ここまでの話 ○ リッチエディタのコンテンツ外部UIの話リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 22 #pwanight

Slide 23

Slide 23 text

● ここからの話 ○ リッチエディタのコンテンツにUIを組み込む話リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 23 #pwanight

Slide 24

Slide 24 text

● tiptap「NodeView」 ○ 独自のNodeを埋め込むことができる ○ Reactなどのコンポーネントも使用できるリッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 24 #pwanight https://tiptap.dev/guide/node-views/react

Slide 25

Slide 25 text

● tiptap「NodeView」＋ Radix UI ○ NodeViewの中で、Radix UIで作成したコンポーネントを使用する ○ エディタ内でも操作性に優れたUIを作成できるリッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 25 #pwanight

Slide 26

Slide 26 text

● しかし、リッチエディタのコンテンツはインタラクティブ ○ Radix UIは固定のNodeをイベントトリガーとする必要がある ○ インタラクティブ要素にもリッチな UIを適用したい....。リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 26 #pwanight

Slide 27

Slide 27 text

● Floating UI（https://ﬂoating-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

Slide 28

Slide 28 text

リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor ● getBoundingClientRect() ○ https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect ○ ProseMirrorで取得した状態をもとにDOMRectを返す ○ （結局ProseMirrorの知識は必要なんですね） 28 #pwanight

Slide 29

Slide 29 text

● Floating UI（https://ﬂoating-ui.com/） ○ そのほかにも、ComboboxなどRadix UIでは表現できないUIを作成する際にも活用しています！リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 29 #pwanight

Slide 30

Slide 30 text

● 開発スピードを保ちつつ、使いやすさを追及するためにライブラリに依存するという選択 ● リッチエディタのライブラリ選定方針を定める ○ なるべく少ない学習コストで実装できる ○ スタイルは利用側で管理できる ○ 設計を利用側で決められる責務のなるべく少ないライブラリまとめWYSIWYG Text EditorWYSIWYG Text Editor 30 #pwanight

Slide 31

Slide 31 text

やっぱり「ヘッドレス」は最高！（PRを含みません） 31 #pwanight