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
6.8k
Web技術を駆使してユーザーの画面を「録画」する
Yuku Kotani
August 24, 2024
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
10
2.6k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
1.2k
Real World Type Puzzle and Code Generation
yukukotani
4
810
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
470
GraphQLスキーマ設計の勘所
yukukotani
40
17k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
660
先を見据えたMVPのフロントエンド開発
yukukotani
0
280
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
2.9k
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
3k
Other Decks in Programming
See All in Programming
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
360
"noncopyable types" の使いどころについて考えてみた
andpad
0
160
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
10
1.5k
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
140
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
400
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
190
Progressive Web Apps for Rails developers
siaw23
2
550
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1k
フロントエンドの現在地とこれから
koba04
10
4.5k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.7k
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
230
What is TDD?
urakawa_jinsei
1
220
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Fireside Chat
paigeccino
32
3k
Unsuck your backbone
ammeep
668
57k
The Language of Interfaces
destraynor
154
24k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Typedesign – Prime Four
hannesfritz
39
2.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Rails Girls Zürich Keynote
gr2m
93
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
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にします サクッと自社クラウドに載せて動かせるやつを出すので乞うご期待
ありがとうございました