[{"data":1,"prerenderedAt":389},["ShallowReactive",2],{"content-/artists-lifespan-timeline-build-log":3,"all-pages-for-dir":366,"related-/artists-lifespan-timeline-build-log":367,"og-image-/artists-lifespan-timeline-build-log":388},{"id":4,"title":5,"body":6,"category":345,"concepts":346,"description":347,"extension":348,"meta":349,"navigation":350,"ogImage":346,"path":351,"project_name":352,"published":353,"publishedAt":354,"seo":355,"source":356,"stem":357,"tags":358,"todo":346,"unpublished":353,"updatedAt":346,"__hash__":365},"pages/2026-09/2026-09-22/artists-lifespan-timeline-build-log.md","60人の生涯年表を Vue で作り直し、分析を別記事に切り出した作業ログ",{"type":7,"value":8,"toc":337},"minimark",[9,13,17,20,25,28,31,208,215,218,221,232,235,245,248,251,254,257,260,263,266,269,272,275,278,290,297,304,319,322,330,333],[10,11,5],"h1",{"id":12},"_60人の生涯年表を-vue-で作り直し分析を別記事に切り出した作業ログ",[14,15,16],"p",{},"朝6時すぎ、60人の生涯を縦に並べた1枚の年表画像を Claude Code に貼った。\n日本と西洋の芸術家や文化人の生涯が、箱になって並んでいる図である。\nこれを、スクロールすると「その年に誰が生きていて何歳か」が分かるページにしたかった。",[14,18,19],{},"縦軸は年なので素直に描ける。\n横はどうか。\n元図は12列に人を振り分けているが、その振り分けに規則はあるのか。\n規則があるならロジックで再現できるし、なければ別の並べ方を考えるしかない。",[21,22,24],"h2",{"id":23},"画像から60人を読み取り生没年を裏取りする","画像から60人を読み取り、生没年を裏取りする",[14,26,27],{},"最初に、画像の60人を読み取って生没年を裏取りしてもらった。\n裏取りをバックグラウンドで走らせているあいだに、Vue ページの骨組みを先に書かせた。\n構成は年表、並び方の分析、60人の一覧、データの注記の4章である。",[14,29,30],{},"データの置き場は、ページとは別のファイルに分けた。\n人物の配列はデータとして置き、年から位置を出す計算や「その年に生きていた人」を返す計算は純関数にした。",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-ts shiki shiki-themes vitesse-light vitesse-light","export const isAliveIn = (p: Person, year: number): boolean =>\n  p.born \u003C= year && year \u003C= p.died\nexport const aliveIn = (people: readonly Person[], year: number): Person[] =>\n  people.filter((p) => isAliveIn(p, year))\n","ts","",[39,40,41,95,128,171],"code",{"__ignoreMap":37},[42,43,46,50,54,58,62,65,68,71,75,78,81,83,86,89,92],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sHkkW","export",[42,51,53],{"class":52},"stQ0i"," const ",[42,55,57],{"class":56},"senZ8","isAliveIn",[42,59,61],{"class":60},"shFtX"," =",[42,63,64],{"class":60}," (",[42,66,14],{"class":67},"s4oTP",[42,69,70],{"class":60},": ",[42,72,74],{"class":73},"sSkh3","Person",[42,76,77],{"class":60},",",[42,79,80],{"class":67}," year",[42,82,70],{"class":60},[42,84,85],{"class":73},"number",[42,87,88],{"class":60},"):",[42,90,91],{"class":73}," boolean",[42,93,94],{"class":60}," =>\n",[42,96,98,101,104,107,110,112,115,118,120,123,125],{"class":44,"line":97},2,[42,99,100],{"class":67},"  p",[42,102,103],{"class":60},".",[42,105,106],{"class":67},"born",[42,108,109],{"class":60}," \u003C=",[42,111,80],{"class":67},[42,113,114],{"class":52}," && ",[42,116,117],{"class":67},"year",[42,119,109],{"class":60},[42,121,122],{"class":67}," p",[42,124,103],{"class":60},[42,126,127],{"class":67},"died\n",[42,129,131,133,135,138,140,142,145,147,150,153,156,158,160,162,164,166,169],{"class":44,"line":130},3,[42,132,49],{"class":48},[42,134,53],{"class":52},[42,136,137],{"class":56},"aliveIn",[42,139,61],{"class":60},[42,141,64],{"class":60},[42,143,144],{"class":67},"people",[42,146,70],{"class":60},[42,148,149],{"class":52},"readonly",[42,151,152],{"class":73}," Person",[42,154,155],{"class":60},"[],",[42,157,80],{"class":67},[42,159,70],{"class":60},[42,161,85],{"class":73},[42,163,88],{"class":60},[42,165,152],{"class":73},[42,167,168],{"class":60},"[]",[42,170,94],{"class":60},[42,172,174,177,179,182,185,187,190,193,196,199,201,203,205],{"class":44,"line":173},4,[42,175,176],{"class":67},"  people",[42,178,103],{"class":60},[42,180,181],{"class":56},"filter",[42,183,184],{"class":60},"((",[42,186,14],{"class":67},[42,188,189],{"class":60},")",[42,191,192],{"class":60}," =>",[42,194,195],{"class":56}," isAliveIn",[42,197,198],{"class":60},"(",[42,200,14],{"class":67},[42,202,77],{"class":60},[42,204,80],{"class":67},[42,206,207],{"class":60},"))\n",[14,209,210,211,214],{},"裏取りの途中で、生没年が確定しない人が何人か出てきた。\n世阿弥や土佐光信は生没年に諸説があり、俵屋宗達や野々村仁清は生没年不詳である。\nそこで Person 型に ",[39,212,213],{},"approx"," を足し、生年と没年のどちらが推定なのかを持たせた。",[21,216,217],{"id":217},"表示の崩れを一つずつ潰す",[14,219,220],{},"ページを書き終えて記事一覧とパンくずに登録したところで、パンくずのテストが1件落ちた。\n原因を調べてもらうのと並行して列ずれを直し、1790年の位置で描画を確かめ直した。\nその後、テストは25件すべて通った。",[14,222,223,224,227,228,231],{},"スマホ幅のスクリーンショットを渡して表を調べてもらうと、サイト共通のどこかで table が ",[39,225,226],{},"display: block"," になっていた。\n共通側には手を入れず、このページの表にだけ ",[39,229,230],{},"display: table"," を明示した。",[14,233,234],{},"そのほかに、次の2点を直した。",[236,237,238,242],"ul",{},[239,240,241],"li",{},"一覧の色見本の枠が黒くなっていた",[239,243,244],{},"世阿弥と土佐光信の注記で、年が二重に出ていた",[14,246,247],{},"スマホ幅の一覧表では、見出しの「年数」「地域」と、地域の値（日本、西洋）が縦に折り返していた。\nこの2列だけ折り返さないようにした。\n確認はエミュレーションで行い、終わったらウィンドウ幅が元に戻ったことも確かめさせた。",[21,249,250],{"id":250},"パンくずが左上に貼りつく",[14,252,253],{},"見た目の確認を続けると、パンくずが画面の左上端に貼りついていた。\n同じ作りの既存ページ（才能の母集団の記事）でパンくずの位置を測ってもらい、それに合わせて本文の列へ移した。\nPC幅では、見出しと同じ左端（x=134px）、上端から32pxの位置に収まった。",[21,255,256],{"id":256},"横の並びに規則はあるか",[14,258,259],{},"ここで最初の引っかかりに戻る。\n元図と同じ12列の配置で描き直しはできたものの、横の並びをどう扱うかは決まっていなかった。",[14,261,262],{},"前回の分析で、元図は作者が1人ずつ手で置いたもので、機械的な規則では再現できないと分かっている。\nそこで横軸を分野別にする案を出し、美術、能・茶・俳諧・演劇、音楽、政治・実業の4分野で組み直すことにした。",[14,264,265],{},"分野ごとに何列あれば重ならずに収まるかを、ロジックで計算させた。\nテストは30件すべて通り、日本8列、西洋11列の計19列に収まった。\n無駄な列はない。\n中央の出来事欄から外側へ、美術、能・茶・俳諧・演劇、音楽、政治・実業の順に列を置き、図の上に分野の見出しを付けた。",[14,267,268],{},"分野の見出し行は、縦書きの細い見出しにつられて背が伸びていた。\nPC幅では横書きで折り返し、スマホ幅でだけ縦書きにしたところ、見出し行は57pxから40pxまで縮んだ。\nスマホ幅（390px）で19列が見切れずに収まることも確かめた。\n見出しの折り返し位置は、スクリーンショットを見て「・」の後ろへ動かした。",[21,270,271],{"id":271},"分析を別記事に切り出す",[14,273,274],{},"続いて、ページを2つに分けることにした。\n年表ページは冒頭と年表だけにして、「元図の並び方を分析する」から下の章（分析、60人の一覧、データの注記）を独立した公開記事に移す。",[14,276,277],{},"移し替えは、次の順で進めてもらった。",[279,280,281,284,287],"ol",{},[239,282,283],{},"分析、一覧、注記の章を新しい記事ページへ移す",[239,285,286],{},"年表ページからその章を外し、年表の下に分析記事へのリンクカードを置く",[239,288,289],{},"移した章でしか使わない計算とスタイルを年表ページから取り除く",[14,291,292,293,296],{},"3で、スタイルを消した範囲の境目を確認させたら、",[39,294,295],{},".lt-wide"," のコメント行だけが一緒に消えていた。\nその行を戻し、ページ下端の余白と相互リンクカードのスタイルを足した。",[14,298,299,300,303],{},"最後に、年表ページの冒頭の見出しと説明文も外した。\nパンくずのすぐ下から年表が始まる形にして、h1 は画面外に置いた。\n測定スクリプトも同じコミットに入れ、",[39,301,302],{},"ee6d9f2c"," としてコミットした。\nプッシュとデプロイはしていない。",[236,305,306,313],{},[239,307,308],{},[309,310,312],"a",{"href":311},"/blog/artists-lifespan-timeline","年表ページ",[239,314,315],{},[309,316,318],{"href":317},"/blog/artists-timeline-layout-analysis","元図の並び方の分析記事",[21,320,321],{"id":321},"振り返り",[236,323,324,327],{},[239,325,326],{},"元図の並びに規則がないと先に分かっていたので、再現にこだわらず分野別へ組み替えた。並べ方をロジックに持たせたから、列数をテストで確かめられた",[239,328,329],{},"作ったものを後から2ページに分けると、スタイル削除の境目で関係ない行を巻き込みやすい。削除範囲の前後を確認させるところまでを1手に数えておく",[14,331,332],{},"年表ページは、まだ手元の dev 環境でしか見られない。",[334,335,336],"style",{},"html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":37,"searchDepth":97,"depth":97,"links":338},[339,340,341,342,343,344],{"id":23,"depth":97,"text":24},{"id":217,"depth":97,"text":217},{"id":250,"depth":97,"text":250},{"id":256,"depth":97,"text":256},{"id":271,"depth":97,"text":271},{"id":321,"depth":97,"text":321},"dev",null,"日本と西洋の60人の生涯を並べた年表画像から生没年を裏取りし、Vue ページとして作り直した。データと純関数を分け、横の並びを分野別の19列に組み替え、最後に分析部分を独立した記事へ切り出して相互リンクした。","md",{},true,"/artists-lifespan-timeline-build-log","mdx-playground",false,"2026-09-22T00:00:00.000Z",{"title":5,"description":347},"make-diary","2026-09/2026-09-22/artists-lifespan-timeline-build-log",[359,360,361,362,363,364],"Vue","Nuxt","年表","データ可視化","Claude Code","CSS","wCxdkl1QM3hF5MLh4z2uR00PpIH6JfcZ40H8lmMWAZw",[],[368,372,376,380,384],{"title":369,"path":370,"publishedAt":371},"財務省貿易統計で日本のNAND輸出単価を再現し、統計ページにする","/japan-memory-export-price-page","2026-08-31T00:00:00.000Z",{"title":373,"path":374,"publishedAt":375},"月次統計カードにNEWバッジを実装 - データ鮮度で自動点灯・自動消灯させる","/memory-makers-new-badge","2026-07-13T00:00:00.000Z",{"title":377,"path":378,"publishedAt":379},"メモリーメーカー動向ハブを新設し、DRAM市場シェアの推移を可視化した一日","/memory-makers-hub-dram-share","2026-06-02T00:00:00.000Z",{"title":381,"path":382,"publishedAt":383},"月の満ち欠けシミュレーター機能強化 - Tailwind CSS変換からSEO対応まで","/moon-simulator-enhancement","2026-01-26T00:00:00.000Z",{"title":385,"path":386,"publishedAt":387},"2026年1月17日の開発日記 - 人生計画シミュレーターUI実装","/2026-01-17-diary","2026-01-17T00:00:00.000Z","https://log.eurekapu.com/og/blog/artists-lifespan-timeline-build-log.png?v=2026-09-22T00%3A00%3A00.000Z&title=60%E4%BA%BA%E3%81%AE%E7%94%9F%E6%B6%AF%E5%B9%B4%E8%A1%A8%E3%82%92%20Vue%20%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%80%81%E5%88%86%E6%9E%90%E3%82%92%E5%88%A5%E8%A8%98%E4%BA%8B%E3%81%AB%E5%88%87%E3%82%8A%E5%87%BA%E3%81%97%E3%81%9F%E4%BD%9C%E6%A5%AD%E3%83%AD%E3%82%B0&author=Kei%20Komatsu&sig=dab19235c437383e",1790132222549]