[{"data":1,"prerenderedAt":466},["ShallowReactive",2],{"content-/cockpit-cell-highlight-greyscale":3,"all-pages-for-dir":464,"og-image-/cockpit-cell-highlight-greyscale":465},{"id":4,"title":5,"body":6,"category":446,"description":447,"extension":448,"meta":449,"navigation":91,"ogImage":450,"path":451,"project_name":452,"published":453,"publishedAt":454,"seo":455,"stem":456,"tags":457,"todo":450,"unpublished":453,"updatedAt":450,"__hash__":463},"pages/2026-05/2026-05-06/cockpit-cell-highlight-greyscale.md","財務3表コクピット：ホバー連動ハイライトとグレースケール合計行の改善",{"type":7,"value":8,"toc":438},"minimark",[9,13,17,20,23,36,47,105,118,121,125,132,135,157,160,164,171,174,177,307,310,314,328,332,342,350,353,360,363,366,431,434],[10,11,12],"p",{},"財務3表コクピット画面のハイライト実装とグレースケール適用を進めた日。SVGの二重線バグを目視で発見して修正し、verify.mjs がクラッシュしていたのを照合ロジックの書き直しで解決した。",[14,15,16],"h2",{"id":16},"ホバー連動ハイライトを3ペア色分けで実装",[10,18,19],{},"コクピット画面には BS・PL・CS のセル間をつなぐ SVG オーバーレイがある。ユーザーがセルにホバーすると、対応するセルが同時に光るという仕掛けだ。",[10,21,22],{},"最初の実装は単色ピンクで全ペアを塗りつぶしていた。これだと「どのペアが反応しているか」が視覚的に区別できない。3種類の対応関係を異なる色で分けることにした。",[24,25,26,30,33],"ul",{},[27,28,29],"li",{},"当期純利益ペア → amber",[27,31,32],{},"現金ペア → teal",[27,34,35],{},"その他 → デフォルト色",[10,37,38,42,43,46],{},[39,40,41],"code",{},"CockpitJournalExample.vue"," に ",[39,44,45],{},"hoverPairId"," リアクティブ変数を追加し、ポインターイベントハンドラを仕込む。",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-vue shiki shiki-themes vitesse-light vitesse-light","const hoverPairId = ref\u003Cstring | null>(null)\n\nconst onCellPointerEnter = (pairId: string) => { hoverPairId.value = pairId }\nconst onCellPointerLeave = () => { hoverPairId.value = null }\n","vue","",[39,55,56,86,93,99],{"__ignoreMap":53},[57,58,61,65,69,73,77,80,83],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sG7-3","const hoverPairId = ref",[57,66,68],{"class":67},"shFtX","\u003C",[57,70,72],{"class":71},"sHkkW","string",[57,74,76],{"class":75},"s4oTP"," |",[57,78,79],{"class":75}," null",[57,81,82],{"class":67},">",[57,84,85],{"class":63},"(null)\n",[57,87,89],{"class":59,"line":88},2,[57,90,92],{"emptyLinePlaceholder":91},true,"\n",[57,94,96],{"class":59,"line":95},3,[57,97,98],{"class":63},"const onCellPointerEnter = (pairId: string) => { hoverPairId.value = pairId }\n",[57,100,102],{"class":59,"line":101},4,[57,103,104],{"class":63},"const onCellPointerLeave = () => { hoverPairId.value = null }\n",[10,106,107,110,111,113,114,117],{},[39,108,109],{},"CockpitMatchCueOverlay"," コンポーネント側では ",[39,112,45],{}," を props で受け取り、ペアIDに応じてカラークラスを切り替える。CSS でペアごとのアウトラインカラーと ",[39,115,116],{},"pop"," キーフレームを定義した。",[10,119,120],{},"ブラウザで確認すると、BS の「現金及び預金」にカーソルを乗せた瞬間、CS の「現金及び預金期末残高」が同時に teal のアウトラインで浮き上がった。狙い通りに動いた。",[14,122,124],{"id":123},"svg二重線を目視で発見して削除","SVG二重線を目視で発見して削除",[10,126,127,128,131],{},"動作確認中に画面を眺めていると、ハイライトボックスの外枠に線が1本多く見えた。CSS の破線アウトラインに加えて、SVG の ",[39,129,130],{},"\u003Crect class=\"cue-box\">"," が重なっていた。",[10,133,134],{},"実装を振り返ると、初期実装時に「外側のボックスとアウトライン両方を持たせる」設計にしていたが、CSS 側でアウトラインを実装した時点で SVG の矩形は不要になっていた。削除対象は3点。",[136,137,138,144,151],"ol",{},[27,139,140,141,143],{},"SVG の ",[39,142,130],{}," 要素",[27,145,146,147,150],{},"CSS の ",[39,148,149],{},".cue-box"," スタイル定義",[27,152,146,153,156],{},[39,154,155],{},"@keyframes cue-box-pop"," アニメーション",[10,158,159],{},"削除後、コネクター矢印線は残したまま、CSS の破線アウトライン1本だけが表示される状態になった。見た目がすっきりした。",[14,161,163],{"id":162},"合計行の黒背景を-glグレースケールに置き換え","合計行の黒背景を GLグレースケールに置き換え",[10,165,166,167,170],{},"BS・PL・CS それぞれの合計行（資産合計、負債・純資産合計、当期純利益など）は、",[39,168,169],{},"tr.total"," に黒背景 + 白文字のスタイルが当たっていた。",[10,172,173],{},"SVG ダイアグラムで使っている IB フォーマットの 8 段階グレー濃淡を合計行にも適用する指示が来た。「薄い方から使って、文字は黒のまま背景のグレー濃淡だけで区別する」という方針。",[10,175,176],{},"BS・PL・CS の 3 ファイルを並列で編集した。",[48,178,182],{"className":179,"code":180,"language":181,"meta":53,"style":53},"language-css shiki shiki-themes vitesse-light vitesse-light","/* Before */\ntr.total td {\n  background-color: #000;\n  color: #fff;\n}\n\n/* After */\ntr.total td {\n  background-color: #d1d5db; /* GL グレー薄め */\n  color: #111827;\n}\n","css",[39,183,184,190,207,226,240,246,251,257,270,288,302],{"__ignoreMap":53},[57,185,186],{"class":59,"line":60},[57,187,189],{"class":188},"sxvE3","/* Before */\n",[57,191,192,195,198,201,204],{"class":59,"line":88},[57,193,194],{"class":71},"tr",[57,196,197],{"class":67},".",[57,199,200],{"class":75},"total",[57,202,203],{"class":71}," td",[57,205,206],{"class":67}," {\n",[57,208,209,213,216,219,223],{"class":59,"line":95},[57,210,212],{"class":211},"sz8Xr","  background-color",[57,214,215],{"class":67},":",[57,217,218],{"class":67}," #",[57,220,222],{"class":221},"snbK4","000",[57,224,225],{"class":67},";\n",[57,227,228,231,233,235,238],{"class":59,"line":101},[57,229,230],{"class":211},"  color",[57,232,215],{"class":67},[57,234,218],{"class":67},[57,236,237],{"class":221},"fff",[57,239,225],{"class":67},[57,241,243],{"class":59,"line":242},5,[57,244,245],{"class":67},"}\n",[57,247,249],{"class":59,"line":248},6,[57,250,92],{"emptyLinePlaceholder":91},[57,252,254],{"class":59,"line":253},7,[57,255,256],{"class":188},"/* After */\n",[57,258,260,262,264,266,268],{"class":59,"line":259},8,[57,261,194],{"class":71},[57,263,197],{"class":67},[57,265,200],{"class":75},[57,267,203],{"class":71},[57,269,206],{"class":67},[57,271,273,275,277,279,282,285],{"class":59,"line":272},9,[57,274,212],{"class":211},[57,276,215],{"class":67},[57,278,218],{"class":67},[57,280,281],{"class":221},"d1d5db",[57,283,284],{"class":67},";",[57,286,287],{"class":188}," /* GL グレー薄め */\n",[57,289,291,293,295,297,300],{"class":59,"line":290},10,[57,292,230],{"class":211},[57,294,215],{"class":67},[57,296,218],{"class":67},[57,298,299],{"class":221},"111827",[57,301,225],{"class":67},[57,303,305],{"class":59,"line":304},11,[57,306,245],{"class":67},[10,308,309],{},"黒背景が消えて、表全体のトーンが揃った。数字が白文字から黒文字に変わったことで読みやすくなった。",[14,311,313],{"id":312},"lessons-ページへのリンクを追加","/lessons ページへのリンクを追加",[10,315,316,317,320,321,42,324,327],{},"財務3表カードが「準備中（グレーアウト）」のままになっていた。コクピット画面のドラフトページが存在するので、",[39,318,319],{},"topics.ts"," の ",[39,322,323],{},"media.notes",[39,325,326],{},"cockpit-00-summary"," を追加してリンクを有効化した。グレーアウトが「ドラフト →」付きのリンクに変わり、ページ間のナビゲーションがつながった。",[14,329,331],{"id":330},"verifymjs-のクラッシュを照合方式の書き直しで解消","verify.mjs のクラッシュを照合方式の書き直しで解消",[10,333,334,337,338,341],{},[39,335,336],{},"verify.mjs"," は ",[39,339,340],{},"transactions.ts"," の BS バランスを自動照合するツールで、エントリーをインデックスで参照していた。エントリー件数が 27 件から 30 件に増えたタイミングで、インデックスが配列範囲を超えてクラッシュした。",[48,343,348],{"className":344,"code":346,"language":347},[345],"language-text","TypeError: Cannot read properties of undefined (reading 'amount')\n","text",[39,349,346],{"__ignoreMap":53},[10,351,352],{},"インデックス参照をやめて「最終残高照合 + BS バランスチェック」方式に書き直した。科目名で残高を引くため、順序変更や件数増加に対して安定する。",[10,354,355,356,359],{},"書き直し中に ",[39,357,358],{},"減価償却累計額"," の符号処理バグも見つかった。contra 科目（資産のマイナス）を通常の資産と同じ符号で加算していたため、BS の資産合計がずれていた。符号を反転させる処理を追加して修正した。",[10,361,362],{},"3 チェック（勘定残高照合・BS バランス・期間純利益照合）が全て ✅ になったことを確認してコミットした。",[14,364,365],{"id":365},"まとめ",[367,368,369,381],"table",{},[370,371,372],"thead",{},[194,373,374,378],{},[375,376,377],"th",{},"作業",[375,379,380],{},"内容",[382,383,384,393,404,412,423],"tbody",{},[194,385,386,390],{},[387,388,389],"td",{},"ホバー連動ハイライト",[387,391,392],{},"3ペア色分け（amber / teal / default）で実装",[194,394,395,398],{},[387,396,397],{},"SVG 二重線解消",[387,399,400,403],{},[39,401,402],{},"cue-box"," 矩形と関連 CSS を削除",[194,405,406,409],{},[387,407,408],{},"合計行グレースケール",[387,410,411],{},"黒背景 → GL グレー薄め + 黒文字に変更",[194,413,414,417],{},[387,415,416],{},"リンク有効化",[387,418,419,422],{},[39,420,421],{},"/lessons"," の財務3表カードをドラフトリンクに変更",[194,424,425,428],{},[387,426,427],{},"verify.mjs 修正",[387,429,430],{},"インデックス参照 → 科目名照合に書き直し + contra符号バグ修正",[10,432,433],{},"ハイライトの色分けで「どのセルが対応しているか」が目で追えるようになった。グレースケール合計行は黒背景より目に優しく、表のコントラストが落ち着いた。verify.mjs は件数が増えても壊れない設計になった。",[435,436,437],"style",{},"html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}",{"title":53,"searchDepth":88,"depth":88,"links":439},[440,441,442,443,444,445],{"id":16,"depth":88,"text":16},{"id":123,"depth":88,"text":124},{"id":162,"depth":88,"text":163},{"id":312,"depth":88,"text":313},{"id":330,"depth":88,"text":331},{"id":365,"depth":88,"text":365},"dev","BS/PL/CSのセル間Z軸浮き上がり・ホバー連動ハイライトを3ペア色分けで実装。合計行の黒背景+白文字をGLグレースケール+黒文字に置き換え、verify.mjsの照合方式も刷新した。","md",{},null,"/cockpit-cell-highlight-greyscale","eurekapu-nuxt4",false,"2026-05-06T00:00:00.000Z",{"title":5,"description":447},"2026-05/2026-05-06/cockpit-cell-highlight-greyscale",[458,459,460,461,462],"Vue","財務3表","アニメーション","SMIL","Nuxt","CUtW3CdIn5GT3K4quy-XSme7dgXJU8KW6DBoF5GzSX0",[],"https://log.eurekapu.com/og/blog/cockpit-cell-highlight-greyscale.png?v=2026-05-06T00%3A00%3A00.000Z&title=%E8%B2%A1%E5%8B%993%E8%A1%A8%E3%82%B3%E3%82%AF%E3%83%94%E3%83%83%E3%83%88%EF%BC%9A%E3%83%9B%E3%83%90%E3%83%BC%E9%80%A3%E5%8B%95%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%A8%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E5%90%88%E8%A8%88%E8%A1%8C%E3%81%AE%E6%94%B9%E5%96%84&author=Kei%20Komatsu&sig=87be27fd516da3a3",1782528833352]