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.7k
Web技術を駆使してユーザーの画面を「録画」する
Yuku Kotani
August 24, 2024
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
AI Coding Agent Enablement in TypeScript
yukukotani
18
9.2k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.2k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
470
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
780
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.2k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.6k
Real World Type Puzzle and Code Generation
yukukotani
4
940
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
570
GraphQLスキーマ設計の勘所
yukukotani
42
18k
Other Decks in Programming
See All in Programming
GoのWebAssembly活用パターン紹介
syumai
3
10k
Java on Azure で LangGraph!
kohei3110
0
130
関数型まつりレポート for JuliaTokai #22
antimon2
0
110
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
260
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
100
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
230
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
310
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
Claude Codeの使い方
ttnyt8701
1
110
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
110
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Building an army of robots
kneath
306
45k
How GitHub (no longer) Works
holman
314
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
The Cult of Friendly URLs
andyhume
79
6.4k
4 Signs Your Business is Dying
shpigford
184
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Documentation Writing (for coders)
carmenintech
71
4.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Language of Interfaces
destraynor
158
25k
Raft: Consensus for Rubyists
vanstee
140
7k
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にします サクッと自社クラウドに載せて動かせるやつを出すので乞うご期待
ありがとうございました