図の中身には、ほとんど触らなかった一日

前のセッションからの引き継ぎに、気になる一文が残っていた。 管理者としてログインしていればドラフト講座も見られるはずなのに、本番環境で開くと画面が白いままだという。 今日はこの調査から始めて、税大講本ビューアーの図解そのものにはほとんど手を付けず、周辺のUI機能とサイト基盤ばかりを直すことになった。 表の余白、拡大モーダル、ウォーターマーク、ダウンロードボタン、SEOメタ情報。 地味な項目が並ぶわりに、直すたびに新しい指摘が積み上がっていく一日だった。

adminがドラフト講座を見られないバグ

引き継ぎメモにあったのは「管理者アカウントで本番のドラフト講座URLを直接開くと本文が表示されない」という不具合だった。 SSR側の認証フローを辿らせると、ドラフトかどうかの判定自体は正しく動いていた。 それなのに usePurchase がリクエストヘッダーを渡さない実装のままで、auth.server.ts からの呼び出しだけが個別にヘッダーを足していた。 ヘッダーを渡す経路と渡さない経路が混在していて、SSR時のセッション確認がすり抜けていたことになる。 usePurchase を useRequestFetch に統一させ、落ちていたテストを1件更新させた。

修正は3ファイル。 ローカルで匿名アクセスの403、公開講座の回帰、admin での直URLアクセスとリロードを確認させてから、本番へデプロイさせた。 デプロイログで NUXT_OG_SECRET の値がちゃんと伏せ字になっているのを確認させたあと、本番で同じ手順をもう一度なぞらせた。 直URLでも本文が出て、リロードしても崩れない。 もう一冊のドラフト講座でも同じ結果になったところで、ようやくコミットに回した。

横幅の広い表と、拡大モーダルの攻防

次に指摘したのは表示の余白だった。 国税徴収法の「保全措置一覧表」のスクリーンショットを見せて、列数の多い表なのに左右に大きな空白が残っていることを伝えた。 DOM構造を調べさせると、.scroll-content(1426px)の中に幅を760pxへ制約する .scroll-inner があり、さらにその中に本文と表が入っている入れ子だった。 レイアウト全体を組み直さなくても、表だけを局所的なCSSで外へ広げられる。 「幅を広げて、はみ出す分は横スクロールに逃がす」という案を選び、モーダルでの拡大表示はいったん保留にさせた。

zeimu限定で試させて良ければ全冊へ広げる、という進め方で承認した。 最初は1つの表だけを直すつもりだったが、他の7冊にも同じ崩れが山ほど見つかった。 結局、全冊合わせて340件の表を洗い直させ、5列以上ある89件を横幅拡張の対象にした。 モバイル幅で確認させると、今度は逆に文字が1字ずつ折り返されて読めなくなっていた。 width: max-content は長文セルだけを伸ばして逆効果だったので、セルの下限幅だけで制御する形に直させ、横スクロールで読める状態に落ち着かせた。

表を広げたCSSは、思わぬところへ波及もした。 7-2図が本文幅を超えて伸びてしまい、原因を調べさせると .article-body img という既存規則の詳細度が一段高いことが分かった。 図の側に本文幅の上限を明示させて直させた。 2列表の中央寄せも、border-spacingを相殺するための古い規則に競り勝てず崩れていたので、詳細度を1段上げさせ、左右が均等な幅で中央に立つことを実測で確かめさせた。

表の見た目にはまだ続きがあった。 数値の桁は右寄せにしてほしいと頼み、ビルドパイプラインに右寄せ処理を組み込ませた。 申告書の「内書き」(金額の内訳を示す小さな注記)も改行して桁を揃えたほうが読みやすいと伝え、反映させた。 <br>を含む2行セルが右寄せ判定から漏れていたのは、見せてもらって気づいて直させた。

表と図の拡大表示は、最終的に1つの仕組みへ統合させることになった。 既存の図専用の拡大処理と、新しく作った表の拡大処理を useZoomableContent という共通のcomposableにまとめさせた。 ここで縦長の図が最初につまずいた。 高さを基準に収める実装だと、縦長の図は横幅が161pxまで潰れてしまう。 いったん横幅を基準にして縦スクロールで逃がす形に切り替えて凌がせたが、今度は別の図でモーダルが原寸のまま画面いっぱいに広がらない問題が出てきた。 最終的には高さいっぱいに合わせて拡大し、比率を保ったまま画面を使い切る方式に直させた。 図307件と表89件、すべてがクリックで拡大できるようになった。

SVG図解にウォーターマークを入れる

税大講本の新しい図には、旧サイトのSVGに入っていた「アカウンティング×インフォグラフィック eurekapu.com」の表記を、透かしのように入れてほしいと頼んだ。 旧SVGはイラレの書き出しでアウトライン化済みだったので、そこからマークアップを直接抜き出して部品にできた。

最初は右下に入れさせてみた。 出来上がりを見て、メッセージライン(図に必ず入る一文の見出し)の下線とロゴの下端を揃えたいと伝え直した。 その基準線にロゴの下端を合わせれば、どの図でも位置が揃って端が切れる心配もない。 右上でベースラインを合わせる配置に変更させた。

気に入ったので、今後作る図すべてに入れる方針に決めた。 ただ、あとで全部外したくなるかもしれないという懸念も伝えた。 id="eurekapu-wordmark" を付けたグループとしてSVGへ注入する形にさせ、注入も除去もスクリプト1回で済むようにした。 ハッシュを比較してバイト列が完全に元へ戻ることも確かめさせたうえで、280枚の図に注入させた。

