CF精算表スクリーンショット撮影からHTMLテーブル構造化までの全工程記録

この日やったこと

参考書PDFに掲載されている全37論点（Q1〜Q37）のCF精算表を、スクリーンショット撮影 → クロップ → HTMLテーブル化 → 照合レビューまで一気に通した。朝はズーム倍率の試行錯誤に手が止まり、昼からクロップ座標の微調整を繰り返し、夕方にはHTMLテーブル化と全Q照合まで駆け抜けた。

スクリーンショット撮影（全39枚）

Chrome DevToolsでPDFページ移動を自動化

Chrome DevToolsのMCP経由でPDFを開き、ページ入力欄（uid=1_5）に値をfillしてページ移動する方式を採った。各Q番号に対応するページ番号はTurso DBから引いてきたが、PDFの実ページとDBのページ番号がずれているケースがあり、1件ずつ照合して補正した。

ズーム設定の試行錯誤

最初は横画面モニターで75%ズームで撮影を始めた。数枚撮って確認すると、精算表の細かい数字が潰れて読めない。縦モニターに切り替えて200%ズームに変更したら、セルの罫線まではっきり写った。最初の数枚は撮り直しになったが、200%ズームにしてからは数字の1と7、6と8の区別もつくようになり、早めに切り替えて正解だった。

撮影は全39枚（Q3など複数ページにまたがる論点がある）。1枚あたりの撮影サイクルは「ページ番号fill → スクリーンショット取得 → ファイル保存」で、リズムに乗ると1枚30秒ほどで回せた。

ImageMagickによる精算表クロップ

指示書を作って段取りを固める

クロップ作業に入る前に、手順をcrop-cfws-screenshots.mdとして指示書にまとめた。Codexレビューを2回かけて、座標指定の考え方とエッジケース（注記が表の下にはみ出すパターン）を洗い出した。

座標特定→クロップ→確認のサイクル

ImageMagickのconvertコマンドで座標指定クロップを実行した。基本フローは以下の繰り返し:

元画像を読み取って精算表の四隅の座標を特定
convert input.png -crop WxH+X+Y output.png で切り出し
クロップ結果を目視確認
問題があれば座標を修正して再クロップ

# クロップの基本コマンド（座標は論点ごとに異なる）
convert Q03-2.png -crop 1800x900+120+340 Q03-2_cropped.png

注記切れとの格闘

精算表の下部には「＜＊A＞」〜「＜＊F＞」といった注記が付いている論点がある。最初に設定したbottom座標では注記が途中で切れた。bottomを50px拡大して再クロップ → まだ切れる → さらに80px拡大 → 今度は余白が大きすぎる → 60pxに戻す、というサイクルを何度か回した。

論点によって注記の行数が1行〜6行まで幅があるため、一律の座標では対応できない。結局、1枚ずつ画像を読み取って注記の有無と行数を確認し、個別に座標を調整する方式に落ち着いた。手間はかかるが、注記が欠けた状態で後工程に進むとHTMLテーブル化の段階で情報が抜け落ちるので、ここは妥協しなかった。

HTMLテーブル化（構造化データ変換）

Q3-2をサンプルとして手動変換

まずQ3-2（固定資産の減損）を1件だけ手動でHTMLテーブルに変換し、品質を確かめた。精算表のセル構造をそのまま<table>に写し取り、数値の正負・空白セル・結合セルを再現する。サンプル1件の変換で「この粒度なら全Q分いける」と手応えを掴んだ。

全37Q分をindex.htmlに統合

37Q分のHTMLテーブルを1つのindex.htmlに統合した。タブ切替UIを実装し、各Qをワンクリックで表示できるようにした。左右の矢印キーでQ間を移動できる操作性も追加した。

各タブにはクロップ済みのスクリーンショット画像も並べて配置し、「元画像」と「HTMLテーブル」を横に並べて照合できる構成にした。

build_index.pyで再構築可能に

個別のHTMLテーブルファイルからindex.htmlを再生成するbuild_index.pyを用意した。新しいQ番号が追加されたり、既存のテーブルを修正したりしたときに、スクリプトを1回叩けば統合ファイルが再構築される。

# build_index.py の骨格（個別HTMLを読み込んでタブUIに統合）
for q_file in sorted(glob("Q*.html")):
    q_name = q_file.stem
    tabs.append(f'<button onclick="showTab(\'{q_name}\')">{q_name}</button>')
    panels.append(f'<div id="{q_name}">{q_file.read_text()}</div>')

全Q照合レビュー

最後に、全37Q分のスクリーンショットとHTMLテーブルを1セルずつ突き合わせた。数値の転記ミス、符号の反転、空白セルの見落としを1件ずつ潰していく作業で、全てOKを確認して完了とした。

照合で見つかりやすいミスのパターン:

符号反転: 減算項目（△表記）の符号が正になっている
空白セルの誤入力: 元画像では空白なのにHTMLに0が入っている
桁ずれ: 千円単位と百万円単位の混同

今回は全Q通して照合エラーゼロだったが、照合工程を省略すると後工程で「数値が合わない」デバッグに時間を取られるので、この手間は省けない。

振り返り

1日で撮影39枚 → クロップ39枚 → HTMLテーブル37Q分 → 全Q照合を完走した。ボトルネックはクロップ座標の試行錯誤で、注記の有無を事前に分類しておけばもう少し早く回せたはず。次回同様の作業があれば、「注記行数の事前カウント → 座標テンプレート3パターン用意 → 一括クロップ」の段取りで効率化できる。

HTMLテーブル化によって、精算表の数値がテキストデータとして検索・比較可能になった。この構造化データがあれば、今後のExcel自動生成パイプラインとの突合チェックもプログラムで回せる。