AI Dev Lab
Web本番障害シミュレーター

Web本番障害シミュレーター ができるまで — 壊れた疑似本番環境で障害対応を訓練するサービスの設計

環境変数ミス、ポート競合、CORS、キャッシュ不整合、ロールバック副作用をブラウザで復旧する『Web本番障害シミュレーター』の設計記事。状態機械、疑似FS、学習体験の作り方まで解説します。

·decision主力·stage公開中

incident-sim を主力として伸ばす理由

incident-sim は、Web 障害対応をブラウザだけで訓練できるサービスです。
このラボの中でも、今いちばん「役に立つ」「相談につながる」「検索意図に合う」の三つがそろっているため、主力として集中投資しています。

何を解決したいのか

障害対応の学習は、読むだけでは身につきにくいです。

  • 何から見ればいいか分からない
  • ログを見る順番が定まらない
  • 面接やオンボーディングで説明できるほど整理されていない

この状態を、短いシナリオで反復しながら変えるのが incident-sim の狙いです。

いまの価値

現時点での価値は次の三つです。

  1. ブラウザだけで始められる
  2. 初動の順番を練習できる
  3. 復習と振り返りに使える

実際の本番環境を用意しなくても、lscatgrepcurl などを使って切り分けの入口を体験できます。

なぜ主力にするのか

このサービスは、ただの学習ネタでは終わりません。

  • 検索流入を取りやすい
  • オンボーディングや研修相談につながりやすい
  • シナリオ追加や難易度展開の余地がある

特に、障害対応 練習インシデント対応 学習オンボーディング 障害対応 のような意図にかなり近い受け皿になります。

どこを改善しているか

今回の改善で強くしたのは次のポイントです。

1. 入口の分かりやすさ

初学者、オンボーディング、面接前復習の三つに分けて、どこから入るべきかを明確にしました。

2. シナリオの選びやすさ

初級、中級、上級で最初の 1 本をすぐ選べるようにしています。

3. 研修導線

無料体験で終わらず、チーム導入や追加シナリオ相談に進める導線をページ内に置きました。

まだ足りないところ

正直に言うと、まだ次の課題があります。

  • シナリオごとの検索流入ページをもっと強くしたい
  • 結果画面の復習価値をさらに上げたい
  • チーム導入時の活用イメージをもっと具体化したい

ここが伸びると、PV だけでなく相談率も上げやすくなります。

次にやること

次の改善候補はこの三つです。

  1. シナリオ比較をもっと強くする
  2. 結果画面の復習導線を厚くする
  3. 研修導入パックの見せ方を具体化する

incident-sim は、このラボの中で「役立つもの」と「PV を取れるもの」の両方に一番近いサービスです。
だからこそ、主力として先に仕上げます。

[ ./next_action ]

読んだら、 Web本番障害シミュレーター を実際に動かす。

この開発ログは Web本番障害シミュレーター をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。

[ ./related_logs ]

関連する開発ログ

all logs →
ToonCast

ToonCast ができるまで — AnimeGANv2 をブラウザで動かす

AnimeGANv2 の小さな ONNX (約9MB) を onnxruntime-web (単一スレッド WASM=COOP/COEP不要、 color-revive で承認済みライブラリの再利用) で実行。 512x512・[-1,1] 正規化で推論し、 結果を元解像度に戻して表示する設計記録。 写真は端末内処理。

read log →
ColorRevive

ColorRevive ができるまで — onnxruntime-web で白黒写真をカラー化

DeOldify の量子化 ONNX を onnxruntime-web (CDN side-load・単一スレッド WASM=COOP/COEP不要) で実行。 256x256 でモデル推論し、 輝度は元写真・色だけ AI を YCbCr で再合成して輪郭を保つ設計記録。 写真は端末内処理。

read log →
PhotoTwin

PhotoTwin ができるまで — CLIP画像埋め込みで似た写真を見つける

CLIP (Xenova/clip-vit-base-patch32) の image-feature-extraction を transformers.js の CDN ESM で side-load し、 各写真を正規化ベクトル化。 cosine 類似度で重複・似た写真をブラウザ内で検出する設計記録 (新ライブラリ追加なし=what-cam と同じ CLIP の再利用)。

read log →
AkinFind

AkinFind ができるまで — 文章embeddingsで意味検索をブラウザ内に

多言語の文章埋め込みモデル (Xenova/multilingual-e5-small) を transformers.js の CDN ESM で side-load し、 各文を正規化ベクトル化。 cosine 類似度で意味検索と似ている文ペア検出を全て端末内で行う設計記録。

read log →
WhatCam

WhatCam ができるまで — CLIP のゼロショット画像分類をブラウザで動かす

CLIP (Xenova/clip-vit-base-patch32) を transformers.js の CDN ESM で side-load し、 写真と候補ラベルの近さをブラウザ内で計算。 日本語ラベルを英語プロンプトに変換し、 図鑑と自由入力の両モードで「これ何?」を判定する設計記録。

read log →
DepthCast

DepthCast ができるまで — 1枚の写真をAIの深度推定で立体にする

Depth Anything (transformers.js) を CDN ESM で side-load し、 1枚の写真から深度マップを推定。 WebGL2 フラグメントシェーダで深度に比例した視差 (iterative backward parallax) を作り、 赤青アナグリフ / WebM 書き出しまで端末内で完結させた設計記録。

read log →