[{"data":1,"prerenderedAt":321},["ShallowReactive",2],{"content-/download-animation-issue":3,"all-pages-for-dir":298,"related-/download-animation-issue":299,"og-image-/download-animation-issue":320},{"id":4,"title":5,"body":6,"category":283,"concepts":283,"description":284,"extension":285,"meta":286,"navigation":287,"ogImage":283,"path":288,"project_name":283,"published":289,"publishedAt":290,"seo":291,"source":283,"stem":292,"tags":293,"todo":283,"unpublished":289,"updatedAt":290,"__hash__":297},"pages/2025-12/2025-12-03/download-animation-issue.md","ダウンロード動画でアニメーションが反映されない件（仮説メモ）",{"type":7,"value":8,"toc":271},"minimark",[9,13,17,38,42,60,63,121,124,129,132,166,170,236,239,252,255],[10,11,5],"h1",{"id":12},"ダウンロード動画でアニメーションが反映されない件仮説メモ",[14,15,16],"h2",{"id":16},"症状",[18,19,20,28,35],"ul",{},[21,22,23,27],"li",{},[24,25,26],"code",{},"Download Video"," ボタン実行で生成される WebM がチカチカするだけで、チャットの出現アニメーションが再現されない",[21,29,30,31,34],{},"プレビューの ",[24,32,33],{},"Play"," では想定どおりのフェード＆スライド表示になるが、録画結果ではメッセージが静止状態のまま",[21,36,37],{},"同じフレームが繰り返し記録されているように見える（メッセージが一瞬だけ写る、真っ白になる）",[14,39,41],{"id":40},"再現条件現状","再現条件（現状）",[18,43,44,57],{},[21,45,46,49,50,53,54,56],{},[24,47,48],{},"apps/web/content/2025-12-03/message-mockup.html"," を ",[24,51,52],{},"file://"," で直接開き、",[24,55,26],{}," を押下",[21,58,59],{},"デフォルトの初期メッセージ 2 件でも発生",[14,61,62],{"id":62},"原因仮説",[64,65,66,85,102,113],"ol",{},[21,67,68,69],{},"html2canvas のレンダリング遅延\n",[18,70,71,78],{},[21,72,73,74,77],{},"1フレームごとに ",[24,75,76],{},"html2canvas"," を実行しており、「DOM 変更→描画→待ち時間 30ms」のループがリアルタイムに追いついていない",[21,79,80,81,84],{},"canvas.captureStream(0) で 0fps に設定しているため、",[24,82,83],{},"requestFrame()"," を呼んでもレンダリング完了前の古いフレームが拾われている可能性",[21,86,87,88],{},"フレームの時間管理ずれ\n",[18,89,90,96],{},[21,91,92,95],{},[24,93,94],{},"await sleep(30)"," で待機しているが、html2canvas の非同期処理時間（>100ms）が無視され、結果的に 1 コマを複数回 push → チカチカ",[21,97,98,101],{},[24,99,100],{},"hold"," 区間で同じ canvas インスタンスを複数 push しており、後続で canvas が再利用されると同一フレームが上書きされるリスク",[21,103,104,105],{},"DOM スナップショットが中途半端\n",[18,106,107,110],{},[21,108,109],{},"newElement に opacity/transform を設定した直後にキャプチャしており、レイアウトが安定する前に描画が始まっている",[21,111,112],{},"scale:2 指定により描画時間がさらに増大",[21,114,115,116],{},"MediaRecorder 設定のミスマッチ\n",[18,117,118],{},[21,119,120],{},"stream.framerate=0（デフォルト）だと動画時間の計算がズレ、再生側でのフレーム間隔が不均一になる可能性",[14,122,123],{"id":123},"録画との整合",[18,125,126],{},[21,127,128],{},"手元の WebM 録画でもメッセージ出現が反映されずチカチカする症状が再現し、上記「フレーム重複／タイミングずれ」仮説と一致。",[14,130,131],{"id":131},"当面試したい切り分け",[18,133,134,141,151,157],{},[21,135,136,137,140],{},"html2canvas 1 回のみ実行し、既存 canvas のピクセルを ",[24,138,139],{},"ctx.putImageData"," で複製 → フレーム配列に入れてもチカチカするか確認",[21,142,143,146,147,150],{},[24,144,145],{},"canvas.captureStream(30)"," に固定し、各フレーム描画後に ",[24,148,149],{},"await new Promise(r => requestAnimationFrame(r))"," を挟んで MediaRecorder に一定周期で渡す",[21,152,153,156],{},[24,154,155],{},"scale:1"," に下げて計測（描画時間短縮効果が大きいか）",[21,158,159,161,162,165],{},[24,160,52],{}," ではなく ",[24,163,164],{},"npx serve apps/web/content/2025-12-03"," などローカル HTTP で開き、Worker/CORS 由来の遅延がないか比較",[14,167,169],{"id":168},"恒久的な対応案優先度順","恒久的な対応案（優先度順）",[64,171,172,186,203,220],{},[21,173,174,178],{},[175,176,177],"strong",{},"html2canvas をフレーム毎に回さない",[18,179,180,183],{},[21,181,182],{},"初回のみ DOM→canvas にレンダリングし、以降は Canvas 上でトランジションを直接描く（テキスト配置を自前実装）",[21,184,185],{},"労力は高いが最も安定した動画出力が期待できる",[21,187,188,191],{},[175,189,190],{},"フレーム生成と録画を分離",[18,192,193,200],{},[21,194,195,196,199],{},"全フレームを ImageBitmap/Blob でプリレンダ→",[24,197,198],{},"VideoEncoder"," (WebCodecs) または gifenc で連結",[21,201,202],{},"MediaRecorder 依存を外すことでフレーム間隔を完全制御",[21,204,205,208],{},[175,206,207],{},"アニメーションを CSS + requestAnimationFrame に寄せる",[18,209,210,217],{},[21,211,212,213,216],{},"DOM 側で実際にアニメーションを走らせ、",[24,214,215],{},"captureStream(30)"," でリアルタイム録画（スクリプトはプレイヤー用と録画用で共用）",[21,218,219],{},"タイムライン管理を CSS トランジション開始時刻ではなく rAF で司る",[21,221,222,225],{},[175,223,224],{},"解像度とエンコーディングを下げる暫定策",[18,226,227],{},[21,228,229,231,232,235],{},[24,230,155],{},"・",[24,233,234],{},"videoBitsPerSecond"," を 2〜3Mbps に落としてまず滑らかさを確保",[14,237,238],{"id":238},"追加で欲しい計測",[18,240,241,246,249],{},[21,242,243,245],{},[24,244,76],{},"の1回あたりの実測時間（Performance.nowで計測）",[21,247,248],{},"出力WebMのフレーム数・再生時間（ffprobe等）",[21,250,251],{},"端末/ブラウザ別の再現性（Chrome/Edge/Firefox）",[14,253,254],{"id":254},"関連ファイル",[18,256,257,261,266],{},[21,258,259],{},[24,260,48],{},[21,262,263],{},[24,264,265],{},"apps/web/content/2025-12-03/message-mockup.js",[21,267,268],{},[24,269,270],{},"apps/web/content/2025-12-03/message-mockup.css",{"title":272,"searchDepth":273,"depth":273,"links":274},"",2,[275,276,277,278,279,280,281,282],{"id":16,"depth":273,"text":16},{"id":40,"depth":273,"text":41},{"id":62,"depth":273,"text":62},{"id":123,"depth":273,"text":123},{"id":131,"depth":273,"text":131},{"id":168,"depth":273,"text":169},{"id":238,"depth":273,"text":238},{"id":254,"depth":273,"text":254},null,"WebM録画時にチャットの出現アニメーションが再現されない問題の原因分析と対策案","md",{},true,"/download-animation-issue",false,"2025-12-03T00:00:00.000Z",{"title":5,"description":284},"2025-12/2025-12-03/download-animation-issue",[76,294,295,296],"MediaRecorder","Animation","Debug","tIbAFGhvQHDzCKUjQ1ovkc2xOiWt9SBOU-s4AaZRUdw",[],[300,304,308,312,316],{"title":301,"path":302,"publishedAt":303},"React TSXの掛け算スライドショーをVue.jsに移植した記録","/multiplication-slideshow-vue","2026-03-22T00:00:00.000Z",{"title":305,"path":306,"publishedAt":307},"Financial Quiz 引き継ぎメモ","/financial-quiz-handoff","2025-12-22T00:00:00.000Z",{"title":309,"path":310,"publishedAt":311},"アニメーションダウンロード機能 実装計画","/animation-download-plan","2025-12-13T00:00:00.000Z",{"title":313,"path":314,"publishedAt":315},"animation-demo-2 スクロールアニメーション教材コンポーネント","/animation-demo-2-documentation","2025-12-12T00:00:00.000Z",{"title":317,"path":318,"publishedAt":319},"比例縮尺財務諸表コンポーネントのデバッグ記録","/proportional-financial-statements-debug","2025-12-09T00:00:00.000Z","https://log.eurekapu.com/og/blog/download-animation-issue.png?v=2025-12-03T00%3A00%3A00.000Z&title=%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E5%8B%95%E7%94%BB%E3%81%A7%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E4%BB%B6%EF%BC%88%E4%BB%AE%E8%AA%AC%E3%83%A1%E3%83%A2%EF%BC%89&author=Kei%20Komatsu&sig=920daeb73cd6db00",1785654671171]