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
Web技術を駆使してユーザーの画面を「録画」する
Search
Yuku Kotani
August 24, 2024
Programming
14
7.4k
Web技術を駆使してユーザーの画面を「録画」する
Yuku Kotani
August 24, 2024
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
380
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
700
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3.1k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.5k
Real World Type Puzzle and Code Generation
yukukotani
4
900
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
540
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
760
先を見据えたMVPのフロントエンド開発
yukukotani
0
310
Other Decks in Programming
See All in Programming
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
280
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
160
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.7k
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
750
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.3k
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
フロントエンドテストの育て方
quramy
9
2.5k
Featured
See All Featured
Unsuck your backbone
ammeep
670
57k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
500
Typedesign – Prime Four
hannesfritz
41
2.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Automating Front-end Workflow
addyosmani
1369
200k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A Philosophy of Restraint
colly
203
16k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Adopting Sorbet at Scale
ufuk
75
9.3k
Building an army of robots
kneath
304
45k
Transcript
Web技術を駆使して ユーザーの画面を「録画」する @yukukotani 2024/08/24 - フロントエンドカンファレンス北海道
自己紹介 小谷 優空 - @yukukotani ・VP of Technology @ Ubie,
Inc. ・Maintainer of KumaUI ・Student @ Univ. Tsukuba
うまいスープカレー
今日の趣旨 Webにおける画面録画(セッションリプレイ)の仕組みを覗いてみよう! 明日から業務に役立つ話はきっとありません Web技術にワクワクしましょう
Session Replay とは Webアプリにおけるユーザーの画面操作をそのまま視覚的に再生できるツー" 顧客インサイト抽E エラー分 ユーザーサポート
Demo
なぜ自作するのか
なぜ自作するのか toCプロダクトで全件録画すると課金爆発 $ B 月間100万セッションとすると$2,000G B サンプリングできるけど、ユーザーサポートとかには全件録画が欲しい →自作により、開発人件費を考慮しないコストは10%程度に着地
なぜ自作するのか 自社でデータを持ちた x 完全無料で使えるSaaSもあるが(Clarity)、学習利用されQ x もちろん匿名化されるとはいえ、自然言語入力とかも使われるとやや怖 x セルフホスト版もあるが、運用コストが高# x 機能がリッチすぎてミドルウェアが多く大
x 結果的にお金もそれなりにかかる
仕組み概観
基本的なアイデア 画面を動画ファイルとして録画できるWeb APIはない・・・ →DOM全体を clone して画面に反映すれば完全再現できるじゃん!
基本的なアイデア もちろん様々な問題があるので工夫が必W F ブラウザを跨いだ再生は F DOMに反映されない画面操作は F DOMが変わるたびに全更新してたら重くない?
録画 初期描画のDOMとその後の変化を、タイムスタンプと共にイベントとして記録 逐次イベント記録 Browser
再生 sandbox化したiframeによって、Viewer自体とは独立した環境を用意
再生 タイムスタンプに合わせて実際にイベントをiframeに反映していく DOM描画 スクロール 文字入力 DOM更新 iframe
アーキテクチャ ・検索系メタデータはDB、イベントデータはオブジェクトストレージ(GCS) ・GCSにはTTLを設定(録画の有効期限)
イベント詳解
初期描画イベント
初期描画イベント:録画 DOM全体をシリアライズして記$ 木構' 各要素にユニークIDを振る 要素ごとのユニークID
初期描画イベント:録画 色々なことを考慮してシリアライズすy p 再生時はwindowのlocationが異なy p → 画像のsrcなどは相対パスから絶対パスに変E p 再生時にassetが変わってる・消えてる可能性があy p
→ linkのスタイルシートはDOM内にインラインI p ユーザーが任意の要素を差し込めてしま5 p → 再生側にXSSされないようscriptタグは除却
初期描画イベント:再生 デシリアライズした要素をiframeに描画 IDと要素のマッピングは記憶しておく
文字入力イベント
文字入力イベント:録画 ユーザーの入力は inputイベントを拾って記録する
文字入力イベント:録画 機械的な入力(リセットボタン等)はinputイベントが発火しない!
文字入力イベント:録画 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
文字入力イベント:録画 input要素のPropertyDescriptorをオーバーライドして補足する オリジナルの処理に加えて イベント記録処理を追加 オリジナルの処理に加えて イベント記録処理を追加 オリジナルのPropertyDescriptorを取り出しておく
setTimeoutに包むことで 次のイベントループに逃す 文字入力イベント:録画 (小ネタ)本来のプロパティ更新をブロッキングするとパフォーマンス低下する →次のイベントループに逃して非同期にイベント記録処理
文字入力イベント:録画 属性からセンシティブな入力を判定し、イベントを記録しないように 再生側ではなく録画側で弾いているため、データ送信・保持は一切ない
文字入力イベント:再生 初期描画時に振ったユニークIDから 要素を探して更新
DOM更新イベント
DOM更新イベント https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
DOM更新イベント:録画 MutationObserverでdocument監% 5 要素の追加・削 5 属性の変 5 文字ノードの変更 DOM更新部分の親要素 追加した文字ノード
削除したフォーム要素
DOM更新イベント:録画 変更内容をイベントとして記録 初期描画時に振った ユニークIDで参照 新規ノードにも ユニークIDを降る
DOM更新イベント:再生 更新があった部分のみに差分を反映 仮想DOMの差分更新と似ている ユニークIDから更新対象を取得 追加するノードは新規作成
他にもたくさん考えることが 時間の都合で割愛' d iframQ d ShadowDOW d document.adoptedStyleSheets d canvas
d 画面リサイズ・スクロール・マウス移0 d Web Components (Custom Elements d イベントのスロットリング
自作しなくても便利OSSがあります プリミティブな録画&再生の仕組みを提供してくれるライブラリ SentryやPostHogでも使われている ※イベントの保存とかはスコープ外
保存周りも近日中にOSSにします サクッと自社クラウドに載せて動かせるやつを出すので乞うご期待
ありがとうございました