• #CF計算書
  • #教材制作
  • #SVG
  • #Miller Viewer
  • #Git LFS
開発eurekapu-nuxt4

CF計算書教材コンテンツの一気通貫制作

CF計算書の参考書をベースに、簿記3級編と2級編の教材コンテンツを丸一日かけて組み上げた。目次HTMLの設計から始まり、Miller Viewer対応、SVGスライド70枚の制作、テキスト全チャプター完成まで一本道で走り切った。

目次HTML(TOC)の設計と2部構成

まず cf_content_toc_v3.html をプロジェクトに保存した。構成は以下の通り。

  • 簿記3級編: Ch0(CF計算書とは)〜Ch5(CF計算書の作成手順)+総合演習
  • 簿記2級編: Ch1(間接法の詳細)〜Ch8(連結CF計算書)+総合演習

参考書の章立てをそのまま踏襲しつつ、3級と2級で独立したセクションに分けた。

トップページとMiller Viewer対応

トップページにトピックカードを2つ追加し(CF計算書3級編・2級編)、グリッドレイアウトを3列x2行に変更した。各トピックカードから講義ノートページに遷移する構成。

講義ノートページ(3級・2級それぞれ)はMiller Viewer対応で作成した。左ペインでチャプターを選ぶと右ペインにスライドが表示される形式。

配列分割のデバッグ:セクション混在問題

ここで最初の壁にぶつかった。全チャプターが1つの配列にまとまっていたため、3級編のセクションを選んでも2級編のチャプターが混ざって表示される。

原因はシンプルで、TOCから生成したMillerデータが単一のフラット配列だった。3級編と2級編でセクションごとに配列を分割し、選択中のセクションに応じて表示対象を切り替えるようにした。

// Before: 全チャプターが1配列
const allChapters = [...grade3Chapters, ...grade2Chapters]

// After: セクションごとに分割
const grade3Data = { chapters: grade3Chapters }
const grade2Data = { chapters: grade2Chapters }

name不一致のデバッグ

配列分割で構造上の問題は解消したが、今度はチャプターを選択しても対応するスライドが表示されない。Miller Viewerの左ペインでクリックしても右ペインが空のまま。

ログを仕込んで突き止めた原因は、TOCの childrenname プロパティとMillerデータ側の name が微妙に食い違っていたこと。TOC側は「Ch1 間接法の詳細」、データ側は「Ch1: 間接法の詳細」のように区切り文字が異なっていた。完全一致でマッチングしているため、1文字でもずれると表示されない。

TOC側とデータ側の名前を統一して解消。地味だが、一致しないときにエラーも警告も出ないため、発見までログ出力頼みだった。

コンテンツ一覧ページの新設

全チャプターを俯瞰できるコンテンツ一覧ページ(index.vue)を新設した。スクロールで3級・2級の全チャプターとスライド枚数を確認できる。制作の進捗管理にも使える。

SVGプレースホルダー96枚の一括生成

全チャプターのタイトルカードとして、SVGプレースホルダーを96枚一括生成した。チャプター名・セクション名をSVG内に埋め込み、スライドの枠だけ先に用意する方式。これで全スロットが可視化され、どこが未着手か一目でわかるようになった。

Ch1-2のテキスト拡充とスライド制作(17枚)

Ch1(CF計算書とは)とCh2(営業活動によるCF)のテキストを拡充し、数値例を埋め込んだ。

品質ゲートとして検算を実施。借入金利2%での利息計算、定額法5年での減価償却費算出など、スライドに載せる数値が参考書の記述と整合するか一つずつ確認した。検算で1箇所、減価償却の端数処理が参考書と異なっていたのを修正。

この2チャプターで教材スライドSVGを17枚制作した。

Ch3-5+総合演習のテキスト拡充とスライド制作(19枚)

続けてCh3(投資活動によるCF)〜Ch5(CF計算書の作成手順)と総合演習のテキストを拡充。同様に品質ゲート検算を通し、SVGスライドを19枚制作した。

ここまでで3級編の全チャプターのテキストとスライドが完成した。

制作物の集計

一日の成果を数字で振り返る。

項目数量
SVGスライド(教材)70枚
SVGプレースホルダー96枚
テキスト完成チャプター3級編全チャプター
新設ページ3ページ(講義ノート3級・2級、一覧)

Git LFS pushの132 unknown objects問題

全ファイルをコミットしてpushしたところ、Git LFSが132個のunknown objectsを検出してpushが止まった。LFS管理下のファイルが先にアップロードされていなかったのが原因。

# pushが拒否された後の対処
git lfs push origin master
# → 2,882 objects, 188 MB をアップロード

git push origin master
# → 成功

git lfs push で明示的にLFSオブジェクトをアップロードしてから通常のpushを実行して解決。SVGファイルを大量に追加したときはLFS pushを先に走らせる手順を忘れないこと。

次セッション用の制作計画書

2級編(Ch1-8+総合演習)のテキスト拡充とスライド制作に向けた計画書を作成した。Codexレビューを通し、チャプターごとの想定スライド枚数と品質ゲートの手順を整理した。

振り返り

一日で70枚のSVGスライドを制作し、3級編の全チャプターテキストを書き上げた。配列分割とname不一致のデバッグで1時間ほど手が止まったが、ログを仕込んで原因を特定するという基本に立ち返って解決した。Git LFSの手順も次回から迷わない。2級編は計画書に沿って進めれば、同じペースで完走できる見込み。