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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. DEMO
   6
   #pwanight
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. ご清聴ありがとうございました
    32
    Copyright © microCMS All rights reserved.
    #pwanight
    microCMS Community Japan　
    https://discord.gg/K3DPqw4EJ2
    

    View Slide