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

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

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

Transcript

1. #microcms_meetup りゅーそう シン・リッチエディタ 徹底解説
2. 自己紹介 2 #microcms_meetup りゅーそう / ryusou @ryusou_mtkh microCMSのプロダクトエンジニア リッチエディタの開発を担当しました。愛猫家。 ryusou
3. リッチエディタ正式版リリースしました 3 #microcms_meetup
4. 目次 4 • microCMSが実現するリッチエディタの形 • 旧リッチエディタの課題 • 新しいリッチエディタで解決されること • リッチエディタとアクセシビリティ • リッチエディタのこれから #microcms_meetup
5. 目次 5 • microCMSが実現するリッチエディタの形 • 旧リッチエディタの課題 • リッチエディタ新機能 • リッチエディタとアクセシビリティ • リッチエディタのこれから #microcms_meetup
6. リッチエディタといってもいろいろ microCMSが実現するリッチエディタの形 6 #microcms_meetup • microCMS旧リッチエディタ（ヘッドレスCMS系） ◦ 文章特化、シンプルに入稿できる • ブロック系のリッチエディタ ◦ ブロックごとに入力できる。ドラッグ&ドロップで移動など ◦ 他のページなどを埋め込んだりできる • GUI系のリッチエディタ ◦ UIをGUIでゴリゴリ作成できる ◦ ノーコードサービスなど など
7. 表現力と 実装・管理のしやすさは トレードオフ 7 #microcms_meetup
8. microCMSが実現するリッチエディタの形 ヘッドレスCMSならではのリッチエディタ事情 • 表現力が高ければ高いほど良い→❌ ◦ 開発者とコンテンツ編集者が異なる場合がほとんど ◦ 実装時に考慮するパターンが増える ◦ 表現力が高い→APIレスポンスも複雑になりがちというトレードオフ • 機能が少なくシンプルであればあるほど良い→❌ ◦ 開発者の実装コストがかかりすぎてしまう場合も(ex:テーブルができないので独自 に実装する) ◦ コンテンツ編集者が表現したいことができない 8 #microcms_meetup
9. microCMSが実現するリッチエディタの形 以前発表したスライド “リッチエディタはヘッドレスCMSで 唯一スタイルを持てる” リッチエディタをヘッドレスCMS上で 扱う際のコミュニケーションコストとの 向き合い方についてお話ししました。 コミュニケーションなどの管理コストを下げ、かつ表現力豊かなリッチエディタが ヘッドレスCMSでは必要 9 #microcms_meetup
10. 目次 10 • microCMSが実現するリッチエディタの形 • 旧リッチエディタの課題 • リッチエディタ新機能 • リッチエディタとアクセシビリティ • リッチエディタのこれから #microcms_meetup
11. 旧リッチエディタの課題 コミュニケーションコストの発生 • 各要素が明確でない ◦ 改行(br)なのか、段落わけなのか(p)なのかわからないなど • どこまでがリッチエディタ上でプレビューされているのかがわからない ◦ 微妙にスタイルを持ってしまっている ◦ 画面プレビューで確認する部分との差別化が明確ではない 11 #microcms_meetup
12. 旧リッチエディタの課題 表現できないことが多い • テーブル • hrタグ • 画像のキャプションなど • 外部リンクの制御 • 改行の制御 12 #microcms_meetup など
13. 旧リッチエディタの課題 入稿体験 • リッチエディタはマウス操作を前提としている ◦ アクセシビリティ的な問題もある ◦ 私はマウスも使うが、あまりにマウス操作に依存しているとテンション が下がる • 要素間のスタイル ◦ 各要素間の余白・境界線がわかりにくい ◦ 旧リッチエディタではライブラリの関係でスタイルを整えにくかったと いう事情もあります 13 #microcms_meetup
14. 目次 14 • microCMSが実現するリッチエディタの形 • 旧リッチエディタの課題 • 新しいリッチエディタで解決されること • リッチエディタとアクセシビリティ • リッチエディタのこれから #microcms_meetup
15. コミュニケーションコスト をなくす 15 #microcms_meetup
16. カスタムclass • スタイル系が廃止に（文字サイズ、背景・文字色） これらはカスタムclassで代替 • スタイルに関するコミュニケーションコストをなくす。 • 文章に統一感をもたらす 新しいリッチエディタで解決されること 16 #microcms_meetup
17. カスタムclass 以下の場合は繰り返しフィールドなどが適しています。 • ブロック要素(画像など)やテキストなどを組み合わせたレイアウトを組み たい場合 レスポンス： インライン要素の中にspanタグでclass名が適用されるので、 クラス名に対して、スタイルを適用 新しいリッチエディタで解決されること 17 #microcms_meetup
18. 全体的な余白・見た目の改善を行いました • リッチエディタ上でどれだけ改行されているのか分からない問題 ◦ 段落 ◦ 改行 ◦ 画像などのブロック要素 など各要素間の境界線を明確に 各HTMLがどのように適用されている かが明確に 新しいリッチエディタで解決されること 18 #microcms_meetup
19. HTMLのみが表現されたシンプルなリッチエディタ • リッチエディタ上で確認できること ◦ どんなHTML要素が適用されているか？ ◦ シンプル、スタイルの情報はない • 画面プレビューで確認できること ◦ 実際にどんなスタイルが当たってページが構成されるのか？ プレビューをどのようにするか？はヘッドレスCMSの課題の一つですが、 • どこで確認すれば良いのか？ • どこを修正すれば良いのか？ が明確になります 新しいリッチエディタで解決されること 19 #microcms_meetup
20. 表現力を豊かに 20 #microcms_meetup2023
21. 新しいリッチエディタで解決されること 表現力と管理・連携はトレードオフ microCMSはどこまで表現しているのか？ Webが備えるHTML表現を入稿できる 今後も声をいただきながら、改善はしていきますが、 現状このような方針でリリースをしています。 21 #microcms_meetup
22. 新しいリッチエディタで解決されること テーブル 以下の操作が可能です • 列・行の追加、削除 • テーブルの削除 • セルの結合・分割 • ヘッダーの切り替え　 22 #microcms_meetup
23. 新しいリッチエディタで解決されること 画像キャプション キャプションがつけられるように レスポンス： キャプションの有無にかかわらず、 画像はfigureで囲われるように 23 #microcms_meetup
24. 新しいリッチエディタで解決されること コードブロックのファイル名・言語選択 言語選択は、選択肢にない言語でも実装側で対応している言語であれば ハイライトできます。 レスポンス： 24 #microcms_meetup
25. 新しいリッチエディタで解決されること 外部リンク設定 リンクにtarget_blank(外部リンク)を 設定できます。 レスポンス：noreferrerも付与されます 25 #microcms_meetup
26. 新しいリッチエディタで解決されること 埋め込みプレビュー リッチエディタ上でプレビューできます • 1900以上のプロバイダーに対応 • パラメータの追加 • 通常リンクのプレビュー 26 #microcms_meetup
27. 新しいリッチエディタで解決されること 埋め込みプレビュー レスポンス： パターンが多いですが、大きく分けて２種類です • iframe形式(YouTube, Speaker Deck, 通常リンクなど多数) ◦ そのまま組み込めばレスポンシブ対応される 形で取得できます • script形式(Twitter, instagram, Facebookなど一部) ◦ こちらは実装側でscriptの読み込みが必要です 27 #microcms_meetup
28. 新しいリッチエディタで解決されること Enterで段落わけ（pタグ）、Shift＋Enterで改行（brタグ） コマンドで使い分けができるように • 段落（行間の余白あり） • 改行（行間の余白なし） 28 #microcms_meetup
29. 目次 29 • microCMSのリッチエディタが目指すもの • 旧リッチエディタの課題 • 新しいリッチエディタで解決されること • リッチエディタとアクセシビリティ • リッチエディタのこれから #microcms_meetup
30. キーボード操作 30 #microcms_meetup
31. リッチエディタとアクセシビリティ 「要素選択がたいへん問題」 tiptapのコマンドに対応 https://tiptap.dev/api/keyboard-shortcuts 「Shift」＋「↓」で行末まで選択.....など 31 #microcms_meetup
32. リッチエディタとアクセシビリティ 「ツールバーとコンテンツ離れている問題」 ツールバー（装飾選択）とカーソルが離れている →マウスの移動量が多い 「Tab」←→「Shift」 + 「Tab」で移動可能 • テーブル編集中に「Shift＋Tab」でツールバーへ • テーブルの行追加・セル結合など操作 • 「Tab」でコンテンツのテーブルに戻って編集 32 #microcms_meetup
33. リッチエディタとアクセシビリティ 「ブロック要素にキーボードでアクセスできない問題」① 「画像」と「埋め込み」 • キャレットが当たっている状態で「→」で フォーカスが当たる • 「Enter」でメニューを開く • 「esc」でメニューを閉じる 33 #microcms_meetup
34. リッチエディタとアクセシビリティ 「ブロック要素にキーボードでアクセスできない問題」② コードブロック • フォーカスがブロックにある時に「Tab」キーで「ファイル名」に移動 • さらに「Tab」キーで「言語を選択」に移動 • 「言語を選択」から本文に戻る時は「esc」キーで閉じてから「Tab」キーで移動 34 #microcms_meetup
35. リッチエディタとアクセシビリティ • キー操作を無理に覚える必要はありません。 • もちろん、従来のようにマウス操作もできます。 • 少しでも、入稿が簡単になれば嬉しいです 35 #microcms_meetup
36. マークアップ 36 #microcms_meetup
37. リッチエディタとアクセシビリティ APIレスポンスへのこだわり 機能が増えることに合わせて、レスポンスのマークアップにも配慮しています。 詳しくはドキュメントをご覧ください。 https://document.microcms.io/manual/rich-editor-usage 37 #microcms_meetup
38. 目次 38 • microCMSのリッチエディタが目指すもの • 旧リッチエディタの課題 • 新しいリッチエディタで解決されること • リッチエディタとアクセシビリティ • リッチエディタのこれから #microcms_meetup
39. リッチエディタのこれから 旧リッチエディタからのマイグレーション • POST/PATCH APIのリッチエディタ対応 新しいリッチエディタに対応したAPIを開発中です。 以下のようなことを可能にする予定です。 • 旧リッチエディタからの移行 • WordPressなどからの移行 39 #microcms_meetup
40. リッチエディタのこれから アクセシビリティ 新しいリッチエディタではキーボード操作に対応をしました。 しかし、完璧であるとは思っていません。 • スクリーンリーダーなどの各種対応 • 一部キーボードでアクセスできない箇所の修正 など またアクセシビリティはリッチエディタだけで完結するものでもありません。 各種フィールドなども合わせて、誰でも入稿できるヘッドレスCMSを目指したいと思っています。 40 #microcms_meetup
41. リッチエディタのこれから リッチエディタの開発は終わりません コミュニティにて、フィードバックお待ちしています！ 41 #microcms_meetup
42. Thanks :) 42 #microcms_meetup https://discord.gg/K3DPqw4EJ2 @micro_cms