[{"data":1,"prerenderedAt":529},["ShallowReactive",2],{"content-/excel-course-migration-ui-improvements":3,"all-pages-for-dir":527,"og-image-/excel-course-migration-ui-improvements":528},{"id":4,"title":5,"body":6,"category":507,"description":508,"extension":509,"meta":510,"navigation":511,"path":512,"project_name":513,"published":514,"publishedAt":515,"seo":516,"stem":517,"tags":518,"todo":524,"updatedAt":525,"__hash__":526},"pages/2026-04/2026-04-09/excel-course-migration-ui-improvements.md","Excel講座の演習移行・SVG33件一括生成・R2メディア完全移行の作業記録",{"type":7,"value":8,"toc":473},"minimark",[9,13,17,20,25,29,32,84,87,90,158,166,168,172,176,214,217,220,223,225,229,232,236,251,255,258,260,264,267,320,328,334,336,340,344,347,350,353,356,363,373,376,379,382,403,405,409,412,415,418,443,446,449,451,454,457],[10,11,5],"h1",{"id":12},"excel講座の演習移行svg33件一括生成r2メディア完全移行の作業記録",[14,15,16],"p",{},"前日に60ファイル・110セクションの本体移行を終えていたので、今日は演習ページの移行から手をつけた。ChatBoxやExcelDownloaderなど演習固有のコンポーネントを4つ作り、旧演習23件を変換して流し込んだ。そこからSVGチャートの一括生成、R2へのメディア完全移行、UIレイアウト改善と手を広げていったら、コミットログが膨れ上がった。",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"_1-演習移行-phase-1-4","1. 演習移行 Phase 1-4",[26,27,28],"h3",{"id":28},"演習コンポーネント4種の作成",[14,30,31],{},"演習ページは通常の講義セクションと構造が異なる。上司とのチャット形式で指示を出し、Excelファイルをダウンロードして手を動かす形式。この構造を再現するため4つのコンポーネントを新規作成した。",[33,34,35,48],"table",{},[36,37,38],"thead",{},[39,40,41,45],"tr",{},[42,43,44],"th",{},"コンポーネント",[42,46,47],{},"役割",[49,50,51,60,68,76],"tbody",{},[39,52,53,57],{},[54,55,56],"td",{},"ChatBox",[54,58,59],{},"上司/あなたの会話吹き出し",[39,61,62,65],{},[54,63,64],{},"ExcelDownloader",[54,66,67],{},"Excelファイルのダウンロードカード",[39,69,70,73],{},[54,71,72],{},"ExerciseRenderer",[54,74,75],{},"ChatBox + Downloader + 手順を統合表示",[39,77,78,81],{},[54,79,80],{},"TheaterViewer exercise props",[54,82,83],{},"既存ViewerにExercise表示モードを追加",[26,85,86],{"id":86},"旧演習23件の変換",[14,88,89],{},"変換対象の内訳は以下の通り。",[33,91,92,102],{},[36,93,94],{},[39,95,96,99],{},[42,97,98],{},"カテゴリ",[42,100,101],{},"件数",[49,103,104,112,119,127,135,143,150],{},[39,105,106,109],{},[54,107,108],{},"VLOOKUP",[54,110,111],{},"5",[39,113,114,117],{},[54,115,116],{},"INDEX-MATCH",[54,118,111],{},[39,120,121,124],{},[54,122,123],{},"実務演習",[54,125,126],{},"6",[39,128,129,132],{},[54,130,131],{},"総合演習",[54,133,134],{},"4",[39,136,137,140],{},[54,138,139],{},"絶対参照",[54,141,142],{},"2",[39,144,145,148],{},[54,146,147],{},"IF",[54,149,142],{},[39,151,152,155],{},[54,153,154],{},"IFERROR / SUMIFS / INDIRECT / 検索置換貼付",[54,156,157],{},"各1",[14,159,160,161,165],{},"旧ファイルの演習データを新しいExerciseRenderer形式に一括変換した。関数チャプター直下にぶら下がっていた演習セクションは独立チャプターに分離し、",[162,163,164],"code",{},"tocExcel.ts","のchildrenに登録した。",[18,167],{},[21,169,171],{"id":170},"_2-part-234の移行とショートカット講座の独立移行","2. Part 2/3/4の移行とショートカット講座の独立移行",[26,173,175],{"id":174},"part-2-4の新規作成","Part 2-4の新規作成",[33,177,178,188],{},[36,179,180],{},[39,181,182,185],{},[42,183,184],{},"Part",[42,186,187],{},"内容",[49,189,190,198,206],{},[39,191,192,195],{},[54,193,194],{},"Part 2",[54,196,197],{},"わかりやすいシートの作り方",[39,199,200,203],{},[54,201,202],{},"Part 3",[54,204,205],{},"NG集",[39,207,208,211],{},[54,209,210],{},"Part 4",[54,212,213],{},"ファイル・フォルダ命名ルール",[14,215,216],{},"それぞれデータファイル新規作成、TOC登録、ページファイル作成の3点セットで移行した。",[26,218,219],{"id":219},"ショートカット講座の集約",[14,221,222],{},"旧プロジェクトでは59ページに散らばっていたショートカット講座を、8ページのMiller Columnに集約した。49個のショートカット詳細をまとめページに統合し、R2へのメディアアップロードは71件に達した。59ページを開き直す時間が消えて、Miller Columnで一覧からドリルダウンする操作に変わった。",[18,224],{},[21,226,228],{"id":227},"_3-svgチャート33件の一括生成","3. SVGチャート33件の一括生成",[14,230,231],{},"配色ルール、数値の表示（シート間で単位がバラバラなままSUMするバグの図解）、セル結合のNG/Good対比など、Excel操作の図解SVGを33件生成した。",[26,233,235],{"id":234},"content-typeの罠","Content-Typeの罠",[14,237,238,239,242,243,246,247,250],{},"R2にSVGをアップロードしてブラウザで開いたら、XMLがテキストとして表示された。R2のデフォルトContent-Typeが",[162,240,241],{},"application/octet-stream","になっていて、",[162,244,245],{},"image/svg+xml","を明示的に設定する必要があった。wranglerの",[162,248,249],{},"--content-type","フラグで解決したが、最初は「SVGが壊れている」と疑って中身を見に行ってしまい、時間を溶かした。",[26,252,254],{"id":253},"cdnキャッシュパージ","CDNキャッシュパージ",[14,256,257],{},"Content-Typeを修正して再アップロードしても、ブラウザには古いレスポンスがキャッシュされていて変化がない。CloudflareのCDNキャッシュをパージして、ようやく正しく表示された。「修正したのに直らない」ときは、まずキャッシュを疑う。",[18,259],{},[21,261,263],{"id":262},"_4-r2メディア一括移行","4. R2メディア一括移行",[14,265,266],{},"WordPressのCDN URLをCloudflare R2に完全移行した。",[33,268,269,278],{},[36,270,271],{},[39,272,273,276],{},[42,274,275],{},"種別",[42,277,101],{},[49,279,280,288,296,304,312],{},[39,281,282,285],{},[54,283,284],{},"MP4",[54,286,287],{},"13",[39,289,290,293],{},[54,291,292],{},"GIF",[54,294,295],{},"14",[39,297,298,301],{},[54,299,300],{},"画像",[54,302,303],{},"8",[39,305,306,309],{},[54,307,308],{},"XLSX",[54,310,311],{},"複数",[39,313,314,317],{},[54,315,316],{},"SVG",[54,318,319],{},"35",[26,321,323,324,327],{"id":322},"cspのimg-src問題","CSPの",[162,325,326],{},"img-src","問題",[14,329,330,331,333],{},"R2のカスタムドメインからの画像配信がCSPでブロックされた。DevToolsのコンソールにCSP違反のエラーが並んでいて、",[162,332,326],{},"ディレクティブにR2のドメインを追加して解消した。前日のWordPress CDNドメイン追加と同じパターン。CSPは新しいドメインからアセットを配信するたびに更新が要る。",[18,335],{},[21,337,339],{"id":338},"_5-uiレイアウト改善","5. UIレイアウト改善",[26,341,343],{"id":342},"chatboxのアバター統合","ChatBoxのアバター統合",[14,345,346],{},"アバターアイコンがメッセージの外に出ていてスペースを食っていた。アバターをメッセージ内部のヘッダー行に統合し、横幅を節約した。",[26,348,349],{"id":349},"ダウンロードカードのグリッド化",[14,351,352],{},"ダウンロードカードが縦に並んでいて、3件あるとスクロールが長くなっていた。横並びグリッドに変更して、一画面に収まるようにした。",[26,354,355],{"id":355},"overflow設定の試行錯誤",[14,357,358,359,362],{},"theaterコンテンツが独立スクロールしてしまう問題に遭遇した。親コンテナに",[162,360,361],{},"overflow: auto","が設定されていて、子要素がはみ出したときに親だけでスクロールが完結してしまう。ページ全体のスクロールと分離して、ユーザーがどこをスクロールしているか分からなくなる。",[14,364,365,368,369,372],{},[162,366,367],{},"overflow: visible","にしたらはみ出しが起きて別の問題が出た。最終的に",[162,370,371],{},"overflow: hidden","で子要素のはみ出しを切り捨てつつ、コンテンツ側の高さを適切に計算する方式で落ち着いた。overflowは設定値ごとに副作用が異なるので、一つずつ試して副作用を確認するしかなかった。",[26,374,375],{"id":375},"theater-articleモード追加",[14,377,378],{},"白背景ボックスで囲まれたtheater表示ではなく、通常の記事のように白背景なしで表示するモードを追加した。コンテンツの性質によって表示形式を切り替えられる。",[26,380,381],{"id":381},"その他の改善",[383,384,385,389,392],"ul",{},[386,387,388],"li",{},"セクションタイトルをヘッダーに表示、ページ番号を右寄せ",[386,390,391],{},"外部リンクにアンダーライン + 外部リンクアイコンを追加",[386,393,394,395,398,399,402],{},"ブラウザ履歴連動: ",[162,396,397],{},"history.pushState"," / ",[162,400,401],{},"popstate","でAlt+左右矢印によるセクション間の「戻る」を実現",[18,404],{},[21,406,408],{"id":407},"_6-stagehtml概要セクションとコンテンツ品質改善","6. stageHtml概要セクションとコンテンツ品質改善",[26,410,411],{"id":411},"概要セクション追加",[14,413,414],{},"4ファイル16箇所にサマリーテーブル付き概要セクションを追加した。講座の各パートの冒頭で「ここで何を学ぶか」が一覧で見える。",[26,416,417],{"id":417},"コンテンツ品質改善",[383,419,420,431,434,437,440],{},[386,421,422,423,426,427,430],{},"typo修正: ",[162,424,425],{},"XLLOKUP"," → ",[162,428,429],{},"XLOOKUP","（Lが1個多い）",[386,432,433],{},"口調の敬語統一",[386,435,436],{},"凡例に記号の説明を追加",[386,438,439],{},"基本機能セクションにユースケースを追加",[386,441,442],{},"コースタイトルを「経理会計データを扱うためのExcel基礎講座」に変更",[26,444,445],{"id":445},"イントロダクション移行",[14,447,448],{},"対象者、特徴、背景、3つのポイント、ゴール、講座の構成、本講座で扱わないこと、を旧プロジェクトから移行した。",[18,450],{},[21,452,453],{"id":453},"今日の学び",[14,455,456],{},"SVGのContent-Type問題は、原因の候補が「SVGファイルの中身が壊れている」「R2の設定」「CDNキャッシュ」の3つあって、最初に一番ありそうにない「ファイルが壊れている」から調べてしまった。R2にアップロードするときのメタデータ設定を先に確認していれば、30分は縮められた。問題の原因を推定するとき、インフラ層（配信設定）→アプリ層（ファイル内容）の順で当たるべきだと体で覚えた。",[14,458,459,460,398,463,398,466,398,469,472],{},"overflowの試行錯誤も同じ構造で、",[162,461,462],{},"auto",[162,464,465],{},"visible",[162,467,468],{},"hidden",[162,470,471],{},"scroll","の4値それぞれが異なる副作用を持っていて、仕様だけ読んでも実際のレイアウトへの影響は予測しきれない。DevToolsで一つずつ切り替えて副作用を目視する方が、結局は速かった。",{"title":474,"searchDepth":475,"depth":475,"links":476},"",2,[477,482,486,490,494,501,506],{"id":23,"depth":475,"text":24,"children":478},[479,481],{"id":28,"depth":480,"text":28},3,{"id":86,"depth":480,"text":86},{"id":170,"depth":475,"text":171,"children":483},[484,485],{"id":174,"depth":480,"text":175},{"id":219,"depth":480,"text":219},{"id":227,"depth":475,"text":228,"children":487},[488,489],{"id":234,"depth":480,"text":235},{"id":253,"depth":480,"text":254},{"id":262,"depth":475,"text":263,"children":491},[492],{"id":322,"depth":480,"text":493},"CSPのimg-src問題",{"id":338,"depth":475,"text":339,"children":495},[496,497,498,499,500],{"id":342,"depth":480,"text":343},{"id":349,"depth":480,"text":349},{"id":355,"depth":480,"text":355},{"id":375,"depth":480,"text":375},{"id":381,"depth":480,"text":381},{"id":407,"depth":475,"text":408,"children":502},[503,504,505],{"id":411,"depth":480,"text":411},{"id":417,"depth":480,"text":417},{"id":445,"depth":480,"text":445},{"id":453,"depth":475,"text":453},"dev","演習コンポーネント4種作成と旧演習23件の変換、SVGチャート33件の一括生成でContent-Type問題に遭遇、R2へのメディア一括移行でCSP設定に躓いた記録。UIレイアウト改善やショートカット講座の独立移行も実施","md",{},true,"/excel-course-migration-ui-improvements","eurekapu-nuxt4",false,"2026-04-09T00:00:00.000Z",{"title":5,"description":508},"2026-04/2026-04-09/excel-course-migration-ui-improvements",[513,519,316,520,521,522,523],"Excel講座","Cloudflare R2","CSP","UI改善","演習移行","memo",null,"tSFAsJIrhMWAJsqPa24PEJP6eariWvyRHWecMHgj3R8",[],"https://log.eurekapu.com/favicon.svg",1775770074119]