From d60e0e92a62767f030f49c219efa7a7d559d0c83 Mon Sep 17 00:00:00 2001 From: msmsrep <113223770+msmsrep@users.noreply.github.com> Date: Tue, 3 Nov 2026 13:10:23 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=E5=B7=A5=E5=A0=B4=E6=A8=A1=E5=9E=8B?= =?UTF-8?q?=E3=81=A7=E8=A6=8B=E3=82=8B=E3=82=AC=E3=82=A4=E3=83=89=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E4=BB=95=E6=A7=98=E6=9B=B8=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 動く工場模型と MES の記録の変化を連動させる新ページの仕様を docs-dev/FactoryTour.md にまとめた。 先に5場面で見た目と操作を確かめ、確認後に15場面へ広げる(TOUR-01〜03)。 Co-Authored-By: Claude Opus 5.5 --- docs-dev/FactoryTour.md | 262 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 docs-dev/FactoryTour.md diff --git a/docs-dev/FactoryTour.md b/docs-dev/FactoryTour.md new file mode 100644 index 0000000..8b6cd7f --- /dev/null +++ b/docs-dev/FactoryTour.md @@ -0,0 +1,262 @@ +# 工場模型で見る 製造から出荷まで 仕様書 + +サンプルのギアポンプ製造を、**動く工場模型**と、それに連動する **MES の記録の変化**で見せるガイドの新ページを作る。 +1カード=1セッションで進める(`Orchestration.md` §4.1)。カードの間はセッションをクリアし、次へ進む前に前のカードをコミットする。 +新しいセッションでは「`docs-dev/FactoryTour.md` の TOUR-01 を実行して」とだけ頼めば着手できるように書いてある。 + +## 背景 + +`docs/walkthrough.md` は図と画面写真で流れを説明しているが、次の理由で分かりにくい。 + +- 図が箱と矢印の抽象図で、**工場のどこで起きているか**が見えない +- 物の動きと記録の変化が別々の章にあり、読者が頭の中でつなぐ必要がある + +このページで伝えることは1つ。**「現場で物が動くと、誰がどの画面に入力し、MES のどの記録が変わるか」**。 + +## 決定事項(2026-11-03) + +| 論点 | 決定 | 理由 | +|:--|:--|:--| +| 置き場所 | 新しい全幅ページ `docs/factory-tour.html`。`walkthrough.md` は画面写真つきの詳細編として残す | サイドバーがなく模型を大きく見せられる。操作の詳細は既存ページに任せられる | +| 進め方 | 先に5場面で見た目と操作を確かめ、利用者の確認後に15場面へ広げる | 演出を確かめる前に全場面のデータを作ると、手戻りが大きい | +| 描画 | 等角投影の SVG を素の JavaScript で生成する。外部ライブラリ・ビルド・外部通信なし | 説明に回転は不要。軽く、日本語ラベルが鮮明で、GitHub Pages にそのまま置ける | +| 場面の持ち方 | 描画処理と場面データを分ける | サンプルが変わってもデータの修正で済む | +| 動きの進行 | 既定は「次へ」で1場面ずつ。「再生」を押すと自動で進む | 読む速さは人によって違う | +| 反映の見せ方 | 信号は**人の端末から** MES へ飛ばす。設備から直接は飛ばさない | 設備からの自動収集は将来拡張(Spec.md 3章の製造実施・設備稼働報告)。実際にない連携に見せない | +| 数値の正 | `samples/actual-csv` の **01〜15 だけを取り込んだ時点**の値 | 16 以降の在庫操作(24 の払出戻し、30 の保管サンプルなど)まで含めると、物語の数字とずれる | +| 多言語 | 日本語のみ | ユーザーガイド全体が日本語のみで、`I18nCheck.ps1` の対象外 | + +`Spec.md` は変更しない(アプリの機能を変えない、説明用のページのため)。 + +## 対象外 + +- 本物の3D表示(カメラの回転・拡大)、動画の書き出し +- アプリ本体(`src/`)への組み込み、実データとの接続 +- 保全・治工具・棚卸・不適合処置・リワーク(物語の外。`walkthrough.md` 10章に任せる) +- `walkthrough.md` の図の削除や作り替え(導線の追加だけを行う) + +## 画面仕様 + +### レイアウト + +幅 1000px 以上: + +``` +┌ ガイドへ戻る ─────── ページ名 ──────────────┐ +│ ┌ 工場模型 ───────────┐ ┌ 場面 6/15 ────┐ │ +│ │ │ │ タイトル・日時 │ │ +│ │ 等角の工場 │ │ 現場で起きること│ │ +│ │ 物・人・信号が動く │ │ 誰がどの画面に │ │ +│ │ │ │ MESで変わること │ │ +│ └──────────────────────┘ │ 詳しく見る → │ │ +│ [◀ 前へ][▶ 再生][次へ ▶] └─────────────────┘ │ +│ ○─○─○─●─○─○ 場面の列(押すと移動) │ +│ ┌ MES の台帳 ─ 在庫 ──────── 作業指示の状態 ┐ │ +│ └───────────────────────────────────────────┘ │ +└───────────────────────────────────────────────┘ +``` + +幅 1000px 未満:模型 → 操作 → 説明 → 台帳の縦積み。横スクロールは出さない。 + +スマホ幅(375px)では全景だとラベルが読めないので、**カメラ(SVG の viewBox)を今の持ち場に寄せる**。ラベルは今の場面に関わるものだけ出す。 + +### 工場の配置 + +U字の流れとする。下の配置図は並びの正とし、座標は `TOUR-01` で見た目を見ながら決める。 + +``` + 事務所(pm001) + +受入ヤード → WH-M01/WH-M02 → WC-MC1 ─────────→ 搬出口 → 外注先(工場の外) + 部材倉庫 EQ-01・EQ-05 │ + │ WIP-01 │ + │ 部材 │ + └──────────────────────┐ ▼ +出荷ヤード ← WH-P01 ← WC-PK1 ← WC-QC1 ← WC-AS1 ←──────── WIP-02 +(SHIP-01) 製品倉庫 EQ-04 EQ-03 EQ-02 +``` + +| 模型の要素 | 表し方 | +|:--|:--| +| 作業区・倉庫 | 床に区画を引き、コードと名前のラベルを付ける(`WC-MC1 機械加工`) | +| 設備 | 箱を組み合わせた簡単な形。実績のあった設備だけ使う(加工は EQ-01。EQ-05 は置くだけ) | +| 物 | 色分けした小さな立方体。部材・半製品・製品で形か色を変え、数量ラベルを付ける | +| 人 | ロール色の簡単な人形と、ユーザーID。持ち場に立つ | +| 端末 | 人の横に小さなタブレット。入力するときに光る | +| トラック | 受入ヤード、搬出口、出荷ヤード | + +対象外の置場(WH-S01 保全部品棚)は模型に置かない。 + +### 1場面の演出(4拍) + +1. **現場が動く**:物が持ち場へ移動し、設備が動く +2. **人が入力する**:端末が光り、右の「誰がどの画面に」が強調される +3. **信号が飛ぶ**:端末から MES へ点線が流れる +4. **記録が変わる**:台帳の数字が変わり、変わった行を約1秒強調する + +異常のある場面では、持ち場を赤く光らせ、説明に赤の項目を足す。 + +### MES の台帳 + +| 欄 | 内容 | +|:--|:--| +| 在庫 | 下の9ロットの置場と数量。まだ無いロットは薄く表示する | +| 作業指示の状態 | `SMP-SF-001-10` など5件の状態 | +| 説明 | 「部材は作業指示への投入で減る」「在庫に入るのは最終工程の良品だけ」など、数字の見方を場面に応じて短く添える | + +スマホ幅では変わった行だけを出し、「すべて表示」で開く。 + +場面を飛ばしても台帳が合うように、各場面は**差分**を持ち、1場面目から足し直して表示する。 + +### 操作 + +| 操作 | 動き | +|:--|:--| +| 次へ | 次の場面の4拍を再生する。再生中に押すと今の場面を最終状態にしてから進む | +| 前へ・場面の列 | 移動先の最終状態をアニメーションなしで表示する | +| 再生/一時停止 | 4拍の後、説明を読む時間(約5秒)を置いて次へ進む。最後の場面で止まる | +| キーボード | ← → で前後、Space で再生・一時停止 | +| URL | `#scene-6` で該当場面を開く。場面を移ると URL も変わる | + +### 見た目とアクセシビリティ + +- ロール色は `docs/assets/style.css` の `--r-pm` `--r-op` `--r-lg` `--r-qc` `--r-ng` をそのまま使う(ガイドの図と色を合わせる)。模型の本体は無彩色 +- ダークモードは `prefers-color-scheme` で追従する(ガイドと同じ。切替ボタンは置かない) +- `prefers-reduced-motion: reduce` では動かさず、各場面の最終状態だけを表示する。自動再生の間隔はそのまま使える +- 説明と台帳は SVG の外の HTML に置く。場面が変わったら `aria-live="polite"` で要約を読み上げる。SVG には場面ごとの説明を `aria-label` で付ける +- 色だけで伝えない(異常には「逸脱」などの語を添える) +- JavaScript が無いときは `