[{"data":1,"prerenderedAt":262},["ShallowReactive",2],{"content-/fs-story-video-player-feedback":3,"all-pages-for-dir":240,"related-/fs-story-video-player-feedback":241,"og-image-/fs-story-video-player-feedback":261},{"id":4,"title":5,"body":6,"category":219,"concepts":220,"description":221,"extension":222,"meta":223,"navigation":224,"ogImage":220,"path":225,"project_name":226,"published":227,"publishedAt":228,"seo":229,"source":230,"stem":231,"tags":232,"todo":220,"unpublished":227,"updatedAt":220,"__hash__":239},"pages/2026-10/2026-10-15/fs-story-video-player-feedback.md","財務諸表ストーリー版の動画プレイヤーを直す：字幕領域の拡張、区切り付き進捗バー、フィードバックの観点化",{"type":7,"value":8,"toc":205},"minimark",[9,13,17,20,25,33,44,48,51,54,57,64,74,77,81,88,91,94,97,100,103,106,109,112,115,118,122,125,128,131,135,138,141,163,166,169,172,175,179,182,185,188,191],[10,11,12],"h1",{"id":12},"財務諸表ストーリー版の動画プレイヤーを直す",[14,15,16],"p",{},"財務諸表講座のストーリー版（36回）を、朝のうちに本番へ公開した。\nそのあと dev の画面を開くと、画の下に灰色の帯が居座っていた。\nもともとは字幕が出る領域だったと思われる場所が、何も映さないまま画面の下を占めていた。",[14,18,19],{},"この日は、その帯を消すところから始まり、進捗バー、ヘッダーの音声操作、午後のフィードバック対応へと続いた。\n途中で一度、変更のたびに回している全数検証の量に引っかかった。",[21,22,24],"h2",{"id":23},"前のセッションから持ち越した-r2-アップロード","前のセッションから持ち越した R2 アップロード",[14,26,27,28,32],{},"前のセッションで、「36回分すべて R2 に上げてください」と頼んでいた。\n対象は mp3 252本、約86 MiB で、欠けはなかった。\nアップロード用のスクリプトに ",[29,30,31],"code",{},"--all"," を足させてから、裏で流した。\n完了を待つあいだに計画書の進み具合を更新させ、引き継ぎをダウンロードフォルダにテキストで書き出させた。",[14,34,35,36,39,40,43],{},"次のセッションで引き継ぎを読ませると、アップロードは途中で落ちていた。\nログの末尾は fork の失敗で終わり、",[29,37,38],{},"done:"," の行がなかった。\nR2 の実在を全数 HEAD で確かめさせると、252本中152本があり、100本（18回分）が届いていなかった。\nその18回分（107本）だけを上げ直させ、もう一度全数 HEAD をかけた。\n252本すべてが 200 と ",[29,41,42],{},"audio/mpeg"," を返したので、計画書を更新してコミットした。\n落ちたことに気づけたのは、全数 HEAD で確かめさせたからだ。",[21,45,47],{"id":46},"公開前の全数検証と朝の公開","公開前の全数検証と、朝の公開",[14,49,50],{},"公開の前に、Playwright の検証スクリプトを書かせた。\n36回を2つの幅で開き、回またぎ、自動で進む、JS なしの表示までを確かめるものだ。\n結果は180項目すべて OK、コンソールエラーは0件だった。\n制作画面との見比べも、No01、No06、No20、まとめの回で同じ時刻の画を並べ、一致を確かめた。\nそのうえで、36回を 07:43 に本番へ公開した。",[21,52,53],{"id":53},"灰色の余白に押し込められていた画",[14,55,56],{},"もったいないので、灰色の帯をやめて画面いっぱいに広げてほしいと頼んだ。\nあわせて、取引の回にある「取引、5要素、仕訳」のステッパーのように、説明の回でも話の区切りを画面の外に切り出したいと伝えた。",[14,58,59,60,63],{},"説明の回の画は、マインドマップの部品に見出しと余白が付いた形で描かれていた。\nそこで、部品に見出しと余白を外す指定（",[29,61,62],{},"bare","）を足させた。\n話の区切りは、取引の回と同じように右の文の列へ見出しとして付ける、という解釈で進めさせた。\n10本の説明の回で文ごとの見出しを書き出すと、basics-02 だけ25文が見出しなしになると分かった。",[14,65,66,67,70,71,73],{},"dev で見ると、見出しと灰色の余白は消え、画は列いっぱいに映った。\nところが、根から右下へ伸びる曲線が出ていた。\n原因は枝の線を描く処理にあった。\n",[29,68,69],{},"portrait"," の指定だけを見て向きを決めていたため、",[29,72,62],{}," のときに横向きの曲線で描いていたのだ。\n向きの判定を直させると、線は下へ伸びる縦のツリーに戻った。",[14,75,76],{},"狭い幅（390、844×390）を測ろうとすると、画面の部品が起動していないように見えた。\nコンソールを見ると、起動が遅かっただけだった。\n測り直すと、はみ出しはなかった。\nCodex でレビューすると、「図に寄るときのカメラが、固定の縦長の範囲で倍率を計算している」という指摘が high で出た。\n狭い幅と広い幅で図に寄る場面を撮らせ、枠に収まっていることを確かめてからコミットした（2ce6e716）。",[21,78,80],{"id":79},"pc版横と膨らむ全数検証","PC版（横）と、膨らむ全数検証",[14,82,83,84,87],{},"続けて、説明の回の画を縦（スマホ版）と横（PC版）の2つの版に分けることにした。\nミラーカラムの共有部品には、チャプターの左に親の列を出す仕組みがまだなかった。\nそこで、先頭へ1列足せる任意の指定（",[29,85,86],{},"leadColumn","）を加えさせた。\n渡さなければ何も出ないので、ほかの約70ページの見た目は変わらない。",[14,89,90],{},"PC版を足したあと、PC版36回とスマホ版の全数検証を裏で流させた。\nここで、どれを対象にしているのかを聞いた。\n「また膨大な量を検証していないか」という確認である。",[14,92,93],{},"返ってきた答えは、PC版は最後まで流し、スマホ版の再確認は止めるというものだった。\nスマホ版は、チャプターの境目をまたぐ1チャプター分だけを確かめる。\nしばらくして「順調なのか」と聞いた。\n途中で止まった検証は終わらせ、残りの108件（→、←、自動で進む）を1件ごとに時間切れを付けて流し直しているところだった。\nPC版は108件すべて通り、スマホ版も1チャプター分の20件がすべて通った。\nPC版は 990a4591 としてコミットし、10:15 に本番へ出した。",[14,95,96],{},"変更に関わらない範囲まで毎回全数を回すと、待ち時間だけが増える。\n変えた版は全数、変えていない版は境目の1チャプター、という切り分けに落ち着いた。",[21,98,99],{"id":99},"区切りの見える進捗バー",[14,101,102],{},"PC版の画には、帯の中に短い再生位置のつまみがあった。\n各回の動画は、どこで文が切れるか（→ ← で止まる位置）が分かっている。\nそれにしては、つまみが短すぎる。\nそこで、字幕の帯のすぐ下（外側）に、コンテンツの幅いっぱいの進捗バーを出してほしいと頼んだ。",[14,104,105],{},"バーには文の区切りに線を入れ、「何文目／全何文」と時刻を添えさせた。\nCF 講座とほかの講座の見た目は変更前と一致し、PC版の操作23件も通った。\nボタンを押したあとに ← → が効かなくなる経路がないかも、ミラーカラムのキー処理まで見させた。",[14,107,108],{},"あわせて、ストーリー版でも制作中の「完了」とフィードバックを記録できるようにした（7d0da6e6）。\nこの欄は dev のときだけ出て、本番の講座には出ない。",[21,110,111],{"id":111},"ヘッダーの音声操作が消えていた",[14,113,114],{},"フィードバック欄を足したあと、ヘッダーにあった音声の操作が見当たらなくなった。\n確かめさせ、ヘッダーには速度のボタンを小さくした形で戻させた。\nフィードバック欄は、共通の部品に足した差し込み口（タイムラインの下に中身を入れ、画はそのぶん縮める）から渡す形にした。\nこれらを含む3点をコミットした（c83e0ea9）。",[14,116,117],{},"ここで自分のレビューに入るため、計画書の §4 に「2026-10-15 12:20 時点の進み具合」を足させた（1d23af87）。\n本番に出ているもの、dev だけのもの、これから行うフィードバック、残りの作業を分けて書いてある。\n引き継ぎはダウンロードフォルダにテキストで置き、セッションを替えた。",[21,119,121],{"id":120},"午後のフィードバックと横向きはあるはず","午後のフィードバックと「横向きはあるはず」",[14,123,124],{},"講座のページから書き込むのはやりにくかったので、フィードバックはターミナルで伝えることにした。\n最初の指摘は、説明の回の冒頭にある「活動、取引、簿記、報告」のマインドマップだった。\nこれは要らないと思った。\n次のコマにある「会計の流れ」の図をいきなり出して、そこから説明すればよい。\nそして、この図には横向きの版があるはずだと伝えた。",[14,126,127],{},"リポジトリの中を探させると、縦長の版（1200×1233）と横長の版（1200×649〜755）が見つかった。\n見比べ用のスクショを撮る道具で手間取り、書き直させる場面もあった。\n見比べた結果、「会計の流れ」の横向きはリポジトリ内には無く、縦長しかないと分かった。\n昔の講座フォルダを探させ、次に旧サイトのスライドを当たらせた。\nすると、横長のスライド（1680×1050）が9枚見つかり、語りと同じ順でコマが積み上がっていた。\n横向きの図は、やはりあった。",[14,129,130],{},"ここまでの6件は、計画書の段10に書き留めさせた。\n画像は保存できないので、言葉に言い換えさせ、PC版の4つの回のフィードバック欄にも「第1回フィードバック」として保存させた。\n件数の API でも、4回とも1件として数えられていた。\nもう修正したのかと聞くと、まだ何も直していなかった。\nフィードバックが出そろうまで待っていたという。",[21,132,134],{"id":133},"_6件を観点にまとめて10本へ横展開する","6件を観点にまとめて、10本へ横展開する",[14,136,137],{},"昼食に出る前に、直し始めてほしいと頼んだ。\n直接指摘した箇所だけでなく、観点として抽象化し、似た問題がほかにあれば直してほしい。\n直したところは URL で全部教えてほしい、とも伝えた。",[14,139,140],{},"6件は次の観点にまとめ直させ、計画書の段10に書き足させた。",[142,143,144,148,151,154,157,160],"ul",{},[145,146,147],"li",{},"図があるなら、箱ではなく図で説明する",[145,149,150],{},"PC版は横の図を使う",[145,152,153],{},"最初の画は、根と枝の名前だけにする",[145,155,156],{},"机は、話している枠だけを映す",[145,158,159],{},"スライドで図にしていた話は、図で説明する",[145,161,162],{},"数字のつながりは、線と光でたどる",[14,164,165],{},"説明の回の残り7本は4つのエージェントに並列で監査させ、導入1、3、5は親のセッションで直させた。\nスライドの上の帯は高さ 37px だったので、y=40 で切り落として取り込ませた。",[14,167,168],{},"テストでは、想定どおりの失敗（古い冒頭の画のルール）が2件出た。\nもう1つ、横の画が枠に収まらないという失敗があった。\nカメラは横の図を使っているのに、テストが縦の図で測っていたせいだった。\nテストを版ごとの図で測る形に直させた。",[14,170,171],{},"導入2の一覧では、95秒の画が真っ白、58秒の画が根だけになっていた。\n撮り直すと図は正しく出ていて、撮影の瞬間のずれだった。\n写真の入ったスライド4枚は PNG から JPEG に変えさせ、合計 13MB が 1.9MB になった。",[14,173,174],{},"結局、9本を直してコミットした。\n「はじめに」は観点に当たる場面がなかったので変えていない。\n台本の文と音声にも手を入れていない。\n取り込んだスライド画像73枚は、コードとは別のコミットにした。",[21,176,178],{"id":177},"財務諸表が真ん中に来ない","⑥ 財務諸表が真ん中に来ない",[14,180,181],{},"次の指摘は、取引の回で ⑥ 財務諸表を説明している場面だった。\nこのとき、左側の ③ 仕訳帳と ⑤ 残高試算表を出す必要はほぼない。\n引きの画では、必ず ⑥ が真ん中に来てほしい。\nところが毎回微妙にずれて、上下が見切れていた。\nたぶん全部の取引で同じことが起きている、と伝えた。",[14,183,184],{},"原因は、⑥ のカメラが ⑤ 試算表まで含めて撮り、机の右端で止まっていたことだった。\n⑥ のあいだは ③〜⑤ を隠し、⑥ を真ん中に置くカメラにさせた。\n検算すると、1.31〜1.44倍の「少しだけ寄る」画が残っていた。\nこれが「微妙にずれる」画に当たると見て、⑥ 全体に引く判定のしきい値を 1.5 に上げさせた。\n長い No20 と No21 でテストが時間切れになったので、隣のテストと同じ30秒の上限を付けさせた。",[14,186,187],{},"PC版の取引の回25本すべてで、⑥ の段では ③ と ⑤ が消え、引きのときは ⑥ 全体が上下も切れずに真ん中に来るようになった。\nスマホ版は今までどおりだ。\n最後に、メモリ不足で dev サーバーが止められ、案内した確認用の URL はその時点で開けなくなった。",[21,189,190],{"id":190},"学びメモ",[142,192,193,196,199,202],{},[145,194,195],{},"「横向きはあるはず」と言ったとき、リポジトリには縦長しかなかった。探す範囲を昔の講座フォルダと旧サイトのスライドまで広げさせて、ようやく横長が出てきた",[145,197,198],{},"直接の指摘を6つの観点に言い換えておくと、指摘していない回にも同じ物差しを当てられる。10本のうち9本に当てはまる場面があった",[145,200,201],{},"全数検証は、変えた版だけを全数にし、変えていない版は境目の1チャプターに絞れば足りた",[145,203,204],{},"裏で流したアップロードは、次のセッションで全数 HEAD をかけて初めて、途中で落ちていたと分かった",{"title":206,"searchDepth":207,"depth":207,"links":208},"",2,[209,210,211,212,213,214,215,216,217,218],{"id":23,"depth":207,"text":24},{"id":46,"depth":207,"text":47},{"id":53,"depth":207,"text":53},{"id":79,"depth":207,"text":80},{"id":99,"depth":207,"text":99},{"id":111,"depth":207,"text":111},{"id":120,"depth":207,"text":121},{"id":133,"depth":207,"text":134},{"id":177,"depth":207,"text":178},{"id":190,"depth":207,"text":190},"dev",null,"財務諸表講座のストーリー版で、灰色の余白に押し込められていた画を列いっぱいに広げ、文の区切りが見える進捗バーを足した。午後はフィードバック6件を観点にまとめて説明の回10本へ横展開し、音声 mp3 252本の R2 アップロードも上げ直して全数そろえた。","md",{},true,"/fs-story-video-player-feedback","eurekapu-nuxt4",false,"2026-10-15T00:00:00.000Z",{"title":5,"description":221},"make-diary","2026-10/2026-10-15/fs-story-video-player-feedback",[226,233,234,235,236,237,238],"財務諸表","動画プレイヤー","Nuxt","Cloudflare R2","Playwright","Claude Code","J54DB1wz6lZna-33-AEbwIHCRvdEW8rq3yzPzwgJucM",[],[242,246,249,253,257],{"title":243,"path":244,"publishedAt":245},"会計講座の動画にフィードバックを反映した記録：IB配色は数字だけに、財務諸表講座は縦の画と台本の横並びへ","/accounting-course-scene-feedback-ib-color-fs-layout","2026-10-14T00:00:00.000Z",{"title":247,"path":248,"publishedAt":245},"世界のランドマーク996体の3Dビューアと地図の旅ページを作り、公開スイッチで本番を404に留めた","/world-landmarks-3d-travel-map-publish-switch",{"title":250,"path":251,"publishedAt":252},"財務諸表のテキストを節ごとの動画にする：Claude Codeのサブエージェント5体で1〜5章の台本と画をそろえた","/fs-textbook-video-scenes","2026-10-10T00:00:00.000Z",{"title":254,"path":255,"publishedAt":256},"財務諸表講座の動画をスマホ縦画面に作り直す：縦1列のレイアウトと、見出しを消した財務諸表シーン","/fs-video-mobile-vertical-layout","2026-10-05T00:00:00.000Z",{"title":258,"path":259,"publishedAt":260},"2026年5月15日の開発日記 - 都道府県クイズ12ページ完成・地図クイズ4種・eurekapu 77ページ2カラム化・yomitoku 0.13.0 まで","/2026-05-15-diary","2026-05-15T00:00:00.000Z","https://log.eurekapu.com/og/blog/fs-story-video-player-feedback.png?v=2026-10-15T00%3A00%3A00.000Z&title=%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AA%E3%83%BC%E7%89%88%E3%81%AE%E5%8B%95%E7%94%BB%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%82%92%E7%9B%B4%E3%81%99%EF%BC%9A%E5%AD%97%E5%B9%95%E9%A0%98%E5%9F%9F%E3%81%AE%E6%8B%A1%E5%BC%B5%E3%80%81%E5%8C%BA%E5%88%87%E3%82%8A%E4%BB%98%E3%81%8D%E9%80%B2%E6%8D%97%E3%83%90%E3%83%BC%E3%80%81%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E3%81%AE%E8%A6%B3%E7%82%B9%E5%8C%96&author=Kei%20Komatsu&sig=9234fee307b4b2dc",1792550156984]