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

シン・リッチエディタ徹底解説

 シン・リッチエディタ徹底解説

microCMS Online Meetup 2023
https://microcms.connpass.com/event/283625/

新しくリリースされたリッチエディタについて紹介したスライドです。

microCMS

May 31, 2023
Tweet

More Decks by microCMS

Other Decks in Programming

Transcript

  1. #microcms_meetup
    りゅーそう
    シン・リッチエディタ
    徹底解説

    View Slide

  2. 自己紹介
    2
    #microcms_meetup
    りゅーそう / ryusou
    @ryusou_mtkh
    microCMSのプロダクトエンジニア
    リッチエディタの開発を担当しました。愛猫家。
    ryusou

    View Slide

  3. リッチエディタ正式版リリースしました
    3
    #microcms_meetup

    View Slide

  4. 目次
    4
    ● microCMSが実現するリッチエディタの形
    ● 旧リッチエディタの課題
    ● 新しいリッチエディタで解決されること
    ● リッチエディタとアクセシビリティ
    ● リッチエディタのこれから
    #microcms_meetup

    View Slide

  5. 目次
    5
    ● microCMSが実現するリッチエディタの形
    ● 旧リッチエディタの課題
    ● リッチエディタ新機能
    ● リッチエディタとアクセシビリティ
    ● リッチエディタのこれから
    #microcms_meetup

    View Slide

  6. リッチエディタといってもいろいろ
    microCMSが実現するリッチエディタの形
    6
    #microcms_meetup
    ● microCMS旧リッチエディタ(ヘッドレスCMS系)
    ○ 文章特化、シンプルに入稿できる
    ● ブロック系のリッチエディタ
    ○ ブロックごとに入力できる。ドラッグ&ドロップで移動など
    ○ 他のページなどを埋め込んだりできる
    ● GUI系のリッチエディタ
    ○ UIをGUIでゴリゴリ作成できる
    ○ ノーコードサービスなど など

    View Slide

  7. 表現力と
    実装・管理のしやすさは
    トレードオフ
    7
    #microcms_meetup

    View Slide

  8. microCMSが実現するリッチエディタの形
    ヘッドレスCMSならではのリッチエディタ事情
    ● 表現力が高ければ高いほど良い→❌
    ○ 開発者とコンテンツ編集者が異なる場合がほとんど
    ○ 実装時に考慮するパターンが増える
    ○ 表現力が高い→APIレスポンスも複雑になりがちというトレードオフ
    ● 機能が少なくシンプルであればあるほど良い→❌
    ○ 開発者の実装コストがかかりすぎてしまう場合も(ex:テーブルができないので独自
    に実装する)
    ○ コンテンツ編集者が表現したいことができない
    8
    #microcms_meetup

    View Slide

  9. microCMSが実現するリッチエディタの形
    以前発表したスライド
    “リッチエディタはヘッドレスCMSで
    唯一スタイルを持てる”
    リッチエディタをヘッドレスCMS上で
    扱う際のコミュニケーションコストとの
    向き合い方についてお話ししました。
    コミュニケーションなどの管理コストを下げ、かつ表現力豊かなリッチエディタが
    ヘッドレスCMSでは必要
    9
    #microcms_meetup

    View Slide

  10. 目次
    10
    ● microCMSが実現するリッチエディタの形
    ● 旧リッチエディタの課題
    ● リッチエディタ新機能
    ● リッチエディタとアクセシビリティ
    ● リッチエディタのこれから
    #microcms_meetup

    View Slide

  11. 旧リッチエディタの課題
    コミュニケーションコストの発生
    ● 各要素が明確でない
    ○ 改行(br)なのか、段落わけなのか(p)なのかわからないなど
    ● どこまでがリッチエディタ上でプレビューされているのかがわからない
    ○ 微妙にスタイルを持ってしまっている
    ○ 画面プレビューで確認する部分との差別化が明確ではない
    11
    #microcms_meetup

    View Slide

  12. 旧リッチエディタの課題
    表現できないことが多い
    ● テーブル
    ● hrタグ
    ● 画像のキャプションなど
    ● 外部リンクの制御
    ● 改行の制御
    12
    #microcms_meetup
    など

    View Slide

  13. 旧リッチエディタの課題
    入稿体験
    ● リッチエディタはマウス操作を前提としている
    ○ アクセシビリティ的な問題もある
    ○ 私はマウスも使うが、あまりにマウス操作に依存しているとテンション
    が下がる
    ● 要素間のスタイル
    ○ 各要素間の余白・境界線がわかりにくい
    ○ 旧リッチエディタではライブラリの関係でスタイルを整えにくかったと
    いう事情もあります
    13
    #microcms_meetup

    View Slide

  14. 目次
    14
    ● microCMSが実現するリッチエディタの形
    ● 旧リッチエディタの課題
    ● 新しいリッチエディタで解決されること
    ● リッチエディタとアクセシビリティ
    ● リッチエディタのこれから
    #microcms_meetup

    View Slide

  15. コミュニケーションコスト
    をなくす
    15
    #microcms_meetup

    View Slide

  16. カスタムclass
    ● スタイル系が廃止に(文字サイズ、背景・文字色)
    これらはカスタムclassで代替
    ● スタイルに関するコミュニケーションコストをなくす。
    ● 文章に統一感をもたらす
    新しいリッチエディタで解決されること
    16
    #microcms_meetup

    View Slide

  17. カスタムclass
    以下の場合は繰り返しフィールドなどが適しています。
    ● ブロック要素(画像など)やテキストなどを組み合わせたレイアウトを組み
    たい場合
    レスポンス:
    インライン要素の中にspanタグでclass名が適用されるので、
    クラス名に対して、スタイルを適用
    新しいリッチエディタで解決されること
    17
    #microcms_meetup

    View Slide

  18. 全体的な余白・見た目の改善を行いました
    ● リッチエディタ上でどれだけ改行されているのか分からない問題
    ○ 段落
    ○ 改行
    ○ 画像などのブロック要素
    など各要素間の境界線を明確に
    各HTMLがどのように適用されている
    かが明確に
    新しいリッチエディタで解決されること
    18
    #microcms_meetup

    View Slide

  19. HTMLのみが表現されたシンプルなリッチエディタ
    ● リッチエディタ上で確認できること
    ○ どんなHTML要素が適用されているか?
    ○ シンプル、スタイルの情報はない
    ● 画面プレビューで確認できること
    ○ 実際にどんなスタイルが当たってページが構成されるのか?
    プレビューをどのようにするか?はヘッドレスCMSの課題の一つですが、
    ● どこで確認すれば良いのか?
    ● どこを修正すれば良いのか?
    が明確になります
    新しいリッチエディタで解決されること
    19
    #microcms_meetup

    View Slide

  20. 表現力を豊かに
    20
    #microcms_meetup2023

    View Slide

  21. 新しいリッチエディタで解決されること
    表現力と管理・連携はトレードオフ
    microCMSはどこまで表現しているのか?
    Webが備えるHTML表現を入稿できる
    今後も声をいただきながら、改善はしていきますが、
    現状このような方針でリリースをしています。
    21
    #microcms_meetup

    View Slide

  22. 新しいリッチエディタで解決されること
    テーブル
    以下の操作が可能です
    ● 列・行の追加、削除
    ● テーブルの削除
    ● セルの結合・分割
    ● ヘッダーの切り替え 
    22
    #microcms_meetup

    View Slide

  23. 新しいリッチエディタで解決されること
    画像キャプション
    キャプションがつけられるように
    レスポンス:
    キャプションの有無にかかわらず、
    画像はfigureで囲われるように
    23
    #microcms_meetup

    View Slide

  24. 新しいリッチエディタで解決されること
    コードブロックのファイル名・言語選択
    言語選択は、選択肢にない言語でも実装側で対応している言語であれば
    ハイライトできます。
    レスポンス:
    24
    #microcms_meetup

    View Slide

  25. 新しいリッチエディタで解決されること
    外部リンク設定
    リンクにtarget_blank(外部リンク)を
    設定できます。
    レスポンス:noreferrerも付与されます
    25
    #microcms_meetup

    View Slide

  26. 新しいリッチエディタで解決されること
    埋め込みプレビュー
    リッチエディタ上でプレビューできます
    ● 1900以上のプロバイダーに対応
    ● パラメータの追加
    ● 通常リンクのプレビュー
    26
    #microcms_meetup

    View Slide

  27. 新しいリッチエディタで解決されること
    埋め込みプレビュー
    レスポンス:
    パターンが多いですが、大きく分けて2種類です
    ● iframe形式(YouTube, Speaker Deck, 通常リンクなど多数)
    ○ そのまま組み込めばレスポンシブ対応される
    形で取得できます
    ● script形式(Twitter, instagram, Facebookなど一部)
    ○ こちらは実装側でscriptの読み込みが必要です
    27
    #microcms_meetup

    View Slide

  28. 新しいリッチエディタで解決されること
    Enterで段落わけ(pタグ)、Shift+Enterで改行(brタグ)
    コマンドで使い分けができるように
    ● 段落(行間の余白あり)
    ● 改行(行間の余白なし)
    28
    #microcms_meetup

    View Slide

  29. 目次
    29
    ● microCMSのリッチエディタが目指すもの
    ● 旧リッチエディタの課題
    ● 新しいリッチエディタで解決されること
    ● リッチエディタとアクセシビリティ
    ● リッチエディタのこれから
    #microcms_meetup

    View Slide

  30. キーボード操作
    30
    #microcms_meetup

    View Slide

  31. リッチエディタとアクセシビリティ
    「要素選択がたいへん問題」
    tiptapのコマンドに対応
    https://tiptap.dev/api/keyboard-shortcuts
    「Shift」+「↓」で行末まで選択.....など
    31
    #microcms_meetup

    View Slide

  32. リッチエディタとアクセシビリティ
    「ツールバーとコンテンツ離れている問題」
    ツールバー(装飾選択)とカーソルが離れている
    →マウスの移動量が多い
    「Tab」←→「Shift」 + 「Tab」で移動可能
    ● テーブル編集中に「Shift+Tab」でツールバーへ
    ● テーブルの行追加・セル結合など操作
    ● 「Tab」でコンテンツのテーブルに戻って編集
    32
    #microcms_meetup

    View Slide

  33. リッチエディタとアクセシビリティ
    「ブロック要素にキーボードでアクセスできない問題」①
    「画像」と「埋め込み」
    ● キャレットが当たっている状態で「→」で
    フォーカスが当たる
    ● 「Enter」でメニューを開く
    ● 「esc」でメニューを閉じる
    33
    #microcms_meetup

    View Slide

  34. リッチエディタとアクセシビリティ
    「ブロック要素にキーボードでアクセスできない問題」②
    コードブロック
    ● フォーカスがブロックにある時に「Tab」キーで「ファイル名」に移動
    ● さらに「Tab」キーで「言語を選択」に移動
    ● 「言語を選択」から本文に戻る時は「esc」キーで閉じてから「Tab」キーで移動
    34
    #microcms_meetup

    View Slide

  35. リッチエディタとアクセシビリティ
    ● キー操作を無理に覚える必要はありません。
    ● もちろん、従来のようにマウス操作もできます。
    ● 少しでも、入稿が簡単になれば嬉しいです
    35
    #microcms_meetup

    View Slide

  36. マークアップ
    36
    #microcms_meetup

    View Slide

  37. リッチエディタとアクセシビリティ
    APIレスポンスへのこだわり
    機能が増えることに合わせて、レスポンスのマークアップにも配慮しています。
    詳しくはドキュメントをご覧ください。
    https://document.microcms.io/manual/rich-editor-usage
    37
    #microcms_meetup

    View Slide

  38. 目次
    38
    ● microCMSのリッチエディタが目指すもの
    ● 旧リッチエディタの課題
    ● 新しいリッチエディタで解決されること
    ● リッチエディタとアクセシビリティ
    ● リッチエディタのこれから
    #microcms_meetup

    View Slide

  39. リッチエディタのこれから
    旧リッチエディタからのマイグレーション
    ● POST/PATCH APIのリッチエディタ対応
    新しいリッチエディタに対応したAPIを開発中です。
    以下のようなことを可能にする予定です。
    ● 旧リッチエディタからの移行
    ● WordPressなどからの移行
    39
    #microcms_meetup

    View Slide

  40. リッチエディタのこれから
    アクセシビリティ
    新しいリッチエディタではキーボード操作に対応をしました。
    しかし、完璧であるとは思っていません。
    ● スクリーンリーダーなどの各種対応
    ● 一部キーボードでアクセスできない箇所の修正 など
    またアクセシビリティはリッチエディタだけで完結するものでもありません。
    各種フィールドなども合わせて、誰でも入稿できるヘッドレスCMSを目指したいと思っています。
    40
    #microcms_meetup

    View Slide

  41. リッチエディタのこれから
    リッチエディタの開発は終わりません
    コミュニティにて、フィードバックお待ちしています!
    41
    #microcms_meetup

    View Slide

  42. Thanks :)
    42
    #microcms_meetup
    https://discord.gg/K3DPqw4EJ2
    @micro_cms

    View Slide