概要
- sandbox: ユーザーがデバイスを配置・接続し、必要に応じて IP 等を設定する。接続（と full-config 時は設定）が正しければクリア。
- packet-sim: 定義済みトポロジーとシナリオに沿い、パケットの流れをステップ実行で可視化する。クイズ要素（チャレンジ）を挟める。
サンドボックス（sandbox）
ページデータ: SandboxData
| プロパティ | 型 | 説明 |
|---|---|---|
| instruction | string | 説明・手順（改行可） |
| availableDevices | SandboxDevice[] | パレットに並べるデバイス（ドラッグ/タップで追加） |
| preplacedDevices | SandboxDevice[]? | 最初からキャンバスに置くデバイス |
| requiredConnections | SandboxConnection[] | 必須の接続（from/to が満たされていれば接続OK） |
| validationMode | ’topology-only’ | ‘full-config’ | 接続のみ見るか、設定も見るか |
| defaultView | ’physical’ | ‘logical’? | 初期ビュー |
| hints | string[]? | ヒント文（未使用でも可） |
SandboxDevice
| プロパティ | 型 | 説明 |
|---|---|---|
| id | string | 一意な ID（接続の from/to で参照） |
| type | DeviceType | デバイス種別 |
| label | string | 表示名 |
| x, y | number? | 初期位置（preplaced 時） |
| locked | boolean? | 移動・削除不可 |
| ports | number | ポート数 |
| physical | object? | 物理形状など（将来用） |
| expectedConfig | DeviceConfig? | full-config 時の期待値（ip, gateway, subnet 等） |
SandboxConnection
| プロパティ | 型 | 説明 |
|---|---|---|
| from, to | string | デバイス ID |
| fromPort, toPort | number | ポート番号（検証では未使用でも指定） |
| cableType | ’utp’ | ‘stp’ | ‘fiber’ | ‘wireless’? | 物理ビューでのケーブル表示 |
検証
- topology-only:
requiredConnectionsの各 from–to に対応するエッジが 1 本以上あれば OK。 - full-config: 上に加え、
expectedConfigを持つデバイスについて、ユーザーが ConfigPanel で入力した値が一致しているかチェック。不一致なら「〇〇の設定が正しくありません」。
UI・操作
- デバイス追加
- PC: パレットのデバイスをドラッグしてキャンバスにドロップ。
- スマホ: パレットでデバイスをタップ → 「〇〇を配置する場所をタップ」と出たらキャンバスをタップ。キャンセルは同バーの「キャンセル」または同じデバイスを再タップ。
- 接続: デバイス**下の●（出口）から、つなぎたい上の●（入口）**へドラッグ。
- 設定: デバイスをクリック/タップで ConfigPanel を開き、IP・ゲートウェイ・サブネット等を入力。full-config 時は正しく入力しないとノードの「設定済み」チェックが付かず、クリアにならない。
- 物理/論理: 右上の LayerToggle で切替。論理ビューでは接続線が緑、物理では
cableTypeに応じた色・線種（fiber=青、wireless=破線など）。
パケットシミュレーター（packet-sim）
ページデータ: PacketSimData
| プロパティ | 型 | 説明 |
|---|---|---|
| instruction | string | 説明文 |
| topology | { devices, connections } | 表示するデバイスと接続（SandboxDevice[], SandboxConnection[]） |
| scenarios | PacketSimScenario[] | シナリオの配列（先頭を表示） |
| mode | ’auto’ | ‘step’ | ‘challenge’ | 動作モード（現状は step を想定） |
| defaultView | ’physical’ | ‘logical’? | 初期ビュー |
PacketSimScenario
| プロパティ | 型 | 説明 |
|---|---|---|
| id | string | シナリオ ID |
| label | string | 表示名 |
| sourceDeviceId, destinationDeviceId | string | 送信元・宛先デバイス ID |
| protocol | string | プロトコル名（http, tcp 等） |
| steps | PacketStep[] | ステップの配列 |
PacketStep
| プロパティ | 型 | 説明 |
|---|---|---|
| currentDeviceId, nextDeviceId | string | このステップでパケットが通る区間 |
| description | string | 説明文 |
| packetBefore, packetAfter | PacketState | 通過前後のパケット状態（L2/L3/L4/L7 等） |
| action | PacketAction | 行った処理（forward, mac-rewrite, nat-rewrite 等） |
| challenge | { question, choices, correctIndex }? | オプションのチャレンジ問題 |
PacketState / PacketAction
- PacketState: L2（MAC）、L3（IP, TTL）、L4（ポート、フラグ）、L7（HTTP 等）、outerL3/outerL4（トンネル）、encapsulation を任意で保持。
- PacketAction:
forward/mac-rewrite/nat-rewrite/ttl-decrement/encapsulate/decapsulate/firewall-check/ids-alert/waf-inspect/dns-resolveなど。表示は ActionBadge で統一。
UI・操作
- 送信: シナリオを開始し、先頭ステップを表示。
- 次へ: 次のステップへ。最後のステップで「次へ」を押すと「完了」扱いでページクリア。
- リセット: ステップを先頭前に戻す。
- 現在ステップの区間（currentDeviceId → nextDeviceId）のエッジをハイライトし、パケットアニメーション（AnimatedPacketEdge）を表示。
- 右パネル: StepController、ステップ説明、ActionBadge、EncapsulationVisualizer（encapsulate/decapsulate 時）、PacketInspector（ヘッダー差分）、ChallengeOverlay（challenge あり時）。
- 物理/論理ビュー、ケーブル種別（connections の cableType）に対応。
デバイスタイプ（DeviceType）
サンドボックス・パケットシミュレーター共通で利用するデバイス種別。pc | server | router | switch | firewall | ids-ips | waf | vpn-gateway | proxy | reverse-proxy | iot-gateway | load-balancer | dns-server | wireless-ap | cloud | internet
各タイプのアイコン・カテゴリ・設定可能項目（ConfigurableField）は src/data/course-data/device-catalog.ts で定義。
ConfigPanel（設定パネル）
デバイスをクリック/タップすると表示。デバイス種別に応じて次のような項目を編集可能（device-catalog の configurableFields に依存）。- 共通的な項目: IPアドレス、サブネットマスク、デフォルトゲートウェイ
- ルーター等: ルーティング、NAT ルール
- 無線AP: SSID、チャンネル、暗号化
- ロードバランサー: lb-algorithm（round-robin / least-connections / ip-hash）
- IoTゲートウェイ: iot-protocol（mqtt / coap / http）
expectedConfig と一致しているかでクリア判定に影響する。
XP・レッスン分岐
- sandbox / packet-sim ページのクリア時、それぞれ 20 XP を付与（useLessonXp の getPageXp）。
- レッスンルート（
courses/:courseId/lessons/:lessonId）でpage.type === 'sandbox'のとき SandboxComponent、page.type === 'packet-sim'のとき PacketSimComponent を表示。
実装参照
サンドボックス・パケットシミュレーターに関連するソースのファイル構成です。src
data/course-data
types.ts
device-catalog.ts
chapter1-sandbox.ts
components
sandbox
SandboxComponent.tsx
ConfigPanel.tsx
DevicePalette.tsx
topology-validator.ts
packet-sim
PacketSimComponent.tsx
sim-engine.ts
StepController.tsx
PacketInspector.tsx
AnimatedPacketEdge.tsx
EncapsulationVisualizer.tsx
ChallengeOverlay.tsx
ActionBadge.tsx
header-diff.ts
network-shared
NetworkDeviceNode.tsx
LayerToggle.tsx
NetworkConnectionEdge.tsx
device-icons.tsx