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.3k
Web技術を駆使してユーザーの画面を「録画」する
Yuku Kotani
August 24, 2024
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
640
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.4k
Real World Type Puzzle and Code Generation
yukukotani
4
880
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
530
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
740
先を見据えたMVPのフロントエンド開発
yukukotani
0
310
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
3k
Other Decks in Programming
See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
チームリードになって変わったこと
isaka1022
0
210
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
810
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
870
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
100
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
PRレビューのお供にDanger
stoticdev
1
170
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
980
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Facilitating Awesome Meetings
lara
52
6.2k
Producing Creativity
orderedlist
PRO
344
39k
Gamification - CAS2011
davidbonilla
80
5.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fireside Chat
paigeccino
34
3.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
GitHub's CSS Performance
jonrohan
1030
460k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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にします サクッと自社クラウドに載せて動かせるやつを出すので乞うご期待
ありがとうございました