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