Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

microCMS

March 15, 2023
Tweet

More Decks by microCMS

Other Decks in Programming

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ロジックを1から全て作成するのは大変
    ■ ここで「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