会計入門ストーリー版をiOS向けに差し替えた日:「版」の列と1文ずつ送れる画面再現

開発eurekapu-nuxt4

会計入門ストーリー版を iOS 向けに差し替えた日

3分法の違いを描き直した画面と Web のストーリー版のページを、URL で2つ並べて聞いた。 「これって、Web のストーリー版のこのページにも反映するんでしたっけ?」

答えは「反映しない」だった。 では、この画は何のために作っていたのか。 そこを思い出すまでに、少し時間がかかった。

この日は eurekapu-nuxt4 で3つのセッションを回した。 1つは財務諸表ストーリーの改良を PC 版とスマホ版へ移す作業で、残りの2つで会計入門ストーリー版を iOS 向けに差し替えた。

財務諸表ストーリーの改良を PC とスマホへ移す

最初のセッションでは、iOS 版で先に入れた財務諸表ストーリーの改良を、PC 版とスマホ版(Nuxt)へ移した。 作業場所はワークツリーで、本体とは別に確認用の dev サーバー(3210番)を立てている。

撮影で確かめる前に、main の新しい変更115コミットをこのブランチへ取り込んでもらった。 衝突は3ファイルで、解いたあとテスト2,012件が通った。 そのうえで No.01、09、20、23 の4回を撮らせた。 PC 版とスマホ版のそれぞれで、前(main、3200番)と後(このブランチ、3210番)を並べている。 崩れや見切れは見つからなかった。

merge のあと dev サーバーが 500 を返したが、再起動で直った。 merge 直後の作り直しで壊れた途中のファイルが残っていた、という見立てだった。

PC 版の財務諸表の段は、寄らずに財務諸表全体(CS の直接法の左端から PL の右端まで)を映す形にしてもらった。 字幕を消して画を下へ広げる「字幕 ON / OFF」のボタンも足した。 カメラのテストは303件通った。

音声が無いのはなぜか、とも聞いた。 Mac 側にしか無いなら、Mac に送ってもらえばいい。 SSH で Mac を見てもらうと合成済みの音声があり、345件すべてが一致した。 合成し直さずに今の台本でデータを組み直し、25回すべてで照合が通った。 新しい mp3 の160件は、自分の判断で R2 へ上げることにした。 配信先からも160件すべて取れることを確かめてもらった。

制作画面の幅も直させた。 4K の画面に映すと、画が中央に小さく収まってしまう。 ビューアとして使うなら横いっぱいに広がるほうがいいので、コンテンツ領域の max-width を外してもらった。

途中で、dev サーバーの番号が3200番だけでなく3210番や3220番にも増えていることに気づいた。 ワークツリーが分かれているので、確認用のサーバーもそれぞれ別の番号が要る。 3210番のサーバーは1.5GB前後のメモリを使っていた。

積み残しを聞くと5つあった。 デプロイはまだ見送り、未了事項は計画書の先頭に残してもらった。

カメラの滑らかさを確かめる URL を開くと、引っかかる所が1つあった。 スマホ版の仕訳の段で、画面がスクロールしすぎる。 話はまだ5要素と仕訳なのだから、1つ前の5要素の画のままでいい。 そう伝えて、仕訳の段(段2)だけ前の段の画で止めるように直させた。 撮影の画面が小さく下が切れていたので、縦長(1080×1920)で撮り直している。

最後に、翌日続けるための引き継ぎ(進捗、手順、次のセッションに貼るプロンプト)を、テキストファイルにしてダウンロードディレクトリへ出してもらった。

3分法の画は、どこに入るものだったか

2つ目のセッションは、会計入門ストーリー版の画を作り直す作業だった。 まず「財務諸表とは」の最初の節を作り直した。 電子書籍の四表の縮小図の代わりに、財務諸表ストーリーのまとめにある四表一覧とつながりの線を、同じ配置と同じ数字のまま SVG で描いた。 このコミットは、Codex のコミット前レビューで2回止まっている。

