2026年4月21日の開発日記
朝6時台からeurekapu-nuxt4のCF計算書ステップ教材に取りかかり、深夜まで12時間以上を注ぎ込んだ。基礎知識の5分割、SVG図の量産、会計基準参照の改善、コンポーネント化と、教材の質を根本から引き上げる作業が連続した。合間にnote.comの内部APIを解析してChrome拡張を作り、別表四・五の10章分ドラフトもAI並列生成で一気に仕上げた。
今日のタイムライン
今日やったこと
1. CF計算書ステップ教材の全面改訂（12時間超）
1ファイルに詰め込まれていた基礎知識（Ch0）を5ページに分割し、教材タイトルを「Excelで作るキャッシュ・フロー計算書」に決定した。SEO調査でこのキーワードの検索ボリュームが最も大きいことを確認している。
BS/PL/CFの略語を全ステップファイルで正式名称に統一し、SVG図を各ステップに大量追加した。学習の全体像を示すSVG（Step1〜7の独立論点構造図）、ニューアートの直接法vs間接法の実数値比較SVG、ウォーターフォールチャートなど、テキスト説明をSVG図に置き換えることで理解しやすさが跳ね上がった。
会社法条文をStandardRefシステムに追加し、StepNavを共通コンポーネント化。12ページのナビゲーションリンクを統一した。
主な成果:
- Ch0を5ページに分割（はじめに / 活動区分 / 間接法 / 作成方法 / まとめ）
- 全ステップのBS/PL/CF略語を正式名称に統一
- SVG図を20枚以上新規作成
- StepNavコンポーネント化で12ページのナビ統一
- 会社法第34条・第445条をStandardRefに追加
詳細: CF計算書ステップ教材を5分割・正式名称統一・SVG量産で作り直した記録
2. note.com Chrome拡張の開発
Chrome DevTools MCPでnote.comの内部APIを傍受し、下書き保存APIのフォーマットを解明した。XSRF-TOKENが不要でX-Requested-Withヘッダーだけで認証が通る発見が大きい。画像アップロードではアイキャッチ用エンドポイントだとクロップされる問題にぶつかり、presigned URL + curlでS3直接アップロードする方式にたどり着いた。
Chrome拡張をchrome-extension-noteとして独立リポジトリに分離し、note-draftスキルを定義した。
主な成果:
- note.comの下書き保存API・画像アップロードAPIを完全に解明
- Chrome拡張をGitHubにpush
- note-draftスキルでMDX記事→note.com下書き自動保存を実現
詳細: 書籍OCRパイプラインとnote.com Chrome拡張の内部API解析
3. 別表四・五の解説コンテンツ一括生成
専門書287ページをyomitoku OCRでMarkdown変換し、Turso DBに280チャンクとして格納した。そのデータをEmbedded Replicaから読み取り、4つのサブエージェントで10章分のマークダウンドラフトを並列生成。全章をCodex（GPT-5.4）でレビューし、致命的な指摘を修正した。
SVG図では別表五(一)+株主資本等変動計算書の連動図、B/S+別表五(一)の連結図、別表四のフロー図を作成。矢印のZ軸がテーブル背景に隠れる問題をSVG要素の描画順で解決した。
主な成果:
- 10章分のドラフトMD + 22個のプレースホルダーSVG
- Codex全章レビュー → 致命的指摘を修正
- 別表関連SVG図を5枚作成
- ドラフトページにカテゴリ切替UI追加（Phase 1完了）
詳細: 別表四・五の解説コンテンツをTurso DBから一括生成しCodexで全章レビューした記録
今日の試行錯誤
| # | テーマ | 試したこと | 結果 | 気づき |
|---|---|---|---|---|
| 1 | note.com画像アップロード | アイキャッチ用エンドポイントで画像送信 | 失敗（クロップされる） | rectangle_large_type_2のリサイズが自動適用される |
| 2 | note.com画像アップロード | presigned URL + evaluate_scriptでS3送信 | 失敗（CORS制限） | ブラウザJSからS3直接は不可 |
| 3 | note.com画像アップロード | presigned URL + curlでS3送信 | 成功 | curl経由ならCORS制限を回避できる |
| 4 | note.com下書き保存 | {note: {name, body...}}形式で送信 | 失敗（保存されない） | トップレベルに直接フィールドを置く必要がある |
| 5 | SVG表示（クライアントサイド遷移） | :keyをslotやmainに追加 | 失敗（/&/images/パスバグ） | Nuxtのキャッシュが原因、.nuxt削除+再起動で解決 |
| 6 | flexコンテナのpadding-bottom | padding-bottomを96pxに増加 | 失敗（スクロール範囲に反映されない） | flexスクロールコンテナの既知問題。display:flex削除で解決 |
| 7 | SVG矢印のZ軸 | テーブルの上に矢印を配置 | 失敗（背景に隠れる） | SVG要素を最後に移動して最前面に描画 |
| 8 | Git LFS push失敗 | git push | 失敗（LFSオブジェクト見つからない） | core.hooksPathがCodespaces残骸を参照していた |
| 9 | 書籍OCR図の整理 | 画像サイズ・縦横比で自動分類 | 成功 | 装飾113件+バナー54件を一括削除、実図53件に整理 |
今日の学び
- note.comのAPIは
X-Requested-With: XMLHttpRequestだけで認証が通る。XSRF-TOKENは不要 - SVGの要素は描画順が後のものが前面に表示される。矢印をテーブルの後ろに配置すると隠れる
- Nuxtのクライアントサイドナビゲーションで
.nuxtキャッシュが古いVNodeを返すことがある。開発中は.nuxt削除+再起動が確実 - flexスクロールコンテナでは末尾のpadding-bottomがスクロール範囲に含まれない。display:flexを外すのが根本解決
- yomitoku OCRの
--figureオプションは装飾画像も図として抽出するため、サイズベースの後処理が必須 - Codex（GPT-5.4）のレビューは数値の正確さや法的根拠の確認に強い。「瑣末な指摘するな」の指示が重要
明日やること
- 別表コンテンツPhase 2: マークダウン→Vueスライド形式に変換
- note-draftスキルの画像アップロード改善（presigned URL方式をスキルに組み込み）
- CF教材の残りSVG作成（Step 7の総合演習）