[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"content-/intro-accounting-story-ios-edition":3,"all-pages-for-dir":235,"related-/intro-accounting-story-ios-edition":236,"og-image-/intro-accounting-story-ios-edition":254},{"id":4,"title":5,"body":6,"category":216,"concepts":217,"description":218,"extension":219,"meta":220,"navigation":221,"ogImage":217,"path":222,"project_name":223,"published":224,"publishedAt":225,"seo":226,"source":227,"stem":228,"tags":229,"todo":217,"unpublished":224,"updatedAt":217,"__hash__":234},"pages/2026-10/2026-10-26/intro-accounting-story-ios-edition.md","会計入門ストーリー版をiOS向けに差し替えた日：「版」の列と1文ずつ送れる画面再現",{"type":7,"value":8,"toc":203},"minimark",[9,14,18,21,24,29,32,35,38,41,44,47,50,53,56,59,63,66,69,72,76,79,87,90,93,103,106,109,112,116,119,122,125,136,139,142,145,148,151,154,157,161,164,167,170,174,177,180,183,186,189],[10,11,13],"h1",{"id":12},"会計入門ストーリー版を-ios-向けに差し替えた日","会計入門ストーリー版を iOS 向けに差し替えた日",[15,16,17],"p",{},"3分法の違いを描き直した画面と Web のストーリー版のページを、URL で2つ並べて聞いた。\n「これって、Web のストーリー版のこのページにも反映するんでしたっけ？」",[15,19,20],{},"答えは「反映しない」だった。\nでは、この画は何のために作っていたのか。\nそこを思い出すまでに、少し時間がかかった。",[15,22,23],{},"この日は eurekapu-nuxt4 で3つのセッションを回した。\n1つは財務諸表ストーリーの改良を PC 版とスマホ版へ移す作業で、残りの2つで会計入門ストーリー版を iOS 向けに差し替えた。",[25,26,28],"h2",{"id":27},"財務諸表ストーリーの改良を-pc-とスマホへ移す","財務諸表ストーリーの改良を PC とスマホへ移す",[15,30,31],{},"最初のセッションでは、iOS 版で先に入れた財務諸表ストーリーの改良を、PC 版とスマホ版（Nuxt）へ移した。\n作業場所はワークツリーで、本体とは別に確認用の dev サーバー（3210番）を立てている。",[15,33,34],{},"撮影で確かめる前に、main の新しい変更115コミットをこのブランチへ取り込んでもらった。\n衝突は3ファイルで、解いたあとテスト2,012件が通った。\nそのうえで No.01、09、20、23 の4回を撮らせた。\nPC 版とスマホ版のそれぞれで、前（main、3200番）と後（このブランチ、3210番）を並べている。\n崩れや見切れは見つからなかった。",[15,36,37],{},"merge のあと dev サーバーが 500 を返したが、再起動で直った。\nmerge 直後の作り直しで壊れた途中のファイルが残っていた、という見立てだった。",[15,39,40],{},"PC 版の財務諸表の段は、寄らずに財務諸表全体（CS の直接法の左端から PL の右端まで）を映す形にしてもらった。\n字幕を消して画を下へ広げる「字幕 ON / OFF」のボタンも足した。\nカメラのテストは303件通った。",[15,42,43],{},"音声が無いのはなぜか、とも聞いた。\nMac 側にしか無いなら、Mac に送ってもらえばいい。\nSSH で Mac を見てもらうと合成済みの音声があり、345件すべてが一致した。\n合成し直さずに今の台本でデータを組み直し、25回すべてで照合が通った。\n新しい mp3 の160件は、自分の判断で R2 へ上げることにした。\n配信先からも160件すべて取れることを確かめてもらった。",[15,45,46],{},"制作画面の幅も直させた。\n4K の画面に映すと、画が中央に小さく収まってしまう。\nビューアとして使うなら横いっぱいに広がるほうがいいので、コンテンツ領域の max-width を外してもらった。",[15,48,49],{},"途中で、dev サーバーの番号が3200番だけでなく3210番や3220番にも増えていることに気づいた。\nワークツリーが分かれているので、確認用のサーバーもそれぞれ別の番号が要る。\n3210番のサーバーは1.5GB前後のメモリを使っていた。",[15,51,52],{},"積み残しを聞くと5つあった。\nデプロイはまだ見送り、未了事項は計画書の先頭に残してもらった。",[15,54,55],{},"カメラの滑らかさを確かめる URL を開くと、引っかかる所が1つあった。\nスマホ版の仕訳の段で、画面がスクロールしすぎる。\n話はまだ5要素と仕訳なのだから、1つ前の5要素の画のままでいい。\nそう伝えて、仕訳の段（段2）だけ前の段の画で止めるように直させた。\n撮影の画面が小さく下が切れていたので、縦長（1080×1920）で撮り直している。",[15,57,58],{},"最後に、翌日続けるための引き継ぎ（進捗、手順、次のセッションに貼るプロンプト）を、テキストファイルにしてダウンロードディレクトリへ出してもらった。",[25,60,62],{"id":61},"_3分法の画はどこに入るものだったか","3分法の画は、どこに入るものだったか",[15,64,65],{},"2つ目のセッションは、会計入門ストーリー版の画を作り直す作業だった。\nまず「財務諸表とは」の最初の節を作り直した。\n電子書籍の四表の縮小図の代わりに、財務諸表ストーリーのまとめにある四表一覧とつながりの線を、同じ配置と同じ数字のまま SVG で描いた。\nこのコミットは、Codex のコミット前レビューで2回止まっている。",[15,67,68],{},"続いて長い文の試作に入った。\n「勘定を使った数え方」の239字の文を1文ずつに分け、ナレーションが語っている石と括弧に、元の図の上から光を当てる。\n拡大したとき、牧草地の下端が緑の三角として上に映り込んだので、クリップを拡大範囲（T 勘定）だけに絞ってもらった。\n長い文は全部で37件あり、この時点で4件が済み、33件が残っていた。",[15,70,71],{},"3分法の違いの画について Web 側への反映を聞いたのは、この試作のあとだった。\n3分法の画は、Web のストーリー版には入らない。\n計画書の「やらないこと」に、Web のストーリー版のデータやまとめ方を iOS のために変えない、と書いてあった。\nそこまで聞いて、ようやく思い出した。\nこれは会計入門ストーリー版を iPhone のアプリへ入れる計画の一部で、財務諸表ストーリーを iOS へ入れたときと同じやり方だった。\n混同していたのは自分のほうだった。",[25,73,75],{"id":74},"長い文に光を当てる25件と座標の読み方","長い文に光を当てる25件と、座標の読み方",[15,77,78],{},"残りの長い文に光を当てる作業では、座標の読み取りにいちばん手間取った。",[15,80,81,82,86],{},"最初は、図の動きを最後まで進めて図形をまとまりごとに囲み、番号付きの枠を描く計測ツールを作らせた。\nところが、背景の大きなパネルがすべてのまとまりを飲み込んでしまった。\n大きな背景の矩形を飛ばすように直しても、この種の図ではまとまりがうまく取れない。\nPNG を SVG で包んだだけの図もあり、そこには測る図形がそもそも無かった。\nそこで図に座標のグリッドを重ねて位置を読む方式へ切り替え、再利用できるスクリプトとして残した。\nGit Bash（MSYS）が ",[83,84,85],"code",{},"/images/..."," の引数を Windows のパスに書き換えてしまい、変換を切って再実行する場面もあった。",[15,88,89],{},"光の位置が狙いから10〜30単位ずれた図もあった。\nその2枚は目で読んだ座標だったので、グリッドの変換式から計算し直してもらうと揃った。",[15,91,92],{},"細かい直しもあった。",[94,95,96,100],"ul",{},[97,98,99],"li",{},"表の枠線の位置が図ごとに違い、拡大範囲に字幕の帯が一部映り込んだ。拡大範囲の上端を図ごとに決めた",[97,101,102],{},"括弧の中に5項目を並べた文が、字幕で5行に折り返した。この文は2文に分けた",[15,104,105],{},"長い文に光を当てる25件は、最後の Part 7 の9本まで終わった。\nこれとは別に、動く画に作り直す8件がある。\nその1件目として、5要素と勘定科目の長い文を動く札の画にした。",[15,107,108],{},"プレビューのページも、財務諸表の制作画面と同じ列のレイアウトに直してもらった。\n左の列に「チャプター → 回」が並び、まだ作り直していない7件は「未作成」で出る。\n← → で前後の回へ移れる。",[15,110,111],{},"画面を貼って寄りについて伝えると、Part 3 の損益計算書の回は、図全体を見せたまま光だけ当てる方針になった。\n電子書籍の切り抜き版と iOS 版の切り分けは、構造が大きく変わる。\n計画書に「版の切り分け」の節を足し、Codex のレビューを通してから次のセッションへ回した。",[25,113,115],{"id":114},"版の列を足す","「版」の列を足す",[15,117,118],{},"3つ目のセッションは、前のセッションの引き継ぎテキストを読ませるところから始めた。\n損益計算書の寄りを外す修正をコミットしたあと、版の作業を先にやってもらった。\n電子書籍の切り抜き版とスマホ（iOS）版を両方作る計画だったはずなので、ミラーカラムの左端に「版」の列を1つ足したかった。",[15,120,121],{},"版を扱う関数を書かせ、テスト19件が通った。\nどちらの版を選んでも、チャプターの移動や前後の移動はその版の中で閉じる。\n電子書籍の切り抜き版は、公開中の URL のまま残した。",[15,123,124],{},"続けて、iOS 版の中身を作り直した画面再現へ全部入れ替えてもらった。\n3分法の違いをはじめ、28本の回が元のステップの代わりに再生される。\n入れ替えの途中で、次の不具合を潰した。",[94,126,127,130,133],{},[97,128,129],{},"字幕が出ない。Vue の真偽値の props は、省略すると false になるためだった",[97,131,132],{},"スマホ幅で画の下端（字幕）が切れる。講座本文の余白（margin 24px）が画の SVG にも当たり、下へずれていた",[97,134,135],{},"vue-tsc がプロジェクト全体でメモリ不足になって落ちた。今回の TS ファイルだけを tsc で検査した",[15,137,138],{},"電子書籍の切り抜き版が変わっていないことも確かめた（回0件、印0件）。",[25,140,141],{"id":141},"回をまとめたら途中に飛べなくなった",[15,143,144],{},"確認しているうちに、違和感が出てきた。\n回を1ステップにまとめたせいで、回の途中へ飛べない。\n今どの文の話をしているのかも分からない。\nもともと右側のテキストは1つずつのステップで、矢印キーで送れたはずだ。",[15,146,147],{},"PC のインタラクションは、ストーリー版のままでいい。\nそう判断して差し戻し、回の台本を1文ずつ右のステップへ分け直してもらった。\n← → やクリックで1文ずつ移れて、いまの文が光る。\n3分法の違いの回は、40文と見出し6つになった。",[25,149,150],{"id":150},"音声ありなしの札",[15,152,153],{},"音声はたぶん全部無い、と思っていた。\nただ確信はないので、音声のありなしをキャプションに付けてもらった。\n簿記講座から借りている節には音声があり、会計入門の節には無いものがあるようだった。",[15,155,156],{},"ここで /procs を回し、走りっぱなしのプロセスから3つを選んで止めた。\n空き物理メモリは7.3GBから8.7GBに増えた（約1.4GBの回収）。",[25,158,160],{"id":159},"簿記とはの章も差し替え右上のロゴを外す","「簿記とは」の章も差し替え、右上のロゴを外す",[15,162,163],{},"iOS 版の Part 1 では、仕訳が左右に分かれる理由の章を、簿記講座のストーリー版の同じページへ差し替えた。\n冒頭の「全体像」と、電子書籍のページを光らせながら読む節が入り、全部で14節になった。",[15,165,166],{},"「簿記とは」の章も、全部こちらへ入れてほしいと伝えた。\n簿記講座側のほうが縦に長く、レイアウトもきれいだからだ。\n2ページの「全体像」の扉は、会計入門用に SVG で作り直してもらった。",[15,168,169],{},"ストーリー版で作った SVG の右上には、サイト名のロゴとインフォグラフィックの類が入っていた。\n記事には入れてほしいが、コンテンツの中では邪魔になる。\niOS 版からは外し、簿記講座版には残した。\nあとで書き戻されないように、スクリプトのコメントとプロジェクトのルールにも書いてもらった。",[25,171,173],{"id":172},"mac-の順番待ちとwindows-での合成","Mac の順番待ちと、Windows での合成",[15,175,176],{},"音声は Mac に合成を頼んだ。\n元のステップの363クリップを引き取り、MP3 にすると42MB になった。\n電子書籍の切り抜き版、iOS 版とも、元のステップでは音声なしが0件になった。",[15,178,179],{},"残ったのは回の文だった。\n作り直した28本の台本の文で、全部で182文ある。\nこれも Mac に頼んだが、しばらくして様子を聞くと、1本もできていなかった。\nMac は別のセッションの財務諸表講座の音声を合成していて、こちらは順番待ちのまま止まっていた。",[15,181,182],{},"Windows のメモリは今なら空いている。\nそう考えて、Windows 側で合成することにした。\nMac の順番待ちは取り消し、声のセットが Mac と同じ（参照音声の指紋が一致）ことを確かめてから、15時43分に合成を始めた。\n約10分で182文中82文まで進み、最後まで終わった。\nこれで会計入門ストーリー版は、どちらの版でも全ステップに音声がある。",[15,184,185],{},"最後に、Mac のセッションから届いた依頼（計画書の置き場所を、本番アプリの「学ぶ」タブの中の1コンテンツへ読み替える）を反映し、push した。\n計画書に今日の終わりの状態を書いて、セッションを閉じた。",[25,187,188],{"id":188},"学びメモ",[94,190,191,194,197,200],{},[97,192,193],{},"回を1ステップにまとめると、PC では途中に飛べず、今どこを話しているかも見えなくなった。右側のテキストは、1文ずつ送れる形のまま残すほうがよかった",[97,195,196],{},"図形のまとまりを自動で取る計測は、背景パネルや PNG 入りの図で崩れた。座標グリッドを重ねて読むほうが確実で、目で読んだ座標も変換式で計算し直すと揃った",[97,198,199],{},"Mac に合成を頼んだあと、別のセッションの順番待ちで止まっていた。途中で様子を聞いて、初めて気づいた",[97,201,202],{},"Web 側に入らない画を作っていると、何のための作業か自分でも見失う。計画書の「やらないこと」が、思い出す手がかりになった",{"title":204,"searchDepth":205,"depth":205,"links":206},"",2,[207,208,209,210,211,212,213,214,215],{"id":27,"depth":205,"text":28},{"id":61,"depth":205,"text":62},{"id":74,"depth":205,"text":75},{"id":114,"depth":205,"text":115},{"id":141,"depth":205,"text":141},{"id":150,"depth":205,"text":150},{"id":159,"depth":205,"text":160},{"id":172,"depth":205,"text":173},{"id":188,"depth":205,"text":188},"dev",null,"会計入門ストーリー版をiPhoneアプリへ入れる作業で、ミラーカラムに「版」の列を足し、3分法などの画面再現28本をiOS版へ差し替えた。PCでは1文ずつ送れる形に戻し、音声182文はWindowsで合成した。午前は財務諸表ストーリーの改良をPCとスマホ版へ移した。","md",{},true,"/intro-accounting-story-ios-edition","eurekapu-nuxt4",false,"2026-10-26T00:00:00.000Z",{"title":5,"description":218},"make-diary","2026-10/2026-10-26/intro-accounting-story-ios-edition",[223,230,231,232,233],"iOS","Nuxt","音声合成","会計教材","lIkg0pn5IJgY08gDhe8HDTG29k5nW6JGg2YFw2lRXyk",[],[237,240,243,247,250],{"title":238,"path":239,"publishedAt":225},"2026年10月26日の開発日記 - 会計ストーリー版のiOS差し替え、帳簿なし版の追加、WindowsとMacの分担","/2026-10-26-diary",{"title":241,"path":242,"publishedAt":225},"財務諸表ストーリー動画に「帳簿なし版」を追加：PC横26本の台本と音声合成、グレーアウトとレビュー保存400の修正","/financial-statements-story-nobooks-review",{"title":244,"path":245,"publishedAt":246},"財務諸表講座のiOS→PC移植チェックからデプロイまで：ポート3210と3200の取り違えと「完了にする」が遅い原因","/fs-story-ios-to-pc-port-check","2026-10-27T00:00:00.000Z",{"title":248,"path":249,"publishedAt":225},"Claude CodeをWindowsとMacBookの2台で分担した日：音声合成の受け渡しと法的リスク監査の依頼、脆弱性28件の片付け","/windows-mac-two-machine-handoff",{"title":251,"path":252,"publishedAt":253},"企業再生Excel講座のパイロット回を作り直す：固定カメラ、3段の割付表、権利列の分割","/saisei-pilot-allocation-staged-table","2026-10-23T00:00:00.000Z","https://log.eurekapu.com/og/blog/intro-accounting-story-ios-edition.png?v=2026-10-26T00%3A00%3A00.000Z&title=%E4%BC%9A%E8%A8%88%E5%85%A5%E9%96%80%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AA%E3%83%BC%E7%89%88%E3%82%92iOS%E5%90%91%E3%81%91%E3%81%AB%E5%B7%AE%E3%81%97%E6%9B%BF%E3%81%88%E3%81%9F%E6%97%A5%EF%BC%9A%E3%80%8C%E7%89%88%E3%80%8D%E3%81%AE%E5%88%97%E3%81%A81%E6%96%87%E3%81%9A%E3%81%A4%E9%80%81%E3%82%8C%E3%82%8B%E7%94%BB%E9%9D%A2%E5%86%8D%E7%8F%BE&author=Kei%20Komatsu&sig=a2979d849dac5088",1793331572594]