続いて長い文の試作に入った。 「勘定を使った数え方」の239字の文を1文ずつに分け、ナレーションが語っている石と括弧に、元の図の上から光を当てる。 拡大したとき、牧草地の下端が緑の三角として上に映り込んだので、クリップを拡大範囲(T 勘定)だけに絞ってもらった。 長い文は全部で37件あり、この時点で4件が済み、33件が残っていた。

3分法の違いの画について Web 側への反映を聞いたのは、この試作のあとだった。 3分法の画は、Web のストーリー版には入らない。 計画書の「やらないこと」に、Web のストーリー版のデータやまとめ方を iOS のために変えない、と書いてあった。 そこまで聞いて、ようやく思い出した。 これは会計入門ストーリー版を iPhone のアプリへ入れる計画の一部で、財務諸表ストーリーを iOS へ入れたときと同じやり方だった。 混同していたのは自分のほうだった。

長い文に光を当てる25件と、座標の読み方

残りの長い文に光を当てる作業では、座標の読み取りにいちばん手間取った。

最初は、図の動きを最後まで進めて図形をまとまりごとに囲み、番号付きの枠を描く計測ツールを作らせた。 ところが、背景の大きなパネルがすべてのまとまりを飲み込んでしまった。 大きな背景の矩形を飛ばすように直しても、この種の図ではまとまりがうまく取れない。 PNG を SVG で包んだだけの図もあり、そこには測る図形がそもそも無かった。 そこで図に座標のグリッドを重ねて位置を読む方式へ切り替え、再利用できるスクリプトとして残した。 Git Bash(MSYS)が /images/... の引数を Windows のパスに書き換えてしまい、変換を切って再実行する場面もあった。

光の位置が狙いから10〜30単位ずれた図もあった。 その2枚は目で読んだ座標だったので、グリッドの変換式から計算し直してもらうと揃った。

細かい直しもあった。

  • 表の枠線の位置が図ごとに違い、拡大範囲に字幕の帯が一部映り込んだ。拡大範囲の上端を図ごとに決めた
  • 括弧の中に5項目を並べた文が、字幕で5行に折り返した。この文は2文に分けた

長い文に光を当てる25件は、最後の Part 7 の9本まで終わった。 これとは別に、動く画に作り直す8件がある。 その1件目として、5要素と勘定科目の長い文を動く札の画にした。

プレビューのページも、財務諸表の制作画面と同じ列のレイアウトに直してもらった。 左の列に「チャプター → 回」が並び、まだ作り直していない7件は「未作成」で出る。 ← → で前後の回へ移れる。

画面を貼って寄りについて伝えると、Part 3 の損益計算書の回は、図全体を見せたまま光だけ当てる方針になった。 電子書籍の切り抜き版と iOS 版の切り分けは、構造が大きく変わる。 計画書に「版の切り分け」の節を足し、Codex のレビューを通してから次のセッションへ回した。

「版」の列を足す

3つ目のセッションは、前のセッションの引き継ぎテキストを読ませるところから始めた。 損益計算書の寄りを外す修正をコミットしたあと、版の作業を先にやってもらった。 電子書籍の切り抜き版とスマホ(iOS)版を両方作る計画だったはずなので、ミラーカラムの左端に「版」の列を1つ足したかった。

版を扱う関数を書かせ、テスト19件が通った。 どちらの版を選んでも、チャプターの移動や前後の移動はその版の中で閉じる。 電子書籍の切り抜き版は、公開中の URL のまま残した。

続けて、iOS 版の中身を作り直した画面再現へ全部入れ替えてもらった。 3分法の違いをはじめ、28本の回が元のステップの代わりに再生される。 入れ替えの途中で、次の不具合を潰した。

  • 字幕が出ない。Vue の真偽値の props は、省略すると false になるためだった
  • スマホ幅で画の下端(字幕)が切れる。講座本文の余白(margin 24px)が画の SVG にも当たり、下へずれていた
  • vue-tsc がプロジェクト全体でメモリ不足になって落ちた。今回の TS ファイルだけを tsc で検査した

