# SU LAB — シングルユース工場づくりラボ 初心者・新卒新人向けに、抗体医薬品の工程、シングルユース部材の選定・運用、作業可能な配置を学ぶ、全10ミッションの日本語パズルです。外部ライブラリー、通信、ログインは不要です。 ## 起動 このフォルダーの [index.html](index.html) をPCのブラウザーで開いてください。インストールやビルドは不要です。Chrome、Edgeなどの現行ブラウザーを想定しています。 ## GitHubでの配信 - ソースコード：[HinoKH/single-use-factory-game](https://github.com/HinoKH/single-use-factory-game) - GitHub Pagesの配信先：[ゲームを開く](https://hinokh.github.io/single-use-factory-game/)（Pagesの公開設定と配信完了が必要です） - 公開版の判定テスト：[tests.html](https://hinokh.github.io/single-use-factory-game/tests.html) GitHub Pagesは `main` ブランチのルートを配信します。変更したファイルを同じ位置へコミットすると、次の配信に反映されます。更新後は公開URLの表示とテストを確認してください。 利用者のGitHubアカウントは不要です。各ブラウザーで独立して動作し、進捗は共有・永続保存されません。一般公開のため部署外の人もアクセスできます。ゲームの合格は実設計・GMP適合性を保証しません。 ## 遊び方 1. 「今回の操作」を読みます。1〜5は設備の配置・接続、6〜8は部材選定・交換・確認、9は設備移動、10はそれらを組み合わせた工場修理です。 2. ボードの空き区画をクリックして配置します。1〜8は位置が自由で、9・10は作業区画と通路も判定します。 3. 「つなぐ」モードで接続元をクリックすると「ここから」、接続先候補には「ここへ」と表示します。候補にマウスを重ねる（またはTabでフォーカスする）と点線の予定矢印が出ます。接続先をクリックして確定します。候補の表示は工程の正解を示すものではありません。 4. 1〜3は「運転する」、4〜10は「レビューする」で判定します。失敗しても何度でも直せます。 5. クリアすると画面中央に大きな「MISSION COMPLETE！」と学習の振り返りが表示されます。「次のミッションへ」または「設計を見直す」を選べます。Escapeでも閉じられます。 ### 確定した接続を外す - ボードの「接続を外す」を選び、対象の線にマウスを重ねます。線の色とボード下の対象表示を確認し、クリックで解除します。線の周囲にもクリック判定を設けています。 - 線が交差・重なっている位置では、接続を即座に消さず、ボード下に候補を表示します。設備名・方向・供給口を確認して外す接続を選びます。「閉じる」またはEscapeで候補選択を取り消せます。 - 右側の「接続一覧」の「外す」からも解除できます。キーボードでは、このボタンを利用してください。 - いずれも設備は残ります。「接続を外す」モードで設備をクリックしても設備は削除されません。 - 解除直後はボード下に「元に戻す」が表示され、直前に外した1件を復元できます。接続の向き・供給口・一覧内の順序を復元します。連続して外した場合は最後の1件が対象です。 - 別の設計変更（配置・移動・設備削除・接続追加・仕様変更）、リセット、ミッション切替で解除履歴を破棄します。モード切替・選択キャンセルでは破棄しません。運転・レビュー中は解除・復元できません。 ### 途中の操作をキャンセルする 接続元を選んでいる間は「接続をキャンセル」、配置先を選んでいる間は「配置をキャンセル」、移動先の選択中は「移動をキャンセル」と表示します。ボタンまたはEscapeで選択・予定矢印だけを取り消し、既存の設備や接続は変更しません。 「設備を削除」で設備をクリックすると関連する接続も削除します。「設備を移動」で設備→空き区画の順にクリックすれば、接続を保持して移動します。 ### ミッション5・10：入口を直接選ぶ 接続口は、チューブを取り付ける設備の出入口です。5・10では接続元のバッグ・設備を選び、精製設備の下に表示された「抗体液入口」「緩衝液A入口」「緩衝液B入口」を直接クリックします。従来のボード上部の接続口選択欄は廃止しました。精製設備本体を押した場合は、入口を選ぶ案内が出ます。 入口にマウスを重ねるかフォーカスすると、その入口まで点線の予定矢印を表示します。確定した線も入口まで描画します。間違った入口も試せますが、レビューで未達条件になります。同じ設備間の入口を変える場合は、既存の接続を外してつなぎ直してください。 ミッション5には図解と二段階の案内があります。前半は緩衝液Aバッグを選ぶとA入口を強調。Aの接続が正しくできたら、後半はBの入口を仕様書から判断します。Aの接続を外すと前半の案内に戻ります。ミッション10には正解入口の強調はありません。 各入口は複数の精製操作をまとめた架空の設備仕様です。実際の精製設備に必ずA・B専用入口があるわけではありません。「緩衝液A・B」は液の種類で、ミッション7の「A型・B型」は接続規格です。抗体液入口は抗体を含む工程液の入口で、最終製品の充填口ではありません。 ### ミッション6〜10：部材を扱って工場を整える 容量・チューブの選択欄と使用前確認のチェックボックスは廃止しました。部材棚とボード上の対象を使います。6〜8は最初から「部材を扱う」、9は「設備を移動」で開始します。10は必要な操作を自分で切り替えます。 1. 左の「部材棚」で部材カードを押し、仕様ラベル・包装の状態を調べます。 2. 「この部材を持つ」を押します。取付先が強調されますが、正解の部材は強調しません。 3. ボード上の取付先をクリックします。容量バッグは原薬保管、接液バッグ一式は培養、チューブは経路上の「チューブ」ボタンです。部材は空き区画へ配置するものではありません。作業台の対象ボタンも使えます。 4. 「取付をキャンセル」またはEscapeで手持ち部材の選択だけを解除できます。間違った取付先では状態を変更せず説明を表示します。 - **6：容量バッグ交換** — 80 / 150 / 250 Lのバッグを調べて取り付けます。設備カードの容量が変わり、レビュー時に120 Lの受入と使用可能容量の関係を模式表示します。150 L・250 Lはどちらも正解。演出は実際の流入や液あふれの再現ではありません。 - **7：規格チューブ交換** — 接続元側・接続先側の形と記号を見て、チューブを経路へ取り付けます。経路を外してつなぎ直す必要はありません。図形とA・B記号は架空の接続規格の教材表現です。 - **8：交換と整備** — 対象を選ぶと、再使用機器と接液部材を分けた模式図と作業台が開きます。接液バッグ・チューブは先に外してから、包装を調べた新品を取り付けます。外した部材は図で空の取付位置になり、支持架台・駆動機器と設計上の経路は残ります。この経路は配管設計の概念線で、部材が外れた状態の実移送を示しません。 - **8・10：部位ごとの確認** — バッグとチューブのそれぞれで「仕様ラベル」「包装」「取付部」を確認します。再使用機器は架台・駆動機器の両方を選び、「残して清掃・確認する」を実行。これらは学習上の確認記録で、実設備の清掃・点検を実行したり保証したりしません。使用済みや包装損傷を確認済みにはできません。 - **9：配置改造** — 設備 → 空き区画の順に移動します。中央通路と培養の右隣の作業区画を確保し、レビューで中央通路の搬入・搬出を模式表示します。配管線は通路障害として評価しません。 - **10：総合修理** — 最初は不備5件という情報と操作方法だけを表示。レビュー後に各未達条件の修正ボタンを表示します。接続を外してつなぎ直す、容量・規格部材を交換する、接液部材を交換・確認する、設備を移す操作を組み合わせます。 部材の変更は仕様・包装・取付の確認を未確認に戻します。経路の追加・解除・設備削除も取付確認を取り消します。再使用機器の清掃・確認記録は部材交換では消えません。運転・レビュー中は部材操作も禁止し、リセット・ミッション変更で選択と作業状態を初期化します。 確定した接続は、白い縁取りのある緑色の線と矢印で表示します。設備の実際の外枠に合わせて端点を計算し、画面サイズが変わった場合も更新します。矢印は設備カードより前面に表示します。 運転中は編集できません。リセットや上部のミッションボタンで運転を中止できます。別ミッションへの切替とリセットは現在の設計を消去します。ミッションは自由に選べます。 クリア履歴はページを開いている間だけ表示します。リセット後もクリア済みの印は残りますが、次へ進むボタンは現在の設計を再度クリアするまで表示しません。ページを再読み込みすると設計と履歴は消えます。 ## 全10ミッション - **培養の準備**：培地調製 → 培養。 - **培養液から原薬へ**：培養 → 回収 → 精製 → 原薬保管。 - **工場全体**：培地調製 → 培養 → 回収 → 精製 → 原薬保管。 1〜3は従来のチュートリアルです。必要な設備を1台ずつ使い、一本の主流路を作ります。工程順序・方向・必要設備・接続を判定し、未接続、逆順、分岐、合流、循環、不要設備や不要接続をクリア扱いにしません。自己接続や重複接続は操作時に理由を示して拒否します。 | No. | ミッション | 条件 | |---|---|---| | 4 | 培養の準備が整わない！ | 設置済み設備に培地供給バッグ・培養液受入バッグを追加し、指定順に接続。 | | 5 | 精製に必要な液を届けよう | 製品主流路は完成済み。緩衝液A・Bを精製設備の各指定口へ供給。 | | 6 | このバッグで足りる？ | 部材棚から容量バッグを選び保管設備へ取り付ける。受入120 Lに対し150 L・250 Lはいずれも正解。 | | 7 | 合っているのは順番だけ？ | 両端の規格を見てチューブを経路へ取り付ける。精製出口A型→保管入口B型。 | | 8 | 次のバッチの準備をしよう | 使用済み接液バッグ・チューブを外して健全な新品へ交換。両部材の仕様・包装・取付を確認し、架台と駆動機器を残して清掃・確認。 | | 9 | つながるけれど、作業できない！ | 中央通路の区画7〜12を空け、培養設備の右隣を同一行の交換作業用に確保。通路との兼用不可。複数配置が正解。 | | 10 | 工場の設計レビューに挑戦！ | 接続・容量・規格・部材と確認・配置の5件の初期不備。レビューで残る未達条件をすべて理由付き表示。 | 4〜10のレビューは、接続仕様と課題ごとの条件をまとめて評価します。容量や配置の選択肢は複数正解を認めますが、供給先・液の種類などの指定条件は満たす必要があります。最後のミッションに「次へ」はありません。全10件をクリアした場合だけ全達成メッセージを表示します。 ## 学習範囲と簡略化 **学習用の概念モデルであり、実際の工場設計・GMP適合性・無菌性・接続の適格性を評価するツールではありません。** - 対象は工程順序、供給、容量・接続仕様、部材交換と使用前確認、交換作業領域と搬入・搬出通路です。部屋区分、清浄度、経営、流量、温度、実時間、実際の規格値は扱いません。 - 種培養、移送ポンプ、分析・品質検査などを省略しています。緩衝液の供給は架空のA・Bの2種類に簡略化しています。 - 回収は清澄化などを、精製はクロマトグラフィー、ウイルス安全性に関する処理、濃縮・液交換などの複数操作をまとめています。精製は一台の万能機器ではありません。 - アニメーションは工程のつながりを説明する表現です。実際の処理時間、液の性質変化や全工程の単純な連続運転を表しません。 - 4〜10の運転表示は「仕様の確認」です。供給・製造の実際の時間順序を表しません。8・9の図は部材交換・配置の練習用模式図であり、培養から原薬が直接できるという製造フローではありません。 - 受入120 L、バッグ80 / 150 / 250 L、接続A型・B型、中央通路6区画、右隣の作業区画は課題内の架空仕様です。実際には公称容量と使用可能容量、部材適格性などを承認された仕様で確認します。 - 通路は指定された横一列の区画が空いているかを評価します。詳細な人流・物流シミュレーションや配管干渉検査ではありません。概念上の接続線が通路を横切る場合は、通路障害として判定しません。 - 使用前確認は、部材の状態を調べて各部位を確認する教育用操作で表現しています。包装の健全性だけで無菌性や使用適格性を保証するものではありません。 - 原薬保管は製剤の最終充填とは異なります。 - シングルユースはバッグ・チューブ・フィルターなどの接液部材に使い捨てを採用する考え方です。架台・駆動機器・制御機器まで使い捨てにするわけではありません。 - カラム・樹脂なども含め、再使用可否や適した構成は部材の仕様・製品・工程に依存します。このゲームは特定製品の採用や設備全体の使い捨てを推奨しません。 - スマートフォン向けの操作最適化や永続的な進捗保存は初版の範囲外です。 ## 教材の参照資料 基本事項の確認に使用した公開資料です。本文や図を転載せず、ゲームの説明は初学者向けに要約しています。 - [Recovery and purification process development for monoclonal antibody production — PMC](https://pmc.ncbi.nlm.nih.gov/articles/PMC2958570/)：抗体の回収・精製、Protein Aによる捕捉や複数のクロマトグラフィー操作などの解説。ゲームの「回収」と「精製」を区別する根拠。 - [Sartorius: Single-Use Bioreactors](https://www.sartorius.com/en/products/fermentation-bioreactors/single-use-bioreactors)：シングルユースの柔軟性と適用上の制約。すべての工程で一律に優位ではないことを確認。 - [Sartorius: Biostat STR](https://www.sartorius.com/en/products/fermentation-bioreactors/single-use-bioreactors/biostat-str)：バイオリアクターシステム、培養バッグ、制御プラットフォームが別の構成要素であることを確認。 上記は規制適合性の判定基準ではありません。社内教材として正式に利用する場合は、工程・品質担当者のレビューで対象製品や教育目的との整合性を確認してください。 ## テスト [tests.html](tests.html) をブラウザーで開くと、外部依存なしで配置・接続・経路判定のテストが実行されます。画面上部に成功数・失敗数を表示し、失敗は詳細とコンソールにも出力します。 UIの確認は [index.html](index.html) で行います。全10ミッションのクリアに加えて、誤接続からの再挑戦、部材棚での調査・選定・取付、取り外しと交換、部位別確認、移動・削除、運転中のリセットとミッション切替、成功パネルの閉じ方と次への遷移を確認してください。 ### 工場改造・整備版の検証 - ロジックテスト87件すべて成功。従来の74件に、部材操作の13件を追加。容量の複数正解、規格の両端適合、誤取付先で状態が変わらないこと、先行取り外し、包装損傷・使用済みの拒否、部位別確認、確認取消し、再使用機器の保持、総合修理を検証。 - 全10ミッションを画面イベントでクリアし、最後の全達成表示を確認。6〜10は選択欄・チェックボックスを使わず、部材棚・取付先・作業台・移動操作を使用。 - 容量不足、逆向き規格、使用済み部材、包装損傷を試し、修正後のクリアを確認。レビューの受入量・容量超過、通路の搬送停止・通行成功の模式表示も確認。 - レビュー前はミッション10の不備の場所を表示せず、レビュー後の5件の修正操作への誘導、編集後の古い指摘の消去を確認。 - 手持ち部材の取消し、モード変更、Enterでの部材調査・取付、フォーカス維持、運転中の部材操作禁止、リセット・ミッション変更後に古い成功表示が出ないことを確認。 - 1024px・1440pxで計12ケースのボード幅・設備カード内の収まりを検査。ボードが親パネルから切れず、チューブ取付ボタンの中央が実際のヒット対象になることを確認。部材棚・交換模式図の横はみ出しもなく、スクリーンショットで表示を確認。 - ブラウザー実行エラー・ワークスペース診断エラーなし。共有タブが非表示のため、操作イベント発火とテスト用仮想時計を併用。仮想時計は検証終了後に通常実行へ戻します。実マウスによる一連の操作検証の代替ではありません。 ### 全10ミッション版の検証（選択欄方式の旧版） - ロジックテスト74件成功。チュートリアルの既存32件も含みます。 - 全10ミッションを画面イベント経由で操作し、成功パネル→次のミッション、最後の全達成表示まで確認。 - 間違った供給口、容量不足、逆向きチューブ、包装損傷、通路の閉塞を拒否し、修正後のクリアを確認。 - 部材変更後のチェック取消し、接続を保持した設備移動、使用中区画への移動拒否を確認。 - リセット・ミッション変更で古い成功パネルが出ないことを確認。成功表示は確認の完了後だけ出ます。 - 成功パネルへのフォーカス移動、Escapeで閉じる処理、接続元の再描画後のフォーカス維持を確認。 - 全10件版でも画面幅1024px・1440pxで横方向のページはみ出しなし。ブラウザーの実行エラーとワークスペース診断エラーなし。 - 非表示タブの制限を避けるため、画面操作イベントとブラウザーのテスト用仮想時計を併用。アプリ本体にはテスト用時計や外部依存を追加していません。 ### 初版の検証結果 - ブラウザーでロジックテスト32件すべて成功。 - 実際の配置・接続操作で3ミッションのクリアと次ミッションへの遷移を確認。 - 誤接続の停止箇所・理由、修正後の再挑戦、自己接続・重複接続の通知を確認。 - 接続削除、設備削除時の関連接続削除、Escapeによる選択解除、ヘルプ開閉を確認。 - 運転中の編集ロック、リセット・ミッション変更後に古い運転結果が出ないことを確認。 - 画面幅1024px・1440pxで横方向のページはみ出しがないことを確認。 - 操作検証でJavaScript実行エラーなし。ワークスペース診断でもエラーなし。 ### 入口の直接選択の回帰確認 - ロジックテスト74件すべて成功。ミッション5の誤入口への接続を拒否し、修正後の成功パネルまで確認。 - A入口の強調、A接続後の後半案内、Bには正解強調がないことを確認。接続解除・復元で案内と入口名が戻ることも確認。 - ミッション10には図解・正解強調を出さず、直接入口を選んで不備を修正し、クリアできることを確認。 - 接続元未選択時の説明、精製設備本体を押したときの入口案内、入口フォーカス時のプレビュー、解除モードでの入口無効化を確認。 - 画面幅1024px・1440pxで3入口への矢印端点を検査。精製設備を上・中・下段に移した計10ケースで入口が区画からはみ出さないことを確認。表示のスクリーンショットも確認。 - ミッション1の配置・接続キャンセル・クリアを再確認。操作は画面イベント発火とテスト用仮想時計を併用し、終了後は通常の時計に戻しています。ワークスペース診断エラーなし。 ### 接続表示・操作の回帰確認 - 接続一覧・線の操作イベントから接続だけを解除し、設備が残ることを確認。解除モードで線のヒット範囲が前面にあることを検査。 - 交差位置では2つの候補を表示し、選択前に消えないこと、指定した1件だけを解除すること、候補の取消しで接続が変わらないことを確認。 - 「元に戻す」の供給口復元、設計変更・リセット時の履歴破棄、運転中の解除・復元禁止を確認。 - 接続・配置のキャンセル表示と、キャンセルしても既存接続が残ることを確認。非表示ブラウザーでのイベント制限により操作イベント発火を併用。 - 1024px・1440pxの2画面幅で、左右・上下・斜め・離れた区画の計14配置を確認。矢印の端点が接続先カードの外にあり、線に白い縁取りがあること、線の表示レイヤーがカードより前にあることを検査。 - 設計を保持したまま画面幅を変更し、SVG座標が実際の表示サイズに追従することを確認。 - 接続元の「ここから」、候補の「ここへ」、マウスによる点線プレビュー、Escapeでの取消し、クリックでの確定を確認。 - フォーカス時のプレビュー処理とモード切替時のプレビュー消去を確認。非表示タブではブラウザーのフォーカスイベントやタイマーが制限されるため、この部分はイベント発火による確認も併用。 - 表示変更後も3ミッションの成功を確認。工程順序の判定ルールは変更していません。 ## ファイル構成 - [index.html](index.html)：ゲーム画面。 - [styles.css](styles.css)：見た目・レイアウト・流れの表示。OSの動きを減らす設定にも対応。 - [core.js](core.js)：教材とステージ定義、編集操作、画面に依存しない判定。 - [missions.js](missions.js)：追加設備・ミッション4〜10の初期状態、接続仕様、容量・部材・配置条件の判定、部材棚と交換・確認操作のロジック。 - [app.js](app.js)：配置・接続UI、部材棚と作業台、受入・作業性の模式表示、運転表示とキャンセル、ステージ遷移。 - [tests.html](tests.html) / [tests.js](tests.js)：ブラウザーで実行するロジックテスト。 [index.html]