障害対応訓練

New: 継続開発

マルチプレイ

マルチ部屋

ソロ専用だった訓練をチームで遊べるようにした。ホストがセッションを作って招待リンクを共有するだけで参加可能。セッション状態は Durable Objects で管理

役割

実際の障害対応訓練を想定し、役割を分担できるようにしている。 例) オペレーター役はターミナルを操作できるが、Scribeは出力だけがミラー配信される。

通話

Cloudflare TURN を使った WebRTCで、通話しながら遊ぶことができる。通話の内容はリプレイに残るため、後から聞き直すこともできる

https://developers.cloudflare.com/realtime/turn/

Gemini Nano

Gemini Nanoは、ユーザーの端末上で動くLLMモデル。事前のダウンロードが必要だが、ダウンロードしてしまえばオフラインでも使えたり、他のLLMを呼び出すためのAPIキーを準備する必要がない。 今回は、Chrome内蔵のPrompt API(Gemini Nano)で、AI Assistant機能を作成。 https://developer.chrome.com/docs/ai/prompt-api?hl=ja

スクショで質問

Gemini Nanoは、マルチモーダルに対応しているモデルのため画像を見ることができる。なので、ゲーム画面のスクショと現在の状態テキストを添えて「どんな状況?」などと質問できるようにした。質問するとその場で助言が。推論はもちろんすべてブラウザ内で完結。

スクショには全画面と、範囲指定の2つがある。 全画面は文字通り、ゲームの画面全部がスクショとして添付される 範囲指定は、Macのcommand + control + 4のような操作感で範囲を選択できるようにしている

細かいこだわりとして、推論速度を早くするために .append()を使って事前に画像を処理させたり、画像サイズをGemini Nanoが文字が読める限界まで下げている。

ポストモーテム

訓練終了後にSummarizer APIを使ってポストモーテム(振り返りレポート)を生成したりしている

Web Push

Web PushとService Workerを使って、ゲーム内のイベントをブラウザの通知として飛ばすように

https://developer.mozilla.org/ja/docs/Web/API/Push_API https://developer.mozilla.org/ja/docs/Web/API/Notifications_API

リプレイ強化

録画+イベントログでタイムラインを作るところから、重要イベントを選びその前後を切り出してハイライトリールを自動生成するようにした

PiP

Document Picture-in-Picture APIを使用して、プレイ画面の監視モニターを取り外し、独立したウィンドウとして取り外せるようにした

Document Picture-in-Picture https://developer.mozilla.org/ja/docs/Web/API/Document_Picture-in-Picture_API

UIの刷新

実装したけど、没になったやつ

WebMCP

ゲーム内操作をブラウザAIエージェントにツールとして公開する実験的対応。MCPツールとして使わせる手段が限られすぎてたので没

https://developer.chrome.com/docs/ai/webmcp?hl=ja

実装自体はされているので、 chrome://flags/#enable-webmcp-testing でflagを有効にした上で、WebMCPの拡張機能を入れると上記のスクショのように見える https://chromewebstore.google.com/detail/webmcp-model-context-tool/gbpdfapgefenggkahomfgkhfehlcenpd

テーマ

「うん」から運用

障害対応訓練とは？

実際のシステム障害発生時に備えて、意図的に障害をシミュレーションし、チームの対応力や連携を確認・向上させる活動

今回のプロジェクトでは、壊れても問題ない Sandbox 環境上に疑似サービス「うん用API」を構築し、プレイヤーが監視画面、ログ、ターミナル、Runbook(手順書) などを使って障害対応を体験するものになっています。

想定使用ユーザー

• 障害対応訓練をしたことがない人
• 障害対応訓練を気軽にやってみたい人
• 理不尽な障害に立ち向いたい人

難易度として、初級、中級、上級と用意している。 初級は、Runbook通りに対応していけるが、中級、上級と上がっていくにつれて理不尽になっていく

画面説明

難易度を選ぶ

シナリオを選ぶ

詳細を読んで開始おす

runbookなどをみながら障害対応を進める

技術スタック

フロントエンド

• Preact (TypeScript) • Vite • xterm.js（ターミナル） • Canvas API + MediaRecorder（ユーザー操作録画） • WebSocket / SSE（ターミナル、イベント配信）

バックエンド

• Hono (TypeScript) • Cloudflare Sandbox SDK（実行環境） • Durable Objects（セッション管理）

DB

• Cloudflare D1（セッション、リプレイ metadata保存） • Cloudflare R2（リプレイ動画、イベントログ保存） • Cloudflare KV

Infra

• Cloudflare Workers

アーキテクチャ

技術こだわりポイント

Cloudflare Sandbox SDK を使ったサンドボックス環境提供

プレイヤーのターミナル操作が、Sandbox環境の実プロセスに届き、プロセス停止、ディスク枯渇、バッチ失敗などを「本当に壊す」体験を実現

canvas を使った録画

ブラウザ全体ではなくゲーム画面(Canvas)だけを captureStream + MediaRecorderで録画で録画

Screen Capture APIを使えば、画面キャプチャできるが、自分でキャプチャする画面を選んだりする手間が発生してしまう。 できる限りユーザーがスムーズにゲームを始められるようにcaptureStreamで自然の流れで録画が開始されるようにした

captureStream https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/captureStream MediaRecorder https://developer.mozilla.org/ja/docs/Web/API/MediaRecorder

録画と共にイベントログを残した

ただユーザーが操作した録画を撮るだけでなく、どんなコマンドをいつ実行したかのイベントを保存することで、動画のタイムラインを作成できるようにした。 タイムライン上のイベントをクリックすることで、録画の該当シーンに移動できるため、自分の行動を振り返りしやすいように工夫している。

うん言語

小ネタで用意した自作言語

大変だったこと

Cloudflare Sandbox 上の Bun.terminal で Ctrl + C が機能せず、SIGINTシグナルが子プロセスに伝播しない

今回のプロダクトでは、Cloudflare Sandbox の PTY(Bun.terminal) を xterm.js + SandboxAddonでWebSocket接続している。 ただ、Bun.terminal側がCtrl+Cを処理してくれないので、正規の方法でプロセスを中断したりできない。 修正用のPRが上がってたりするが、Bun本体にマージされていないためCtrl + Cが使えない https://github.com/oven-sh/bun/pull/25834 https://github.com/oven-sh/bun/issues/25779

なので、Sandboxの外からbashのプロセスグループに kill -INTを送って、擬似的にCtrl + Cでの中断を再現している。

録画したい要素をCanvasに全て入れる必要がある

今回、録画で使っているのがCanvasをキャプチャするものなので、Canvasの中に全て収めないといけない。 Canvasの要素調整大変