電子書籍の切り抜き版が変わっていないことも確かめた(回0件、印0件)。

回をまとめたら途中に飛べなくなった

確認しているうちに、違和感が出てきた。 回を1ステップにまとめたせいで、回の途中へ飛べない。 今どの文の話をしているのかも分からない。 もともと右側のテキストは1つずつのステップで、矢印キーで送れたはずだ。

PC のインタラクションは、ストーリー版のままでいい。 そう判断して差し戻し、回の台本を1文ずつ右のステップへ分け直してもらった。 ← → やクリックで1文ずつ移れて、いまの文が光る。 3分法の違いの回は、40文と見出し6つになった。

音声ありなしの札

音声はたぶん全部無い、と思っていた。 ただ確信はないので、音声のありなしをキャプションに付けてもらった。 簿記講座から借りている節には音声があり、会計入門の節には無いものがあるようだった。

ここで /procs を回し、走りっぱなしのプロセスから3つを選んで止めた。 空き物理メモリは7.3GBから8.7GBに増えた(約1.4GBの回収)。

「簿記とは」の章も差し替え、右上のロゴを外す

iOS 版の Part 1 では、仕訳が左右に分かれる理由の章を、簿記講座のストーリー版の同じページへ差し替えた。 冒頭の「全体像」と、電子書籍のページを光らせながら読む節が入り、全部で14節になった。

「簿記とは」の章も、全部こちらへ入れてほしいと伝えた。 簿記講座側のほうが縦に長く、レイアウトもきれいだからだ。 2ページの「全体像」の扉は、会計入門用に SVG で作り直してもらった。

ストーリー版で作った SVG の右上には、サイト名のロゴとインフォグラフィックの類が入っていた。 記事には入れてほしいが、コンテンツの中では邪魔になる。 iOS 版からは外し、簿記講座版には残した。 あとで書き戻されないように、スクリプトのコメントとプロジェクトのルールにも書いてもらった。

Mac の順番待ちと、Windows での合成

音声は Mac に合成を頼んだ。 元のステップの363クリップを引き取り、MP3 にすると42MB になった。 電子書籍の切り抜き版、iOS 版とも、元のステップでは音声なしが0件になった。

残ったのは回の文だった。 作り直した28本の台本の文で、全部で182文ある。 これも Mac に頼んだが、しばらくして様子を聞くと、1本もできていなかった。 Mac は別のセッションの財務諸表講座の音声を合成していて、こちらは順番待ちのまま止まっていた。

Windows のメモリは今なら空いている。 そう考えて、Windows 側で合成することにした。 Mac の順番待ちは取り消し、声のセットが Mac と同じ(参照音声の指紋が一致)ことを確かめてから、15時43分に合成を始めた。 約10分で182文中82文まで進み、最後まで終わった。 これで会計入門ストーリー版は、どちらの版でも全ステップに音声がある。

最後に、Mac のセッションから届いた依頼(計画書の置き場所を、本番アプリの「学ぶ」タブの中の1コンテンツへ読み替える)を反映し、push した。 計画書に今日の終わりの状態を書いて、セッションを閉じた。

学びメモ

  • 回を1ステップにまとめると、PC では途中に飛べず、今どこを話しているかも見えなくなった。右側のテキストは、1文ずつ送れる形のまま残すほうがよかった
  • 図形のまとまりを自動で取る計測は、背景パネルや PNG 入りの図で崩れた。座標グリッドを重ねて読むほうが確実で、目で読んだ座標も変換式で計算し直すと揃った
  • Mac に合成を頼んだあと、別のセッションの順番待ちで止まっていた。途中で様子を聞いて、初めて気づいた
  • Web 側に入らない画を作っていると、何のための作業か自分でも見失う。計画書の「やらないこと」が、思い出す手がかりになった
#eurekapu-nuxt4#iOS#Nuxt#音声合成#会計教材