Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
microCMSのリッチエディタ開発:設計・品質・使いやすさの実現手法
Search
microCMS
July 28, 2025
Technology
0
150
microCMSのリッチエディタ開発:設計・品質・使いやすさの実現手法
PRTIMES.DEVのエディター勉強会で話した内容です。
https://prtimes.connpass.com/event/358977/
microCMS
July 28, 2025
Tweet
Share
More Decks by microCMS
See All by microCMS
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
460
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
480
エンジニア創業者が語るユーザー中心のプロダクト作り
microcms
1
330
What’s new in microCMS (2024 microCMS Meetup)
microcms
0
3.3k
microCMSの開発組織 - Deep dive into microCMS
microcms
2
4.7k
意思決定のモヤが晴れるまで
microcms
7
2.4k
Webフロントエンドの進化とJamstackアーキテクチャの変遷
microcms
7
3.4k
microCMS AI
microcms
0
2.2k
microCMSのエンジニア組織と文化
microcms
0
2.2k
Other Decks in Technology
See All in Technology
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
540
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
140
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
290
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
900
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
370
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
Findy Team+のSOC2取得までの道のり
rvirus0817
0
310
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
Azure Well-Architected Framework入門
tomokusaba
0
250
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Done Done
chrislema
185
16k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
BBQ
matthewcrist
89
9.8k
RailsConf 2023
tenderlove
30
1.2k
Thoughts on Productivity
jonyablonski
70
4.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Invisible Side of Design
smashingmag
301
51k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
#prtimes_editor 野崎洋平 microCMSのリッチエディタ開発 設計・品質・使いやすさ の実現手法
自己紹介 2 #prtimes_editor 野崎洋平 / のざきようへい @ryusou_mtkh microCMSのプロダクトエンジニア リッチエディタの開発を担当しました。愛猫家。 ryusou
意図せず、キャリアでの登壇がリッチエディタまみれになった人です 自己紹介 3 #prtimes_editor ・マークダウンエディタの方が好き ・元々リッチエディタ開発は苦手な部類でしたが、今回お話しする内容を実践していく うちにリッチエディタ開発が好きになりました。(リッチエディタ開発辛いポイント皆 さんはありますか.....?)
microCMSにて現行のリッチエディタをリリースして2年ほど運用 今日お話しすること 4 #prtimes_editor ・テスト戦略 ・使いやすさ など当初からの取り組みが、実際に 2年運用してどうだったのか?お話し します。 (たぶん)この資料をみればmicroCMS
のリッチエディタ開発ができるはず
目次 5 • 設計「技術選定・設計」 • 品質「テスト戦略」 • 使いやすさ「アクセシビリティ」 • 使いやすさ「HTMLにこだわる」
#prtimes_editor
目次 6 • 設計「技術選定・設計」 • 品質「テスト戦略」 • 使いやすさ「アクセシビリティ」 • 使いやすさ「HTMLにこだわる」
#prtimes_editor
tiptapを採用 技術選定 7 #prtimes_editor • Headless WYSIWYG Editor • ProseMirrorベースで拡張がしやすい
• スタイルはUIは独自に拡張できる バックエンド • DynamoDB • Node.js
2年間運用してみてどうだった? 技術選定 8 #prtimes_editor • tiptapで拡張性を保ちつつ、素早くリリースできた • その後のリリース追加でも困るケースはなし • tiptap自体の開発速度も速い。直近でもv3リリース
一方で更新の負荷が高い • tiptapのpackage(tiptap-extension-hogehoge)から飛んでくる大量の dependabot。まれに破壊的変更もあり。
DynamoDBにtiptapのJSONを保存 設計 9 #prtimes_editor • DynamoDBにgenerateJSON で保存 https://tiptap.dev/docs/editor/api/utilities/html • generateHTMLでJSONからHTMLを生成、コンテンツAPIのレスポンスなどで返
す。
設計 10 #prtimes_editor 管理画面 backend コンテンツAPI DynamoDB JSON JSON HTML
GET API POST API JSON, HTML 管理画面 ※簡略化したもの、実際とは異なる箇所があります
設計2年間運用してどうだった? 設計 11 #prtimes_editor • DynamoDBの入出力・最終的なHTMLレスポンスのテスト戦略が大事(後述) • tiptap-extensionとDynamoDB特有の考慮事項 ◦ tiptap-extensionの
...parent()で全てのプロパティを継承するとJSONサイ ズが肥大するので400MB制限に影響がある。 ◦ 拡張機能をむやみに使わない、必要なプロパティのみを使用するなどソース コードから検討する必要がある。 ◦ 「拡張機能をむやみに使わない」というのは運用負荷を下げる観点でも大事 ▪ 時にはProsemirrorで自分で書くという選択肢を持っておく
目次 12 • 設計「技術選定・設計」 • 品質「テスト戦略」 • 使いやすさ「アクセシビリティ」 • 使いやすさ「HTMLにこだわる」
#prtimes_editor
品質 13 #prtimes_editor 管理画面 backend コンテンツAPI DynamoDB JSON JSON HTML
GET API POST API JSON, HTML 管理画面 ※簡略化したもの、実際とは異なる箇所があります
DBとの入出力はスモールテスト(ユニットテスト)で 設計 14 #prtimes_editor • カバレッジ100%を目標・維持 • JestでHTML→JSON、JSON→HTML変換が行われているかを担保 • コードベース上でのカバレッジは担保できる一方、実際にユーザーが生成している
カバレッジが担保できていない(HTMLの組み合わせをあげると無限に近いなの で....)
品質 15 #prtimes_editor 管理画面 backend コンテンツAPI DynamoDB JSON JSON HTML
GET API POST API JSON, HTML 管理画面 ※簡略化したもの、実際とは異なる箇所があります
コンテンツAPI全体の検証は外形監視(Checkly)で実行 品質 16 #prtimes_editor • Checklyでの外形監視 https://www.checklyhq.com/ • コードベースで実装できる(Playwright風にも書ける) •
tiptapの入出力+アプリケーション実装の全体を検証している • 信頼性がある一方、カバレッジを計測できていない、担保できていないという課題 あり
品質 17 #prtimes_editor 管理画面 backend コンテンツAPI DynamoDB JSON JSON HTML
GET API POST API JSON, HTML 管理画面 ※簡略化したもの、実際とは異なる箇所があります
フロントの表示・操作はsnapshotテスト+実際のtiptapクライアントで 品質 18 #prtimes_editor • vitestのsnapshotで表示の確認(テスト用のレンダー関数を用意) ◦ toMatchSnapshot()で検証
フロントの表示・操作はsnapshotテスト+実際のtiptapクライアントで 品質 19 #prtimes_editor • testing-libraryでtiptapクライアント(useEditor)を直接使用する • React Hooksにtiptapのロジックを集約する •
mockの手間を省ける、実際のクライアントで 同期できるので信頼性が上がる • デメリット:テスト実行時間増
品質 20 #prtimes_editor 管理画面 backend コンテンツAPI DynamoDB JSON JSON HTML
GET API POST API JSON, HTML 管理画面 ※簡略化したもの、実際とは異なる箇所があります
ユーザー操作のテストはE2Eで検証 品質 21 #prtimes_editor • Playwrightで実装 • 正常系を担保するように書いている
テスト2年間運用してどうだった? 品質 • 全体的にテスト戦略の見直しが必要だと感じています。 • 課題:ユニットテスト時間の増加 • E2Eテストで担保できるケースが多いので、tiptapクラアントを使ったテストは削 減・移行しています。 •
バックエンドと同様に入出力(HTML→JSON)のアウトプットを検証するテスト を追加しています。 • バックエンド ◦ カバレッジを担保するためDynamoDBをdumpしてテストする方法を検討中 22 #prtimes_editor
目次 23 • 設計「技術選定・設計」 • 品質「テスト戦略」 • 使いやすさ「アクセシビリティ」 • 使いやすさ「HTMLにこだわる」
#prtimes_editor
アクセシビリティ 使いやすさ • リリースの際にマウス操作が前提になりがちなリッチエディタにおいても、キー ボード操作など、できるようにこだわって作りました。 • Radix UIを採用 ◦ select
◦ popover ◦ modal などを使用してリッチエディタのツールバー を実装 24 #prtimes_editor
アクセシビリティ 使いやすさ • エディタ内部のキーボード操作にこだわる ◦ ProseMirrorの `state.selection` でキーボードの状態が取れるので、挙動を カスタムできる ◦
キーボードのbackspaceキーで削除しにくい要素を削除対象にできたりなど を実装 25 #prtimes_editor
2年間運用してどうだった? 品質 • 削除しにくいなどのフィードバックが減った一方で、意図しない挙動が起きたなど ユーザーによってリッチエディタに求める挙動は異なるという学びがあった。 • スクリーンリーダーのユーザーに実際にリッチエディタを試してもらった ◦ エディタ内の装飾情報やツールの操作方法などを取得できず、満足に使用は できなかった
• リッチエディタを完璧にするよりも代替手段を検討するという選択肢 ◦ 同等の機能を要するマークダウンエディタや運用フローでカバーするなど? ▪ tiptap v3ではマークダウンにレンダーする機能が検討されている 26 #prtimes_editor
目次 27 • 設計「技術選定・設計」 • 品質「テスト戦略」 • 使いやすさ「アクセシビリティ」 • 使いやすさ「HTMLにこだわる」
#prtimes_editor
HTMLにこだわる 使いやすさ • (CMSという特性上もありますが)リッチエディタを作る時は徹底的に出力される HTML構造にこだわり、調査をしましょう • 弊社ではリリースの際に、社内のPM、HTML有識者、デザイナーとHTML勉強会 ・ユーザーに配信するHTMLについて議論を重ねました。 ◦ 仕様の明確化につながった
◦ これから追加されるかも知れない機能も明確化(HTML仕様に乗っ取ったも のをリリースしていくことになるので) ▪ 後方互換が壊れにくい、予測しやすい仕様・設計になる 28 #prtimes_editor
2年間運用してどうだった? 使いやすさ めちゃくちゃ大事な作業だった!! リッチエディタ作る全人類時間をかける価値はあります! 29 #prtimes_editor
まとめ • テスト戦略はフロントエンド界隈では「テスティングトロフィー」が引用されます が、テスト実行時間・テスト要件を考えて戦略を考えることが大切です。 ◦ 「テストサイズ」という考え方が参考になります。 ◦ tiptapの拡張して使用するという仕組み上、スモール(ユニット)テストも より有効になると感じています •
「HTMLにこだわる」のは時間をかける価値があります。 ◦ 仕様の明確化 ◦ 使いやすさ、アクセシビリティ的にも大きく貢献します。 30 #prtimes_editor
31 #prtimes_editor
Thanks :) 32 #prtimes_editor @ryusou_mtkh