2026年4月28日の開発日記
朝は会社法の図をSVG化する話から始まり、そのまま別リポジトリ eurekapu-nuxt4 でCFWS v2の構造解説スライドを reveal.js で組む大仕事に入った。「コードが複雑すぎて分からないのでスライドで動画みたいに説明してほしい」という要望から、画面・コード・型の3点を追跡する形式に到達し、最終的に再利用可能な feature-slides スキルとして固めた。Excel忠実再現グリッドと範囲外枠ハイライトまで詰めて、CF305資本政策とCF301借入金のスライド量産まで進んだ。並行して book-knowledge-base で yomitoku を5冊・1181ページに通して Turso DB に1057チャンク登録、Amazon の星評価・メタデータを935件中841件取得して Nuxt の書棚UI で公開した。1日で「書籍コンテンツのスキル化・データ化」が大きく前に進んだ日。
今日のタイムライン

今日やったこと
1. feature-slides スキルを新設してコード解説スライドを汎化
別リポジトリ eurekapu-nuxt4 のCFWS v2構造解説で、reveal.js のスライドを「画面のこの行 ↔ コードのこのデータ ↔ 型定義のこのプロパティ」を追跡する形式に組み直した。Pinia / composable / Vue Component の3層から、裏で支える脇役を含めた7層構造に拡張、Vue 2 / Vuex 経験者向けに「Vue 2 でいうとこの層」の対応表とVuex→Pinia の差分(mutationsが要らない、TypeScriptの型推論が効く、setup syntax で書ける、Composition API と統一)も追加した。最終的に .claude/skills/feature-slides/ として汎化、2〜3行プロンプトで再現できる短縮プロンプトもスキルに書き込んだ。
主な成果:
- reveal.js の文字・テーブルはみ出し問題を CSS 調整で解決
- HTMLコメント問題(
<pre><code>内の<!-- ... -->がパーサーを破綻させる)をスキルにルール化 - 7層構造スライド + Vue 2 対応表 + Vuex→Pinia 差分スライド
- Excel忠実再現グリッド(行番号・列レター付き)+ 範囲外枠ハイライト機能
- 「同じシート、違う注目領域」で1シートを複数枚に展開する共通描画関数
- スペーサー列(A,B,E,L,N,P)を極細にして余白を作るルール
詳細: コードと画面の対応をスライドで追える feature-slides スキルを作った
2. CF精算表のExcel解説スライドを2本量産
スキル化直後の検証として、CF305資本政策(38スライド)とCF301借入金(43スライド)のExcel解説を量産。feature-slides スキルが2〜3行プロンプトで動く効率の良さを体感した。openpyxl の data_only=True が None を返す問題は LibreOffice CLI で再計算してから取得することで抜けた。
主な成果:
cf-305-equity-excel-slides.html(38スライド、追跡対象=設立出資3,000,000円)cf-301-loan-excel-slides.html(43スライド、長期借入2,000,000円 + 短期借入1,000,000円)- 6段階の追跡チェーン(黄→ピンク→青→緑→緑→水色)で取引モジュール → 仕訳 → 年次推移表 → CFWS の流れを可視化
詳細: CF精算表のExcel解説スライドをスキルで量産した記録
3. yomitoku で専門書5冊・1181ページをOCRして Turso DB に1057チャンク登録
別リポジトリ book-knowledge-base で、日本語特化AI OCR の yomitoku を使って手元の専門書を一気に処理した。GPU処理で1ページあたり約1.6秒、漫画PDFも10ページ16秒で完走。WAL ロックエラーや「100」が「1OO」(U+004F の大文字O)に化けたファイル名問題を抜けた。漫画PDFの第1話冒頭8ページでは「物語の振り→問い→答え→オチ」の構造でストーリーを抽象化するサマリー雛形を試作した。
主な成果:
- 連結会計の入門書(352ページ → 270チャンク、図121個)
- 税効果会計の教科書(363ページ → 341チャンク、図48個)
- 財務数値ケース集(182ページ → 180チャンク)
- 連結精算表の入門書(284ページ → 266チャンク)
- 不動産業の漫画(200ページ中10ページサンプル、サマリー雛形試作)
詳細: yomitoku で専門書5冊・1181ページを一気にOCRして Turso DB に1057チャンク登録した
4. Amazon書籍メタデータを841件取得して Nuxt 書棚UI で公開
Dropbox に蓄積した連番管理の書籍PDF935冊について、Amazon の星評価・レビュー数・メタデータを取得して Nuxt の書棚UI で一覧化した。PA-API 5.0 が AssociateNotEligible (403) で使えず、Chrome DevTools MCP は単一ブラウザ共有で並列化不可、agent-browser 3並列もスタック。最終的に curl_cffi の TLS偽装で 10並列 1秒/件のスループットに到達し、826件を約12分で完走した。
主な成果:
- 826件中789件が rating_ok、52件が asin_not_found
- 出版社・発売日・ページ数・ISBN-13・寸法・言語・高解像度カバー画像 を全件取得
- Nuxt 書棚UI を
/shelfで公開(ポート3001、デフォルト並び=星評価DESC→レビュー数DESC、出版社別フィルター) - amazon_metadata と books テーブルを book_id で19件紐付け
- 引き継ぎマークダウン
memo/2026-04-28/amazon-progress.mdを作成
詳細: Amazon書籍メタデータを841件取得しNuxt書棚UIで一覧化した1日の試行錯誤
5. 書籍画像をSVG図解化するワークフローを svg-diagram スキル v2 にまとめた
会社法・法人税法のテキストに載っている図をSVG化する作業を1日まわした。公開会社・非公開会社のベン図、役員給与の損金算入可否フローチャートを、本の図そのまま再現するのではなくロジックを整理したカード型・パラレルツリー型に作り直した。最初はスキルを呼ばずに直接書いてしまい、viewBox や色のルールから外れた。途中でスキルを呼び直し、得られた知見を svg-diagram スキル v2 として作り直して「書籍画像→SVG図解への変換ワークフロー」セクションを追記した。
主な成果:
koukai_hikoukai_kaisha.svg+ ベン図版yakuin-kyuyo-songin-flow-v2.svg(パラレルツリー、マゼンタ強調5箇所)- svg-diagram スキル description に「書籍の図をSVGに」のトリガーを追加
- 「書籍画像→SVG図解への変換ワークフロー」セクションをスキルに追記
詳細: 書籍の図をSVG化するワークフローを svg-diagram スキル v2 にまとめた
今日の試行錯誤
| # | テーマ | 試したこと | 結果 | 気づき |
|---|---|---|---|---|
| 1 | reveal.js の文字はみ出し | デフォルトのフォントサイズ | スライドからはみ出る | CSS で font-size と padding を調整 |
| 2 | スライド数13で止まる | <pre><code> 内の <!-- --> がパーサー破綻 | エスケープで解決 | コードブロック内のHTMLコメントは要エスケープ |
| 3 | Excel座標 I→J | 私のコードに座標エラー | 実Excelで再確認して修正 | LibreOffice + openpyxl で値検証してから貼る |
| 4 | data_only=True で値が None | Excel未起動でキャッシュなし | LibreOffice で再計算 | openpyxl は data_only でもキャッシュ依存 |
| 5 | 範囲外枠ハイライト | 塗りつぶしから外枠ボーダーに変更 | 成功 | 外枠だけのほうが Excel らしい |
| 6 | スペーサー列のopacity | 範囲内では opacity を外す | 成功 | スペーサーが見えなくなる問題 |
| 7 | yomitoku WAL ロック | DB登録中に SQLITE_BUSY | --replace で再実行 | libsql Embedded Replica は短時間ロック発生 |
| 8 | ファイル名 1OO 問題 | 大文字O U+004F が混入 | 実ファイル名で再確認 | OCR文字化けが連番名に紛れ込む |
| 9 | web/.output 追跡 | .gitignore漏れ | 追加 | Nuxt の .output は .gitignore 必須 |
| 10 | PA-API 5.0 | AssociateNotEligible (403) | 別ルートに切替 | アフィリエイト承認後でも一定期間使えない |
| 11 | Chrome DevTools MCP 並列 | 単一ブラウザ共有で並列化不可 | agent-browser に切替 | 量産は MCP では無理 |
| 12 | agent-browser 3並列 | デーモン同時起動で詰まる | 1並列に戻すかHTTP直叩きへ | 並列度の壁が見えた |
| 13 | curl_cffi TLS偽装 | HTTP直接GETでbot対策回避 | 1秒/件で安定 | これが最速・最安定 |
| 14 | レビュー数バグ | aria-label の「5つ星のうち4.1」の「5」誤抽出 | 「レーティング」のみに絞る | 正規表現は前後文脈の限定が必須 |
| 15 | CAPTCHA連続発生 | 詳細メタ取得の高頻度アクセス | 並列度2 + sleep 長めで再取得 | 高頻度は CAPTCHA を誘発 |
| 16 | ポート3000衝突 | mdx-playground が占有 | 3001で起動 | ローカル開発はポート事前確認 |
| 17 | SVG矢印の向き誤り | ジャンクション点を子ボックス右側に置いた | 左側経由に修正 | 矢印は終点側のジャンクション位置で向きが決まる |
| 18 | スキルを呼ばずに作業 | viewBox や色のルールから外れた | スキル v2 として作り直し | 最初に Skill ツールを呼ぶ習慣を再確認 |
| 19 | カテゴリ分類の誤り | 「該当しない給与」を独立L1に並べた | 末端注記に格下げ | 元の本のロジックを正確に追う必要 |
今日の学び
- 「コードを動画みたいに説明」要望から1日でスキル成立まで持っていける ── 最初に「画面 ↔ コード ↔ 型」の3点追跡形式に到達できれば、あとはスキル化して再利用に回せる
- Excel理解者向けには「Excel忠実再現グリッド」が圧倒的に伝わる ── 行番号・列レターを揃えて貼ると、Excel理解者の視線が画面上を勝手に追い始める
- 範囲外枠ハイライトは塗りつぶしより伝わる ── 「ここに注目してほしい」が静的に伝わるが、Excel の範囲選択時の見た目に揃えると違和感が消える
- PA-API 5.0 は不安定。curl_cffi(TLS偽装)+ HTML パースが最速最安定 ── アフィリエイト承認後の qualifying sales 期間で簡単に 403 が返る
- 量産は HTTP直叩き、検証は Chrome DevTools MCP ── 単一ブラウザ共有のツールに並列化を期待してはいけない
- CAPTCHAは並列度を下げて sleep を長くすれば抜ける ── 並列度2 + 20-30秒 sleep で復旧する
- 書籍の図は「忠実再現」より「ロジック整理」のほうが伝わる ── 元の本に引きずられないでカード型・パラレルツリーに組み直すほうが読みやすい
- 強調はマゼンタ1点のみ ── アウトカム(損金算入○)にだけ色を当てる。複数色を使うと焦点が散る
- WAL ロックエラーは並列度を下げて再試行が確実 ── libsql Embedded Replica は短時間ロックが起きる
- 引き継ぎマークダウン(memo/)を必ず書く ── 別セッションでも続きを実行できる構造を残す
明日やること
- 残り37件の Amazon メタデータ CAPTCHA 再取得を完了させる
- 書棚UI の出版社別フィルターを使い込んで、追加で必要な切り口(ジャンル、出版年)を洗い出す
- feature-slides スキルで他のCF精算表(CF302, CF303, CF304)も量産する
- yomitoku で残りの専門書を順次バッチ処理する
- svg-diagram スキル v2 を使って、税法テキストの他の図もSVG化する
- 漫画PDFのサマリー雛形を本一冊全部に適用してテストする