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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

表現力を豊かに 20 #microcms_meetup2023

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

キーボード操作 30 #microcms_meetup

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

マークアップ 36 #microcms_meetup

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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