[{"data":1,"prerenderedAt":223},["ShallowReactive",2],{"content-/rsvp-reader-kickoff-phase3":3,"all-pages-for-dir":202,"related-/rsvp-reader-kickoff-phase3":203,"og-image-/rsvp-reader-kickoff-phase3":222},{"id":4,"title":5,"body":6,"category":180,"concepts":181,"description":182,"extension":183,"meta":184,"navigation":185,"ogImage":181,"path":186,"project_name":187,"published":188,"publishedAt":189,"seo":190,"source":191,"stem":192,"tags":193,"todo":181,"unpublished":188,"updatedAt":181,"__hash__":201},"pages/2026-09/2026-09-27/rsvp-reader-kickoff-phase3.md","RSVP速読リーダーをVue 3で作り始めた記録：画像2枚の企画書、最低字数5字の判断、Codexレビュー上限1万行",{"type":7,"value":8,"toc":168},"minimark",[9,13,17,20,24,27,30,33,36,40,43,46,49,53,56,59,67,71,74,77,84,88,91,94,97,100,103,106,112,116,119,135,141,144,148,151,154,165],[10,11,5],"h1",{"id":12},"rsvp速読リーダーをvue-3で作り始めた記録画像2枚の企画書最低字数5字の判断codexレビュー上限1万行",[14,15,16],"p",{},"朝7時すぎ、クリップボードに保存した画像2枚を Claude Code に貼り付けた。\nどちらも速読表示の画面で、1枚は止めたところを、もう1枚は流しているところを写している。\nRSVP リーダーと呼ばれる種類の表示で、文章を小さなかたまりに切り、画面の同じ位置へ次々に出していく。\nこれを作る企画を立てるところから、この日は始まった。",[14,18,19],{},"この時点では、2枚の画像はまだ計画書の外にあった。",[21,22,23],"h2",{"id":23},"画像2枚から計画書へ",[14,25,26],{},"svg-diagram スキルを読ませたうえで、計画書を書いてもらった。\n全体構成の図を SVG で作り、本文と判断事項5件を書き、Codex のレビューを通してから見せる流れである。\nCodex の判定は「承認」で、致命的な指摘はなかった。",[14,28,29],{},"判断事項は、計画書の HTML に埋め込んだ回答フォームで選ぶ。\n8899番のポートは別のセッションが使っていたので、そこには触れずに8901番で立ち上げてもらった。",[14,31,32],{},"ここで、ふと引っかかった。\nVue って、Vue 3 の次に Vue 4 のようなものが出ていなかったか。\nnpm で確かめてもらうと、Vue 4 はまだ出ていなかった。\nあとで作った雛形も、Vue 3.5、Vite 8、TypeScript 6 の組み合わせになった。",[14,34,35],{},"せっかくなので、渡した画像2枚は計画書の中に参照画像として入れておいてもらった。\n入れた先は「1. 何を作るか」の節で、参照画像1が停止中、参照画像2が再生中の画面である。\n参照画像1では、下半分にルビ付きの全文パネルが出ていて、「ある日の」がハイライトされている。",[21,37,39],{"id":38},"人物辞書に-kuromoji-は使わない","人物辞書に kuromoji は使わない",[14,41,42],{},"判断事項の4番目は、登場人物の辞書をどう作るかだった。\n自由記述欄には、アプリの中では作らないと書いた。\n開発環境で Claude Code や Codex（サブスクリプションの枠内）に本の本文を読ませ、作品ごとに JSON を作らせる。\n本文は Turso に置いた蔵書 DB から取ってくる。",[14,44,45],{},"形態素解析の kuromoji を入れる案もあった。\nただ、1回の処理にどれくらいかかるかは分からないものの、たぶんサブスクリプションの枠内でできそうだし、LLM に読ませるほうが正確ではないかと考えた。\nkuromoji でやった場合の精度と比べてみたい気持ちはある。\nとはいえ、それほど精度は高くない気がしている。",[14,47,48],{},"そこで、いったん kuromoji は入れないことにした。\n代わりに、蔵書 DB から1冊を書き出す開発用スクリプトと、その本の人物辞書を作る手順を、スキルとして計画に加えてもらった。\n改訂した計画書も、Codex の再レビューは「承認」だった。",[21,50,52],{"id":51},"phase-0-と-phase-1雛形から青空文庫の変換まで","Phase 0 と Phase 1：雛形から青空文庫の変換まで",[14,54,55],{},"Phase 0 では、Node と pnpm のバージョンと、Vite の雛形ツールが対話なしで動くかどうかを確かめてもらった。\n雛形からデモ用の部品を除いて新しいリポジトリへ移し、Vitest と BudouX を足した。\nテストと型検査込みのビルドが通り、dev サーバーの画面にもコンソールエラーは出なかった。\nGitHub の非公開リポジトリに push し、公開範囲が PRIVATE になっていることも確かめてもらった。",[14,57,58],{},"Phase 1 の素材は、青空文庫の『蜘蛛の糸』である。\n最初に、「2,868字」が見出し（一、二、三）を含んだ数なのかを実測させ、字数の数え方を決めた。\n続いて青空文庫テキストの変換を書いてもらった。\nルビは、明示する形と、直前の漢字にかかる省略形の両方を扱う。\n外字、見出し、冒頭の記号説明、末尾の底本情報も処理の対象にした。",[14,60,61,62,66],{},"その先は、人名の位置探し、BudouX による分割、かたまりの組み立て、表示時間の計算と続く。\nテストは38件から48件まで増えた。\n計画書の完了条件5つをすべてテストで確かめてから、",[63,64,65],"code",{},"c23679a"," をコミットして push した。",[21,68,70],{"id":69},"codex-レビューの上限を1万行に上げる","Codex レビューの上限を1万行に上げる",[14,72,73],{},"ここで作業を止めて、Codex コミットレビューの設定を変えた。\n差分の行数の上限が7,000行になっていたが、この値にはあまり意味がないと感じたので、1万行に上げてもらった。\nすると Claude Code から、制限時間も今の比率（7,000行で420秒）に合わせて600秒にしてはどうかという提案があり、それにも乗った。",[14,75,76],{},"ゲートのスクリプトは、別のセッションのレビューが動いている最中だった。\n手順書は実行中のレビューに影響しないので先に直させ、スクリプト本体は別セッションのレビューが終わるのを待ってから書き換えさせた。",[14,78,79,80,83],{},"ついでに、今回のコミットも念のためレビューに通してもらった。\n外字の対応表のコミット（",[63,81,82],{},"3a1dc14","）は、レビューが飛ばされていたものである。\nCodex の判定は「指摘事項なし」だった。",[21,85,87],{"id":86},"phase-2一文は短すぎないほうがいいのか","Phase 2：一文は短すぎないほうがいいのか",[14,89,90],{},"Phase 2 は再生の最小版である。\n判断を含む処理（再生時計、残り時間の累積、時刻の表示形式、速度の範囲制限）は純粋関数にしてテストし、Vue の側は画面とタイマーだけにした。",[14,92,93],{},"1枚目の表示は参照画像と同じ状態になった。\n「ある日の」が出て、下に「1 / 2,868字　残り 約2:22」とある。\n速度は1,500字/分である。\n再生を始めて約7秒後には「143 / 2,868字　残り 約2:15」になり、残り時間も7秒ぶん減っていた。",[14,95,96],{},"ここで一つ疑問が湧いた。\nものによっては、一文がだいぶ短すぎる。\n5文字に満たないかたまりがあると、文の意味をとるのがかえって遅くなる気がする。\n最低文字数のようなものは設定しないのかと聞いた。",[14,98,99],{},"設定はすでにあった。\n既定値は、元にした投稿と同じ「3字以上」で、まだ画面には出していなかった（Phase 3 の設定パネルで出す予定だった）。\n『蜘蛛の糸』で最低字数を変えたときの違いを、かたまりの数、平均の長さ、5字未満の割合、全体の時間、冒頭の区切りの表にしてもらった。\nすると、最低字数を変えても全体の時間は変わらなかった。\nこれは面白かった。",[14,101,102],{},"5字で進めることにした。\nもう一つ気になったのは、冒頭の「極楽の蓮池のふちを」である。\nここは1つのかたまりで出てほしい。",[14,104,105],{},"原因は、5字未満のかたまりを次へつなぐだけの作りにあった。\n読点をかたまりの終わりとして扱うように変え、2文節ずつまとめる処理でも同じ扱いにそろえてもらった。\n操作バーに最低字数の選択欄を置き、区切り直しても読んでいる位置が保たれるようにしてもらった。",[14,107,108,109,66],{},"テストは70件になった。\n画面を読み込み直すと、「極楽の蓮池のふちを、」が1つのかたまりで出た。\nヘッダーのキー操作の説明で「↑↓」だけが青い記号で出ていることには、再生の確認中に Claude Code が気づいていた。\nWindows の絵文字フォントで描かれているらしい。\n一度直させたあとも青っぽく見えたので、拡大して確かめさせた。\n狭い画面で文字を自動で縮める処理も足し、390px のスマホ幅はエミュレーションで確かめてもらった。\n既定の最小字数を5字にして、",[63,110,111],{},"6cb1ca4",[21,113,115],{"id":114},"phase-3参照画像と同じ画面になるまで","Phase 3：参照画像と同じ画面になるまで",[14,117,118],{},"Phase 3 で作ったのは次の4つである。",[120,121,122,126,129,132],"ul",{},[123,124,125],"li",{},"停止中の全文パネル（ルビ付き、現在位置のハイライト、クリックでその位置へ移動）",[123,127,128],{},"人名に色を付けた表示と、ラベルの行",[123,130,131],{},"2段の操作バー",[123,133,134],{},"Shift+←→ による段落単位の移動",[14,136,137,138,66],{},"全文パネルのクリックは、3段落目の53か所をすべて押して確かめてもらった。\nどれもクリックした文字を含むかたまりへ移り、ずれは0件だった。\nテスト91件と型検査が通り、",[63,139,140],{},"2b5457b",[14,142,143],{},"朝に貼った2枚の画像は、ここで完了条件として効いてきた。\n停止中は参照画像1、再生中は参照画像2と同じ状態になることを画面で確かめて、Phase 3 を閉じた。",[21,145,147],{"id":146},"phase-4-以降は明日へ","Phase 4 以降は明日へ",[14,149,150],{},"続きは明日やることにして、Phase 4 からは Google タスクに回した。\nその前に、計画書に「9. 進捗と再開のしかた」を追記させ、コミットして push した。\nPhase 4〜6 は、翌日（9月28日）が期日の Google タスク3件として登録した。\n期日と本文が入っていることも、1件ずつ確かめてもらった。",[21,152,153],{"id":153},"学びメモ",[120,155,156,159,162],{},[123,157,158],{},"最低字数を変えても、『蜘蛛の糸』全体の再生時間は変わらなかった。「極楽の蓮池のふちを、」をひとかたまりにできるかどうかは、読点の扱いで決まった",[123,160,161],{},"画像2枚を計画書に参照画像として入れておくと、Phase 3 でそのまま完了条件になった",[123,163,164],{},"人物辞書は、kuromoji ではなくサブスクリプション内の LLM に本文を読ませて作る方針にした",[14,166,167],{},"kuromoji でやった場合との精度の比較は、やってみたいと言ったまま手を付けていない。",{"title":169,"searchDepth":170,"depth":170,"links":171},"",2,[172,173,174,175,176,177,178,179],{"id":23,"depth":170,"text":23},{"id":38,"depth":170,"text":39},{"id":51,"depth":170,"text":52},{"id":69,"depth":170,"text":70},{"id":86,"depth":170,"text":87},{"id":114,"depth":170,"text":115},{"id":146,"depth":170,"text":147},{"id":153,"depth":170,"text":153},"dev",null,"文章を小さなかたまりに切って次々に表示するRSVPリーダーを、画像2枚から企画してPhase 3まで進めた日の記録。人物辞書はkuromojiを使わずLLMで作る方針にし、最低字数は5字にした。途中でCodexコミットレビューの上限を1万行に上げた。","md",{},true,"/rsvp-reader-kickoff-phase3","misc-dev",false,"2026-09-27T00:00:00.000Z",{"title":5,"description":182},"make-diary","2026-09/2026-09-27/rsvp-reader-kickoff-phase3",[194,195,196,197,198,199,200],"RSVP","速読","Vue","BudouX","kuromoji","Codex","Claude Code","ooolWEJi0kqYJrJ7O74lA6grCRo3dqF4pj0vl1GXx9Q",[],[204,207,211,214,218],{"title":205,"path":206,"publishedAt":189},"2026年9月27日の開発日記 - 伏線回収漫画183作品のランキング公開、RSVP速読リーダー着手、PCのメモリ調査","/2026-09-27-diary",{"title":208,"path":209,"publishedAt":210},"2026年9月26日の開発日記 - 再現動画のレビュー画面づくりと、メモリで落ちるdevサーバー","/2026-09-26-diary","2026-09-26T00:00:00.000Z",{"title":212,"path":213,"publishedAt":210},"Nuxtのdevサーバーがheap out of memoryで落ちた原因：再現動画のシーン分割読み込みと終わらない回帰テスト","/excel-scene-dev-memory-split-loading",{"title":215,"path":216,"publishedAt":217},"Cloudflare Workers無料プランのcronで毎朝の統計取得は動くか：wranglerでPhase 0を実測した","/make-diary-cloudflare-workers-cron-plan","2026-09-25T00:00:00.000Z",{"title":219,"path":220,"publishedAt":221},"Codex を GPT-6 Sol へ上げ、ステータスラインにエフォートを出し、yt-dlp の JS ランタイム警告を deno で直した","/codex-gpt6-sol-statusline-effort-ytdlp-deno","2026-09-23T00:00:00.000Z","https://log.eurekapu.com/og/blog/rsvp-reader-kickoff-phase3.png?v=2026-09-27T00%3A00%3A00.000Z&title=RSVP%E9%80%9F%E8%AA%AD%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%82%92Vue%203%E3%81%A7%E4%BD%9C%E3%82%8A%E5%A7%8B%E3%82%81%E3%81%9F%E8%A8%98%E9%8C%B2%EF%BC%9A%E7%94%BB%E5%83%8F2%E6%9E%9A%E3%81%AE%E4%BC%81%E7%94%BB%E6%9B%B8%E3%80%81%E6%9C%80%E4%BD%8E%E5%AD%97%E6%95%B05%E5%AD%97%E3%81%AE%E5%88%A4%E6%96%AD%E3%80%81Codex%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E4%B8%8A%E9%99%901%E4%B8%87%E8%A1%8C&author=Kei%20Komatsu&sig=cfa8fc723caf133a",1790554828440]