ただし全部の図で同じ位置にロゴが収まるとは限らない。 タイトルが図の横幅いっぱいまで伸びている図では、ベースライン合わせのままだとロゴが本文と重なってしまう。 機械的に被りを判定できないかと聞くと、できるという答えが返ってきた。 各要素の座標から占有領域を計算し、ロゴの候補位置と交差判定する仕組みを実装させた。 重なる図は右下へ逃がし、それでも足りなければキャンバスを下に伸ばす。 この3段判定で、タイトルの長さに関わらずロゴが本文と重ならない状態にできた。

最後に、このワードマークのルールをどこへ書くかを詰めた。 SVG図解の描き方自体はユーザーレベルの共通スキルにまとまっているが、ロゴを入れる話はinfo-accounting.comのインフォグラフィック向けコンテンツに限った話で、日記系のリポジトリにまで効いてしまうと具合が悪い。 eurekapu-nuxt4のプロジェクトレベルのルールとして切り出させ、遡及はせず、これから作る図だけに適用する形に決めた。

SVGダウンロードをPNGにも対応させる

図ギャラリーのSVGにダウンロードボタンがないのも指摘した。 まずSVG単体のダウンロードボタンを実装させ、全テストを通したうえで報告を受けたが、確認するとスマホでSVGファイルを開いても何も見えないことに気づいた。

方針を変えさせ、PNGも選べる2ボタン方式にした。 ビルド時にPNGを量産するのではなく、ブラウザ側でSVGをcanvasに描いてPNGへ変換する形にさせたので、追加のアセットもR2へのアップロードも要らない。 ボタンの表記は「⤓ PNG」「⤓ SVG」に絞らせ、実際にクリックしてファイルが保存されることまで確認させてからコミットさせた。

累進課税シミュレーターを育てる

所得税額の計算を説明する図には、実際の計算式が入っていないことに気づいた。 旧サイト(eurekapu.com)にあるインタラクティブな累進税率チャートのほうがわかりやすいと伝え、静的な図の代わりにそのチャートをコンテンツへ埋め込む方針に切り替えた。 調べさせると実は一部が既に移植済みだったので、そこにスライダー連動の税額テーブルと、500万から5,000万までの所得プリセットボタンを足させた。

出来上がったものを見て、区分と税率の間に金額が挟まっていないから「超えた部分に対して税率がかかる」という感覚が伝わらないと伝えた。 列を割らせ、チャートの割り増し分バーと同じ金額を「税額」の列として並べさせ、行がそのまま計算式として読める形に組み替えさせた。

横幅の広いPC画面では、チャートと表を上下に並べると同時に見えない。 コンテナクエリで判定する2カラムレイアウトにさせ、幅の狭い画面や縦長の画面ではこれまでどおり上下に積む形を残させた。 プリセットボタンも、2カラムのときだけチャートの上に出すよう位置を変えさせた。 初期値は4,000万円(プリセットの1つ)に合わせ、最初からマゼンタで点灯させることで、ボタンだと気づきやすくした。

本番反映のあと、旧サイト側(wordpress-migration)にチャートが潰れて表示される問題が見つかった。 eurekapu-nuxt4側では直していたflexレイアウトの修正を、旧サイト側へ反映し忘れたままデプロイしていたのが原因だった。 今度はデプロイ前にスクリーンショットで目視確認させてから再デプロイさせ、正常なサイズに戻ったことを両方の本番で確かめた。

記事ごとのSEOメタ情報を取れるようにする

税大講本のコンテンツは、講座ページごとにタイトルやSEO用のメタ情報が個別に取れていないと指摘した。 調べさせると、8冊104章のどのページを開いても同じような汎用メタ情報しか出ておらず、本番では302リダイレクトまで挟まっていた。

計画書を作らせてCodexのレビューを通させたうえで、章ごとの静的な全文表示、JSON-LD構造化データ、章固有のメタディスクリプション、サイトマップ生成を実装させた。 圧縮後のHTMLサイズは章によって差があったが、最大でも91KBで、150KB以内という目標は守れた。 モバイル幅では「全文を読む」ボタンがページ送りのボタンと重なる問題が見つかったので、モバイルではボタンを上へ逃がして直させた。 実装差分はCodexにもレビューさせ、致命的な指摘はなしという判定をもらった。

「この講座について」ページを消す前に、まずコミット

税大講本の各冊には、目次を見れば内容がわかる「この講座について」というページが必ず付いていた。 見ているうちに、トピックを見れば分かる話なので消してしまっても大丈夫ではないかと思い、指示した。 ただし、まとめて一気に消すのは危険だと考えた。 まず今日たまっていた変更を粒度ごとに16のコミットへ分けて履歴に残させ、そのうえで残り7冊分の「この講座について」ページと各章冒頭の自動生成「(概要)」セクションを取り除かせた。 旧URLは新しい章の先頭へ301でリダイレクトさせ、副作用で見出しに紛れ込んでいた「(1)」という不要な連番も直させた。 これで8冊すべてが、開けばすぐ第1章第1節から読める状態になった。

Codexレビューという習慣

今日直した差分は、ドラフト表示のような3ファイルの修正から、280枚のSVGを書き換えるワードマーク導入まで規模もさまざまだった。 それでも、コミットのたびにCodexへ「Review this change for security vulnerabilities」を投げさせ、静的コンテンツを生成するだけのスクリプトなのか、v-html でレンダリングされる経路に触れているのかを毎回確認させた。 図解の中身をほとんど触らなかった一日だったが、ビューアーの土台は確実に固まった。