YouTube等のライブ配信で野球の試合を中継する際に、OBSにスコアボードをクロマキー合成で表示するためのアプリケーションです。
- 簡単操作: ブラウザまたは専用アプリで試合状況を更新
- リアルタイム反映: 操作パネルの変更が即座にスコアボードへ反映
- OBS対応: 背景色をカスタマイズしてクロマキー合成
- 状態保存: 試合途中で中断しても再開可能
- 複数PC対応: 操作PCと配信PCを分けて運用可能
# ビルド
npm install
npm run build:linux
# 実行
sudo apt install libfuse2 # Ubuntu 24.04以降のみ
./dist/Baseball\ Scoreboard-1.0.0.AppImage --no-sandbox
初回起動時に設定ウィンドウが開き、試合設定を行えます。
npm run build:win # Windows
npm run build:mac # macOS# サーバー起動
npm install
node server.js
# ブラウザでアクセス
http://localhost:8080/operation.html # 操作パネル
http://localhost:8080/board.html # 表示ボード複数PCからアクセスする場合はlocalhostをサーバーのIPアドレスに変更してください。
詳細: マルチPC環境構築ガイド
Electron版:
- 設定ウィンドウ（
Ctrl/Cmd+,）を開く - YAMLファイルを選択または新規作成
- 「✅ 設定ファイルを生成」をクリック
Web版:
npm run init対話形式で大会名、チーム名、イニング数を入力します。
詳細: 設定ファイルガイド
- 操作パネルを開く
- イニングと表裏を選択
- スコアやランナーをボタンで更新
- OBS → ソース → ブラウザ
- URL:
http://localhost:8080/board.html - 幅: 1920、高さ: 1080
- エフェクトフィルタ → クロマキー → 背景色を抜く
詳細: ユーザーガイド
複数人で同時に操作できますか？
最初に接続した人のみが操作可能（マスター）となります。後から接続した人は閲覧専用（スレーブ）です。マスター権限は手動で解放できます。
詳細: Master/Slave制御
試合をリセットするには？
操作パネルの「🔄 試合初期化」ボタンでリセットできます（チーム名は保持）。新しい大会を始める場合は「📋 新規大会で初期化」を使用してください。
背景色を変更するには？
Electron版: 設定ウィンドウ（Ctrl/Cmd+,）の「🎨 表示ボード設定」カードで変更
Web版: npm run initで設定時に指定、またはYAMLファイルでboard_background_colorを設定
推奨色: グリーン #00ff00、マゼンタ #ff00ff、ブルー #0000ff
- 詳細な使い方 - 各機能の詳細説明、OBS設定のTips
- 設定ファイルガイド - YAMLファイルの作成・編集方法
- マルチPC環境構築 - 複数PCでの運用方法
- トラブルシューティング - よくある問題と解決方法
- Electronデプロイガイド - ビルド方法と実行手順
- 設定ウィンドウガイド - 設定ウィンドウの使い方
- 本番環境デプロイ - PM2を使った運用方法
- システムアーキテクチャ - 技術スタック、状態管理、WebSocketプロトコル
- Master/Slave制御 - 詳細な実装と仕様
- WebSocket再接続 - 再接続機能の実装詳細
このプロジェクトのライセンスはCC BY-NC 4.0です。商用利用についてはCode for SUSONOへお問い合わせ下さい。
このプロジェクトは以下のオープンソースソフトウェアを使用しています（すべてMITライセンス）:
- Vue.js (v3.4.0+) - MIT License
- Bootstrap (v5.3.3+) - MIT License
- ws (v8.13.0+) - MIT License
- js-yaml (v4.1.0+) - MIT License
実際にインストールされるバージョンは package-lock.json をご確認ください。
このプロジェクトはVitestを使用した自動テストを実装しています。
# すべてのテストを実行
npm test
# テストを1回だけ実行（CI用）
npm run test:run
# カバレッジレポート付きでテスト
npm run test:coverage
# UIモードでテストを実行
npm run test:ui
# ウォッチモード（ファイル変更時に自動再実行）
npm run test:watchPath Traversalセキュリティテスト (test/unit/validate-file-path.test.js)
- ファイルパス検証機能のセキュリティテスト（29テストケース）
- パストラバーサル攻撃の防御テスト
- 不正な拡張子・ファイルタイプの検出
- 実際の攻撃シナリオに基づいたテスト
カバレッジ: セキュリティクリティカルなvalidateFilePath()関数は100%テスト済み
詳細はdoc/SECURITY.mdおよびdoc/TESTING_FRAMEWORK_PROPOSAL.mdを参照してください。