diff --git a/README.md b/README.md index 5cc7e96..75be9e2 100644 --- a/README.md +++ b/README.md @@ -162,4 +162,5 @@ Astro は記事の中身が変わらないと、前の変換結果（`node_modul - /series1 のスプレッドシートと要件定義書は、iframe で埋め込まず、ページに直接載せている（`src/components/SeriesSheet.astro`・`SeriesDoc.astro`） - 中身は Google の「ウェブに公開」版の写し（`src/data/series_docs.json`）。Google 側を直したら `python3 tools/fetch_series_docs.py` を動かして push する。自動では追いかけない +- デザインノート（`key: site-design`）は Google から写さず、サイト側が正（`src/data/design_note.json`）。色と書体の行はビルドのときに `src/layouts/Base.astro` の `:root` から読む。それ以外の行は、コードを変えたら json も直す - 載せる場所は `src/data/static.json` の `{"type": "sheet" | "doc", "key": ...}`。`height` を付けると、その高さで枠の中をスクロールする diff --git a/src/components/SeriesSheet.astro b/src/components/SeriesSheet.astro index 0b77483..5fc884c 100644 --- a/src/components/SeriesSheet.astro +++ b/src/components/SeriesSheet.astro @@ -1,10 +1,12 @@ --- // シリーズのページに、Google スプレッドシートの中身を表として直接載せる（元は iframe の埋め込み）。 -// 中身は tools/fetch_series_docs.py が書き出した src/data/series_docs.json。タブが2つ以上あれば、表の上に切り替えを出す -import docs from '../data/series_docs.json'; +// 中身は src/lib/sheets.ts（Google の写し・サイトのデザインの値）。タブが2つ以上あれば、表の上に切り替えを出す +import { getSheet } from '../lib/sheets'; interface Props { id: string; height?: number } const { id, height } = Astro.props; -const sheet = (docs.sheets as Record)[id]; +const sheet = getSheet(id); +// 色の値（#d2d2d2 など）には、その色の小さな四角を添える +const swatch = (c: string) => /^#[0-9a-f]{3,8}$/i.test(c); // 中身が短い列（番号・状態など）は折り返さない const narrow = (rows: string[][], i: number) => rows.slice(1).every((r) => (r[i] || '').length <= 6); // 1つ目のセルにだけ文字がある行は、表の中の小見出しとして扱う @@ -29,7 +31,7 @@ const isSection = (r: string[]) => r.length > 1 && r[0] && r.slice(1).every((c) {body.map((r) => isSection(r) ? {r[0]} - : {r.map((c, k) => {c})})} + : {r.map((c, k) => {swatch(c) && }{c})})} @@ -59,6 +61,7 @@ const isSection = (r: string[]) => r.length > 1 && r[0] && r.slice(1).every((c) th { position: sticky; top: 0; z-index: 1; background: #e9e9e9; padding: 10px 12px; font: 600 14px/22px var(--sans); } td { background: #fff; padding: 10px 12px; font: 400 14px/22px var(--sans); color: var(--ink); } .nw { min-width: 0; white-space: nowrap; } + .sw { display: inline-block; width: 14px; height: 14px; margin: 0 8px -2px 0; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; } .sec-row td { max-width: none; background: #f7f7f7; font-weight: 600; } /* 外枠の線と、端のセルの線が重ならないように */ tr > :first-child { border-left: 0; } diff --git a/src/data/static.json b/src/data/static.json index 82854f4..39cffc2 100644 --- a/src/data/static.json +++ b/src/data/static.json @@ -8,67 +8,67 @@ }, { "type": "text", - "html": "Figma/UIデザイン・イメージボード", + "html": "要件定義書", "link": null }, { - "type": "iframe", - "html": "", + "type": "doc", + "key": "hakobu-requirements", + "height": 800 + }, + { + "type": "doc", + "key": "tsukamu-requirements", "height": 800 }, { "type": "text", - "html": "スプレッドシート/進捗管理", + "html": "UIデザイン・イメージボード（Figma）", "link": null }, { - "type": "sheet", - "key": "hakobu-progress", - "height": 640 + "type": "iframe", + "html": "", + "height": 800 }, { "type": "text", - "html": "スプレッドシート/デザインノート", + "html": "フロー図（FigJam）", "link": null }, { - "type": "sheet", - "key": "hakobu-design-note", - "height": 480 + "type": "iframe", + "html": "", + "height": 800 }, { "type": "text", - "html": "ドキュメント/要件定義書", + "html": "フロー図の部品", "link": null }, { - "type": "doc", - "key": "hakobu-requirements", - "height": 800 - }, - { - "type": "doc", - "key": "tsukamu-requirements", - "height": 800 + "type": "sheet", + "key": "flow-library" }, { "type": "text", - "html": "FigJam/フロー図", + "html": "デザインノート", "link": null }, { - "type": "iframe", - "html": "", - "height": 800 + "type": "sheet", + "key": "site-design", + "height": 560 }, { "type": "text", - "html": "スプレッドシート/ログ & リファレンス", + "html": "4コママンガの進行表", "link": null }, { "type": "sheet", - "key": "flow-library" + "key": "hakobu-progress", + "height": 640 } ] }, diff --git a/tools/fetch_series_docs.py b/tools/fetch_series_docs.py index cb3df22..a5904f2 100644 --- a/tools/fetch_series_docs.py +++ b/tools/fetch_series_docs.py @@ -6,6 +6,7 @@ python3 tools/fetch_series_docs.py - 取ってくるのは「ウェブに公開」した版（/pub・/pubhtml）。ログインはいらない - 表は CSV で取る。ドキュメントは公開版の HTML から、見出し・段落・箇条書き・表・太字・リンクだけを残す +- デザインノートは Google から写さない（サイトの値が正。src/data/design_note.json と src/lib/sheets.ts） - 載せる場所は src/data/static.json の {"type": "sheet" | "doc", "key": ...} のブロック """ import csv, io, json, re, sys, urllib.request @@ -19,7 +20,6 @@ DOC = 'https://docs.google.com/document/d/e/{id}/pub?embedded=true' SHEETS = { # key: 公開版の id（2PACX-...）。タブは公開版に出ている順にすべて取る 'hakobu-progress': '2PACX-1vQnqeo6YmdjAz9VQiH8-PYR4OzF9RdlgEOBe-SMtNjYcwdeHkkw2gNTOnLw9jSHBcWmIT3gaxnYnTH6', - 'hakobu-design-note': '2PACX-1vThIVjUIwNFufI1_XPHkqj5Elkz1SL6gx9Dig_UTk-On1SUYWMWu9Yra2gLgk8tMo_5kFByxoUfZ7wo', 'flow-library': '2PACX-1vRpLxXW9hSt-ediJC6AUIt8peUUbRATWB05SL7fdj14ygbsdQM1Hi9LEondS7phSu43Fv1A5MvGwDCT', } DOCS = {