MousePlayer の仕組み

トラッキングのアーキテクチャ、デバイスごとの画面解像度への対応、システムの制限を分かりやすく説明します。

1. 動画録画を使わない理由

ビジュアル分析ツールは訪問者の画面を通常の動画ファイル（MP4 や WebM など）として録画する、という誤解がよくあります。この方式では膨大な帯域幅を消費し、Web サイトが大幅に遅くなり、文字もぼやけて読みにくくなります。

MousePlayer は代わりに、次の軽量な技術を使います： DOM スナップショットテレメトリー。基本的な仕組みは次のとおりです。

設計図となるスナップショット

訪問者がページを開くと、スクリプトが HTML とスタイルの構造をテキスト形式の「設計図」として取得します。ページの画像・動画ファイルをコピーせず、要素の位置を記録します。再生時には、プレーヤーが画像を元のアドレスから読み込みます。例外は canvas 要素で、その内容は画像として送信されます（後述）。

座標のテレメトリー

ユーザーの操作に伴い、マウスの位置、スクロールの深さ、クリック対象、ブラウザーのサイズ変更というイベントの流れに加えて、ページ自体の変更を記録します。設定に応じて、コンソールメッセージ、失敗したリクエストや遅いリクエスト、読み込み時間の測定値（Web Vitals）も記録します。移動とクリックのデータは小さい一方、ページのスナップショットや変更はページによって大きくなることがあり、圧縮して送信されます。

Theatre での再生

ダッシュボードでセッションを視聴すると、プレーヤーが記録された設計図からページを再構成し、その上で仮想ポインターをリアルタイムに動かします。文字は鮮明に保たれます。

軽量であるための設計： スクリプトは非同期で読み込まれ、動画の代わりに小さな数値データを送るため、スクリプト自体の負荷は小さく抑えられます。Core Web Vitals への影響は、ページ、ホスティング、訪問者のネットワークによって変わります。当社の数値をそのまま使わず、ご自身のサイトで測定してください。特定の読み込み速度は保証しません – 次の第20条をご覧ください： 利用規約。

2. 画面解像度 & モバイルデバイスへの対応

現在のユーザーは、小型のスマートフォンから超横長の4Kデスクトップモニターまで、さまざまな画面で閲覧します。Web サイトは画面幅に合わせてレイアウトを移動、折り返し、再配置します。これがレスポンシブ Web デザインです。

訪問者のビューポートを正確に再現する方法

再生画面がゆがまないよう、MousePlayer は訪問者のビューポートの正確な寸法を記録します（例：スマートフォンでは 390x844 、デスクトップモニターでは 1920x1080 ）。Theatre プレーヤーを開くと、元の画面比率を正確に反映する、縮尺を調整したサンドボックスをエンジンが作成します。

デスクトップ & ノートパソコンの画面

通常のコンピューターでは、同じブラウザーセッション内の連続したマウス移動と複数タブでのページ移動を記録します。ホバーで開くメニューは、その操作でページのドキュメントが変わる場合に再生されます。CSS のみのホバー効果はドキュメントに現れないため、再生では再現されません。

スマートフォン & タブレット

タッチ画面には、ホバーするマウスポインターがありません。MousePlayer は自動的に対応し、タップ操作、スワイプによるスクロール、縦向き・横向きの変更を記録します。

セッション途中のサイズ変更という課題

訪問者がセッションの途中でタブレットを回転させたり、デスクトップのブラウザーウィンドウのサイズを変えたりすると、サイトのレイアウトも動的に変化します。MousePlayer はこれらのウィンドウサイズ変更を記録し、再生するキャンバスをその場で滑らかに調整して、操作の文脈を保ちます。

3. システムの制限 & 技術的な境界

ユーザーのプライバシー、ブラウザーの安全性、データ処理の速さを守るため、MousePlayer には次の技術的な制限があります。

システムの制限 MousePlayer の対応
iframe ページと同一オリジンの iframe は、その内容と内部の操作を含めて記録します。別オリジンの埋め込みコンテンツ（YouTube プレーヤー、Stripe の決済フォームなど）の内部は、ブラウザーのセキュリティポリシー（同一オリジンポリシー）により記録できません。再生ではプレースホルダーとして表示され、そのコンテンツは読み込まれません。
機密性の高い入力欄（PII） パスワード欄と決済欄は、どのマスキングレベルでも訪問者のデバイス上でマスクされます。また、すべてのフォーム入力を完全にマスクする設定が、すべてのプロパティの初期設定です。入力があったことは分かりますが、入力内容は見えません。二つの制限があります。マスキングの弱い二つのレベルは当社の書面による承認がある場合に限り有効にできます。また、ご自身のページがドキュメントに表示する内容まではマスクしません – 住所を表示する確認ページもスナップショットに含まれます。いずれも次に定めています： データ処理契約。
Canvas & WebGL 要素 canvas の内容は、ページのスナップショット取得時に1回、その後は変更があるたびに画像として記録します。頻度は最大でおよそ1秒に1回で、サイズにも上限があります。そのため、滑らかなアニメーションは連続するフレームとして表示されます。マスクされた領域や、別オリジンの画像を含む canvas 要素については、画像を送信しません。WebGL の内容は空のままになる場合があります。
Web コンポーネント（Shadow DOM） 開かれたシャドールートは内容とともに記録します。閉じたシャドールートにはスクリプトからアクセスできないため、その内容は再生に含まれません。
転送 & ブラウザーストレージ データは暗号化された WebSocket 接続（HTTPS/WSS）で送信されます。プロキシなどの理由で接続できない場合、スクリプトは暗号化された HTTP 経路に切り替えます。非常に大きいページのスナップショットは HTTPS で別途アップロードされます。MousePlayer は Cookie を設定せず、サイト上でブラウザーのローカルストレージとセッションストレージを使います。
離席中の AFK 期間 訪問者がタブを開いたまま20分間離席した場合、エンジンが自動的に非アクティブ状態を検出し、再生時にその空白時間を圧縮します。静止した画面を見続ける必要はありません。