Rosenzu

路線図の描き方

流れを路線、節目を駅として描く。 雛形はこの Skill のフォルダの template/ にある。 見た目の正本は雛形とする。見た目を直すときは雛形を先に直し、案件にある写しを置き換える。

• build_rosenzu.py: 入力の JSON から HTML を書き出す。検査に通らなければ書かずに止まる（Python 3.9 以上、標準ライブラリだけ）
• shot.mjs: 書き出した HTML を幅と明暗を変えて4枚撮り、数を数える（Node.js 18 以上、Chrome か Chromium 系のブラウザ。依存パッケージは無い）
• assign_colors.py: 下の「色の選び方」の条件を満たす色の当て方を出す
• sample.json: 入力の手本（架空の題材）

路線図が合う形

• 流れがおおむね一本道で、いくつかの節目を複数の流れが共有している。
• 分岐と合流が多く、どこからどこへでも辺がある網には合わない。その場合は表か、ノードと辺の図にする。
• 流れが1本だけなら、番号つきの一覧で足りる。

見た目の決まり

• 上から、数の札（路線、駅、乗換駅、新しい区間）、区分ごとの記号の一覧、凡例、路線ごとの図とメモ、乗換駅の表、作り方の順に並べる。
• 記号の一覧では、起点と終点を路線名の下の行に置く。横に並べると、折り返した行が次の路線のものに見える。
• 幅 720px 以下では線を縦に回す。明暗は prefers-color-scheme で切り替える。
• 名札には要点だけを書き、詳しい説明はポインタを置くと出る title へ入れる。スマートフォンでは title が出ないので、判断に要る事実は路線のメモに書く。

記号の決まり

• 路線の記号は一度振ったら変えない。消した路線の記号は retired へ移して欠番にする。雛形は欠番の使い回しを止める。
• 駅の番号は、元の台帳の番号をそのまま使う。路線図のために振り直さない。
• 身元は記号札の文字が示し、色はその補助にとどめる。一度見せた路線の色は、他の路線を足し引きしても塗り替えない。

手順

1. 辺の一覧を用意する。辺は「A の出力を B が実際に読む」のような、実在を確かめたつながりに限る。台帳から機械で作れるなら、変換の script を案件の tools/ に置き、手で辺を足さない。 完了: 路線に使う区間が、すべて一覧にある。
2. 雛形を案件の tools/ へ複製する。写しは手で直さない。
   • 入力を手で書く案件: build_rosenzu.py と shot.mjs をそのまま複製し、sample.json を手本に入力の JSON を書く。
   • 台帳から入力を組み立てる案件: build_rosenzu.py を rosenzu_core.py、shot.mjs を rosenzu_shot.mjs の名で複製する。台帳を読んで入力の dict を組み立てる script を別に書き、core の normalize()、selftest()、build() を呼ぶ。 完了: 各路線に記号、区分、色、名前、題、駅の並び、メモがある。
3. 書き出しの script を --selftest つきで回す（例: python build_rosenzu.py 入力.json --selftest）。 完了: 欠けた区間、名前の無い駅、記号の重複、欠番の使い回しの4つが「止まった」、元の入力が「通った」、色の式の対照が2つとも「合った」で exit 0。
4. --selftest を外して書き出す。検査に1つでも引っかかると、書かずに exit 1 で止まる。 完了: exit 0 で、色の警告（!! 色: の行）が0件。警告が出たら色を差し替えて書き直す。
5. node shot.mjs <出力.html の絶対パス> <撮影先> で、幅 1280 と 375、明と暗の4枚を全高で撮る。はみ出したときは、原因の要素を shot.mjs が5つまで名指しする。 完了: 4枚とも横はみ出しが 0px、路線数と駅の札の数が手順4の表示と一致、375 で線の向きが column。4枚を開いて見てから、ユーザーにも見せる。
6. HTML の置き場、入力の JSON か組み立ての script の置き場を、案件の README か作業記録に1行で残す。

色の選び方

下の16色は、1色ずつなら条件（記号札の文字 4.5 以上、明と暗の紙の両方に 3 以上、彩度 0.10 以上）をすべて満たす。 1〜5 はどの2色を組んでも、通常の見え方で差 17.9 以上、色覚の型（1型と2型）で 9.7 以上ある。 6 以降は組によって差が足りないので、当て方を下の条件で確かめる。

• 同じ駅を通る路線どうしは、通常の差 15 以上かつ色覚の型で 8 以上にする。記号の一覧で隣に並ぶ同じ区分の路線どうしも、通常の差 15 以上にする。それ以外の組は近い色でもよい。
• python assign_colors.py 入力.json が、この条件を満たし、今の色になるべく近い当て方の案を出す（入力は書き換えない）。
• 16色は、条件を満たす候補2,706色から、最悪の組の差が一番大きくなるよう1色ずつ足して選んだ。この選び方では、全部の組が差の条件を満たすのは5色までだった。
• 記号札の文字色（白か墨）は雛形が選ぶ。
• 差の計算は、WCAG のコントラスト比、OKLab の色差 ×100、Machado 2009 の色覚の型の変換を使う。既知の2組で値が合うことを --selftest が確かめる。

罠

• 乗換駅の輪を文字色（--ink）で塗ると、暗い画面では文字色が明るくなり、丸の中身と同じ色になって輪が消える。輪は専用の色トークン --xring にし、暗い画面でも暗い色にしている。
• ファイルの場所のように切れ目の無い長い文字列は、幅 375px で横にはみ出す。雛形は overflow-wrap:anywhere で折る。
• 1本の路線が同じ駅を2回通る並びは描けない。雛形が止める。流れが輪になっているなら路線図に向かない形か、路線を2本に割る。
• 雛形の検査は区間が edges にあるかを見るだけで、edges の中身が正しいかは見ない。edges を手で足すと、実在しない区間が線として描かれる。
• エディタやブラウザの組み込みの画面で HTML を開くと、書き出し直しても古い版が映ることがある。見た目は shot.mjs の撮影で確かめる。