故障予兆シミュレーターポートフォリオ

📄 【制作実績】クレーンゲーム故障予兆シミュレーター（配置管理・点検アラートアプリ）

クレーンゲーム（UFOキャッチャー）の店舗レイアウトや筐体配置をブラウザ上で直感的に管理し、各筐体の数値点検まで行える店舗運営支援Webアプリケーション(シミュレーター)

🛠️ 開発の背景と課題解決

• 課題：UFOキャッチャーの機会損失をなくしたい。UFOメカの下降時に起こりやすい通称「Zメカエラー」はモーター交換で直るが部品価格が5,000円。機械に疎い者だとアセンブリーで先出を行うため、30,000円～の修理費がかかる。部品の着荷を待つ間、そのブースは動かない。つまり売上が0円になる。これをなんとか防ぎたいと思った。
• 解決：直感的なドラッグ＆ドロップで誰でも簡単に配置図を作れるUIを構築。さらに「点検モード」を搭載し、基準値から外れた筐体を一目でアラート検知できる仕組みを開発。

⚙️ 主な機能

• 直感的なドラッグ＆ドロップ編集：マウス操作でオブジェクト（筐体）を自由な位置に配置可能。
• 初期位置の自動計算アルゴリズム：コード上に筐体要素（HTML）を増やすだけで、重複しないよう自動で横一列にずらして初期配置するロジックを実装。
• 位置データの永続化（LocalStorage）：ブラウザの記憶領域を活用し、ページをリロードしても変更後のレイアウトを維持。
• 異常値検知システム（点検モード）：各筐体の数値を入力すると、設定した基準値（平均値・許容しきい値）から外れた筐体の背景色を動的に「赤（異常）」または「緑（正常）」に切り替えるリアルタイムアラート機能。このしきい値はいずれ店舗ごとに設定できるようにする。(店舗により電力降下や筐体差があるため。)

💻 技術スタック

• フロントエンド：HTML5 / CSS3 / JavaScript（Vanilla JS / 外部ライブラリ不使用）
• データ保持：LocalStorage（JSON形式でのデータ永続化）
• バックエンド・基盤処理：Python 3

💡 技術的な工夫・アピールポイント

• 状態管理（モード切り替え）の実装：レイアウト変更を行う「編集モード」と、数値を入力する「点検モード」を分離。誤操作を防ぎつつ、1つの画面で2つの異なる業務フロー（レイアウト管理・点検）を完結させるUI/UXを意識した。
• ライブラリに頼らないJavaScriptの実装：ドラッグ＆ドロップ処理（mousedown / mousemove / mouseup）や、要素の範囲内（フロア枠内）制限ロジック、動的なクラス切り替え（classList）などを、外部ライブラリを一切使わず生のJavaScriptのみで軽量に実装。
• 　【今後の展望】
  • 店舗ごとのしきい値最適化：店舗ごとの電力降下や筐体差に対応するため、個別に設定値をカスタマイズできる機能を実装予定。
  • PythonバックエンドとのAPI連携：現在はLocalStorage主体ですが、Python側でデータを受取、全スタッフでリアルタイムに異常検知を共有できる中央管理サーバーへと拡張していきたい。