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
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
BtoBプロダクト開発の深層
16bitidol
0
170
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
290
Green Tea Garbage Collector の今
zchee
PRO
2
380
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
11k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
190
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.5k
about #74462 go/token#FileSet
tomtwinkle
1
280
VCC 2025 Write-up
bata_24
0
170
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
110
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
540
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Gamification - CAS2011
davidbonilla
81
5.5k
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