-
- ❌
-
接続エラー
-
-
-
{status.lastError}
-
-
よくある原因:
-
- - MasterサーバーのIPアドレスが間違っている
- - Masterサーバーが起動していない
- - ファイアウォールでポートがブロックされている
- - ネットワークが異なるセグメントにある
-
+ {status.lastError && (() => {
+ const errorDetails = parseErrorMessage(status.lastError);
+ return (
+
+
+
+ {errorDetails.severity === "error" ? "❌" : errorDetails.severity === "warning" ? "⚠️" : "ℹ️"}
+
+
{errorDetails.title}
+
+
+
{errorDetails.message}
+ {errorDetails.suggestions.length > 0 && (
+
+
解決方法:
+
+ {errorDetails.suggestions.map((suggestion, index) => (
+ - {suggestion}
+ ))}
+
+
+ )}
-
- )}
+ );
+ })()}
);
diff --git a/src/components/SplashScreen.css b/src/components/SplashScreen.css
new file mode 100644
index 0000000..39cbfeb
--- /dev/null
+++ b/src/components/SplashScreen.css
@@ -0,0 +1,214 @@
+.splash-screen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ overflow: hidden;
+ -webkit-user-select: none;
+ user-select: none;
+}
+
+.splash-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: 0;
+}
+
+.splash-gradient-1,
+.splash-gradient-2,
+.splash-gradient-3 {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.6;
+ animation: float 15s ease-in-out infinite;
+}
+
+.splash-gradient-1 {
+ width: 600px;
+ height: 600px;
+ background: radial-gradient(circle, #667eea 0%, transparent 70%);
+ top: -300px;
+ left: -300px;
+ animation-delay: 0s;
+}
+
+.splash-gradient-2 {
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, #764ba2 0%, transparent 70%);
+ bottom: -250px;
+ right: -250px;
+ animation-delay: 2s;
+}
+
+.splash-gradient-3 {
+ width: 400px;
+ height: 400px;
+ background: radial-gradient(circle, #6366f1 0%, transparent 70%);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation-delay: 4s;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 25% {
+ transform: translate(30px, -30px) scale(1.1);
+ }
+ 50% {
+ transform: translate(-20px, 20px) scale(0.9);
+ }
+ 75% {
+ transform: translate(20px, 30px) scale(1.05);
+ }
+}
+
+.splash-content {
+ position: relative;
+ z-index: 1;
+ text-align: center;
+ animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.splash-logo {
+ margin-bottom: 2rem;
+ animation: logoFloat 3s ease-in-out infinite;
+}
+
+@keyframes logoFloat {
+ 0%, 100% {
+ transform: translateY(0) scale(1);
+ }
+ 50% {
+ transform: translateY(-10px) scale(1.05);
+ }
+}
+
+.splash-icon {
+ font-size: 6rem;
+ filter: drop-shadow(0 10px 30px rgba(102, 126, 234, 0.4));
+ animation: iconPulse 2s ease-in-out infinite;
+}
+
+@keyframes iconPulse {
+ 0%, 100% {
+ filter: drop-shadow(0 10px 30px rgba(102, 126, 234, 0.4));
+ }
+ 50% {
+ filter: drop-shadow(0 10px 40px rgba(102, 126, 234, 0.6));
+ }
+}
+
+.splash-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6366f1 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin: 0 0 0.5rem 0;
+ letter-spacing: -0.02em;
+ animation: titleShine 3s ease-in-out infinite;
+}
+
+@keyframes titleShine {
+ 0%, 100% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
+
+.splash-subtitle {
+ font-size: 1.125rem;
+ color: #94a3b8;
+ margin: 0 0 3rem 0;
+ font-weight: 500;
+ letter-spacing: 0.05em;
+}
+
+.splash-loader {
+ width: 200px;
+ height: 3px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 9999px;
+ overflow: hidden;
+ margin: 0 auto;
+}
+
+.loader-bar {
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #6366f1 100%);
+ border-radius: 9999px;
+ animation: loaderProgress 1.5s ease-out forwards;
+ box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
+}
+
+@keyframes loaderProgress {
+ from {
+ width: 0%;
+ }
+ to {
+ width: 100%;
+ }
+}
+
+/* フェードアウトアニメーション */
+.splash-fade-out {
+ animation: fadeOut 0.5s ease-out forwards;
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+/* レスポンシブ */
+@media (max-width: 768px) {
+ .splash-icon {
+ font-size: 4rem;
+ }
+
+ .splash-title {
+ font-size: 2.5rem;
+ }
+
+ .splash-subtitle {
+ font-size: 1rem;
+ }
+
+ .splash-loader {
+ width: 150px;
+ }
+}
diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx
new file mode 100644
index 0000000..cc5222b
--- /dev/null
+++ b/src/components/SplashScreen.tsx
@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+import "./SplashScreen.css";
+
+interface SplashScreenProps {
+ onComplete: () => void;
+}
+
+export const SplashScreen = ({ onComplete }: SplashScreenProps) => {
+ const [isVisible, setIsVisible] = useState(true);
+ const [isAnimating, setIsAnimating] = useState(false);
+
+ useEffect(() => {
+ // スプラッシュスクリーンを1.5秒表示
+ const timer = setTimeout(() => {
+ setIsAnimating(true);
+ // フェードアウトアニメーション後に非表示
+ setTimeout(() => {
+ setIsVisible(false);
+ onComplete();
+ }, 500); // フェードアウトの時間
+ }, 1500);
+
+ return () => clearTimeout(timer);
+ }, [onComplete]);
+
+ if (!isVisible) {
+ return null;
+ }
+
+ return (
+
+
+
+
OBS Sync
+
リアルタイム同期システム
+
+
+
+
+ );
+};
diff --git a/src/hooks/useNetworkStatus.ts b/src/hooks/useNetworkStatus.ts
index 6215030..b7c713f 100644
--- a/src/hooks/useNetworkStatus.ts
+++ b/src/hooks/useNetworkStatus.ts
@@ -1,18 +1,37 @@
import { useState, useCallback, useEffect, useRef } from "react";
import { invoke } from "@tauri-apps/api/core";
-import { NetworkStatus, ConnectionState } from "../types/network";
+import { NetworkStatus, ConnectionState, ClientInfo, SlaveStatus, ReconnectionStatus } from "../types/network";
interface NetworkConfig {
host: string;
port: number;
}
+export interface PerformanceMetrics {
+ averageLatencyMs: number;
+ totalMessages: number;
+ messagesPerSecond: number;
+ totalBytes: number;
+ recentMetrics: Array<{
+ timestamp: number;
+ messageType: string;
+ latencyMs: number;
+ messageSizeBytes: number;
+ }>;
+}
+
export const useNetworkStatus = () => {
const [status, setStatus] = useState
({
state: ConnectionState.Disconnected,
});
const [error, setError] = useState(null);
+ const [clients, setClients] = useState([]);
+ const [slaveStatuses, setSlaveStatuses] = useState([]);
+ const [reconnectionStatus, setReconnectionStatus] = useState(null);
+ const [performanceMetrics, setPerformanceMetrics] = useState(null);
const pollingIntervalRef = useRef(null);
+ const reconnectionPollingRef = useRef(null);
+ const metricsPollingRef = useRef(null);
const updateClientCount = useCallback(async () => {
try {
@@ -28,6 +47,42 @@ export const useNetworkStatus = () => {
}
}, []);
+ const updateClientsInfo = useCallback(async () => {
+ try {
+ const clientsInfo = await invoke("get_connected_clients_info");
+ setClients(clientsInfo);
+ } catch (err) {
+ console.error("Failed to get connected clients info:", err);
+ }
+ }, []);
+
+ const updateSlaveStatuses = useCallback(async () => {
+ try {
+ const statuses = await invoke("get_slave_statuses");
+ setSlaveStatuses(statuses);
+ } catch (err) {
+ console.error("Failed to get slave statuses:", err);
+ }
+ }, []);
+
+ const updateReconnectionStatus = useCallback(async () => {
+ try {
+ const status = await invoke("get_slave_reconnection_status");
+ setReconnectionStatus(status);
+ } catch (err) {
+ console.error("Failed to get reconnection status:", err);
+ }
+ }, []);
+
+ const updatePerformanceMetrics = useCallback(async () => {
+ try {
+ const metrics = await invoke("get_performance_metrics");
+ setPerformanceMetrics(metrics);
+ } catch (err) {
+ console.error("Failed to get performance metrics:", err);
+ }
+ }, []);
+
const startMasterServer = useCallback(async (port: number) => {
try {
setStatus({ state: ConnectionState.Connecting });
@@ -35,9 +90,19 @@ export const useNetworkStatus = () => {
setStatus({ state: ConnectionState.Connected, connectedClients: 0 });
setError(null);
- // Start polling for client count
+ // Start polling for client count, info, slave statuses, and performance metrics
updateClientCount();
- pollingIntervalRef.current = window.setInterval(updateClientCount, 1000);
+ updateClientsInfo();
+ updateSlaveStatuses();
+ updatePerformanceMetrics();
+ pollingIntervalRef.current = window.setInterval(() => {
+ updateClientCount();
+ updateClientsInfo();
+ updateSlaveStatuses();
+ }, 1000);
+ metricsPollingRef.current = window.setInterval(() => {
+ updatePerformanceMetrics();
+ }, 2000); // Update metrics every 2 seconds
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
setError(errorMessage);
@@ -56,10 +121,15 @@ export const useNetworkStatus = () => {
clearInterval(pollingIntervalRef.current);
pollingIntervalRef.current = null;
}
+ if (metricsPollingRef.current !== null) {
+ clearInterval(metricsPollingRef.current);
+ metricsPollingRef.current = null;
+ }
await invoke("stop_master_server");
setStatus({ state: ConnectionState.Disconnected });
setError(null);
+ setPerformanceMetrics(null);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
setError(errorMessage);
@@ -73,6 +143,16 @@ export const useNetworkStatus = () => {
await invoke("connect_to_master", { config });
setStatus({ state: ConnectionState.Connected });
setError(null);
+
+ // Start polling for reconnection status and performance metrics
+ updateReconnectionStatus();
+ updatePerformanceMetrics();
+ reconnectionPollingRef.current = window.setInterval(() => {
+ updateReconnectionStatus();
+ }, 1000);
+ metricsPollingRef.current = window.setInterval(() => {
+ updatePerformanceMetrics();
+ }, 2000); // Update metrics every 2 seconds
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
setError(errorMessage);
@@ -82,13 +162,25 @@ export const useNetworkStatus = () => {
});
throw err;
}
- }, []);
+ }, [updateReconnectionStatus]);
const disconnectFromMaster = useCallback(async () => {
try {
+ // Stop polling for reconnection status and metrics
+ if (reconnectionPollingRef.current !== null) {
+ clearInterval(reconnectionPollingRef.current);
+ reconnectionPollingRef.current = null;
+ }
+ if (metricsPollingRef.current !== null) {
+ clearInterval(metricsPollingRef.current);
+ metricsPollingRef.current = null;
+ }
+
await invoke("disconnect_from_master");
setStatus({ state: ConnectionState.Disconnected });
setError(null);
+ setReconnectionStatus(null);
+ setPerformanceMetrics(null);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
setError(errorMessage);
@@ -102,12 +194,22 @@ export const useNetworkStatus = () => {
if (pollingIntervalRef.current !== null) {
clearInterval(pollingIntervalRef.current);
}
+ if (reconnectionPollingRef.current !== null) {
+ clearInterval(reconnectionPollingRef.current);
+ }
+ if (metricsPollingRef.current !== null) {
+ clearInterval(metricsPollingRef.current);
+ }
};
}, []);
return {
status,
error,
+ clients,
+ slaveStatuses,
+ reconnectionStatus,
+ performanceMetrics,
startMasterServer,
stopMasterServer,
connectToMaster,
diff --git a/src/hooks/useOBSConnection.ts b/src/hooks/useOBSConnection.ts
index 4a40efa..e4b21bf 100644
--- a/src/hooks/useOBSConnection.ts
+++ b/src/hooks/useOBSConnection.ts
@@ -1,14 +1,24 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
import { invoke } from "@tauri-apps/api/core";
-import { OBSConnectionConfig, OBSConnectionStatus } from "../types/obs";
+import { OBSConnectionConfig, OBSConnectionStatus, OBSSource } from "../types/obs";
export const useOBSConnection = () => {
const [status, setStatus] = useState({
connected: false,
});
+ const [sources, setSources] = useState([]);
const [isConnecting, setIsConnecting] = useState(false);
const [error, setError] = useState(null);
+ const fetchSources = useCallback(async () => {
+ try {
+ const sourcesData = await invoke("get_obs_sources");
+ setSources(sourcesData);
+ } catch (err) {
+ console.error("Failed to fetch OBS sources:", err);
+ }
+ }, []);
+
const connect = useCallback(async (config: OBSConnectionConfig) => {
setIsConnecting(true);
setError(null);
@@ -16,6 +26,8 @@ export const useOBSConnection = () => {
await invoke("connect_obs", { config });
const newStatus = await invoke("get_obs_status");
setStatus(newStatus);
+ // Fetch sources after connection
+ await fetchSources();
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
setError(errorMessage);
@@ -23,12 +35,13 @@ export const useOBSConnection = () => {
} finally {
setIsConnecting(false);
}
- }, []);
+ }, [fetchSources]);
const disconnect = useCallback(async () => {
try {
await invoke("disconnect_obs");
setStatus({ connected: false });
+ setSources([]);
setError(null);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
@@ -41,18 +54,59 @@ export const useOBSConnection = () => {
try {
const newStatus = await invoke("get_obs_status");
setStatus(newStatus);
+
+ // If connected, fetch sources
+ if (newStatus.connected) {
+ await fetchSources();
+ } else {
+ setSources([]);
+ }
} catch (err) {
const errorMessage = err instanceof Error ? err.message : String(err);
setError(errorMessage);
+ setStatus({ connected: false });
+ setSources([]);
}
- }, []);
+ }, [fetchSources]);
+
+ // Auto-refresh connection status every 5 seconds
+ const intervalRef = useRef(null);
+
+ useEffect(() => {
+ // Clear any existing interval
+ if (intervalRef.current !== null) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+
+ // Start polling if we should check status
+ const startPolling = () => {
+ intervalRef.current = window.setInterval(() => {
+ refreshStatus();
+ }, 5000); // 5 seconds
+ };
+
+ // Start polling immediately and then every 5 seconds
+ refreshStatus();
+ startPolling();
+
+ // Cleanup on unmount
+ return () => {
+ if (intervalRef.current !== null) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
+ };
+ }, [refreshStatus]);
return {
status,
+ sources,
isConnecting,
error,
connect,
disconnect,
refreshStatus,
+ fetchSources,
};
};
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
new file mode 100644
index 0000000..3c4a2a7
--- /dev/null
+++ b/src/hooks/useSettings.ts
@@ -0,0 +1,80 @@
+import { useState, useCallback, useEffect } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+export interface OBSSettings {
+ host: string;
+ port: number;
+ password: string;
+}
+
+export interface MasterSettings {
+ defaultPort: number;
+}
+
+export interface SlaveSettings {
+ defaultHost: string;
+ defaultPort: number;
+}
+
+export interface AppSettings {
+ obs: OBSSettings;
+ master: MasterSettings;
+ slave: SlaveSettings;
+}
+
+export const useSettings = () => {
+ const [settings, setSettings] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ const loadSettings = useCallback(async () => {
+ try {
+ setIsLoading(true);
+ const loaded = await invoke("load_settings");
+ setSettings(loaded);
+ return loaded;
+ } catch (error) {
+ console.error("Failed to load settings:", error);
+ // Return default settings on error
+ const defaultSettings: AppSettings = {
+ obs: {
+ host: "localhost",
+ port: 4455,
+ password: "",
+ },
+ master: {
+ defaultPort: 8080,
+ },
+ slave: {
+ defaultHost: "192.168.1.100",
+ defaultPort: 8080,
+ },
+ };
+ setSettings(defaultSettings);
+ return defaultSettings;
+ } finally {
+ setIsLoading(false);
+ }
+ }, []);
+
+ const saveSettings = useCallback(async (newSettings: AppSettings) => {
+ try {
+ await invoke("save_settings", { settings: newSettings });
+ setSettings(newSettings);
+ } catch (error) {
+ console.error("Failed to save settings:", error);
+ throw error;
+ }
+ }, []);
+
+ // Load settings on mount
+ useEffect(() => {
+ loadSettings();
+ }, [loadSettings]);
+
+ return {
+ settings,
+ isLoading,
+ loadSettings,
+ saveSettings,
+ };
+};
diff --git a/src/types/network.ts b/src/types/network.ts
index 353b5e0..51c2689 100644
--- a/src/types/network.ts
+++ b/src/types/network.ts
@@ -32,3 +32,32 @@ export interface SlaveInfo {
connectedAt: number;
lastHeartbeat: number;
}
+
+export interface ClientInfo {
+ id: string;
+ ipAddress: string;
+ connectedAt: number;
+ lastActivity: number;
+}
+
+export interface DesyncDetail {
+ category: string;
+ sceneName: string;
+ sourceName: string;
+ description: string;
+ severity: string;
+}
+
+export interface SlaveStatus {
+ clientId: string;
+ isSynced: boolean;
+ desyncDetails: DesyncDetail[];
+ lastReportTime: number;
+}
+
+export interface ReconnectionStatus {
+ isReconnecting: boolean;
+ attemptCount: number;
+ maxAttempts: number;
+ lastError?: string;
+}
diff --git a/src/utils/errorMessages.ts b/src/utils/errorMessages.ts
new file mode 100644
index 0000000..288a712
--- /dev/null
+++ b/src/utils/errorMessages.ts
@@ -0,0 +1,131 @@
+// エラーメッセージの詳細化（日本語）
+
+export interface ErrorDetails {
+ title: string;
+ message: string;
+ suggestions: string[];
+ severity: "error" | "warning" | "info";
+}
+
+export function parseErrorMessage(error: string): ErrorDetails {
+ const lowerError = error.toLowerCase();
+
+ // OBS接続エラー
+ if (lowerError.includes("failed to connect") || lowerError.includes("connection refused")) {
+ return {
+ title: "OBS接続エラー",
+ message: "OBS Studioに接続できませんでした",
+ suggestions: [
+ "OBS Studioが起動しているか確認してください",
+ "WebSocketサーバーが有効になっているか確認してください（ツール → WebSocketサーバー設定）",
+ "ポート番号が正しいか確認してください（デフォルト: 4455）",
+ "ファイアウォールでポートがブロックされていないか確認してください",
+ ],
+ severity: "error",
+ };
+ }
+
+ if (lowerError.includes("authentication") || lowerError.includes("password") || lowerError.includes("認証")) {
+ return {
+ title: "認証エラー",
+ message: "OBS WebSocketの認証に失敗しました",
+ suggestions: [
+ "パスワードが正しいか確認してください",
+ "OBS StudioのWebSocketサーバー設定でパスワードを確認してください",
+ ],
+ severity: "error",
+ };
+ }
+
+ if (lowerError.includes("timeout") || lowerError.includes("タイムアウト")) {
+ return {
+ title: "接続タイムアウト",
+ message: "OBS Studioへの接続がタイムアウトしました",
+ suggestions: [
+ "OBS Studioが応答しているか確認してください",
+ "ネットワーク接続を確認してください",
+ "ホスト名またはIPアドレスが正しいか確認してください",
+ ],
+ severity: "error",
+ };
+ }
+
+ // ネットワークエラー（Master-Slave間）
+ if (lowerError.includes("failed to bind") || lowerError.includes("address already in use")) {
+ return {
+ title: "ポート使用中エラー",
+ message: "指定されたポートが既に使用されています",
+ suggestions: [
+ "別のポート番号を試してください",
+ "他のアプリケーションが同じポートを使用していないか確認してください",
+ "前回起動したサーバーが正しく停止していない可能性があります",
+ ],
+ severity: "error",
+ };
+ }
+
+ if (lowerError.includes("connection refused") && lowerError.includes("master")) {
+ return {
+ title: "Master接続エラー",
+ message: "Masterサーバーに接続できませんでした",
+ suggestions: [
+ "MasterサーバーのIPアドレスが正しいか確認してください",
+ "Masterサーバーが起動しているか確認してください",
+ "ポート番号が正しいか確認してください",
+ "ファイアウォールでポートがブロックされていないか確認してください",
+ "同じネットワーク内にいるか確認してください",
+ ],
+ severity: "error",
+ };
+ }
+
+ if (lowerError.includes("network") || lowerError.includes("network unreachable")) {
+ return {
+ title: "ネットワークエラー",
+ message: "ネットワーク接続に問題があります",
+ suggestions: [
+ "ネットワーク接続を確認してください",
+ "IPアドレスが正しいか確認してください",
+ "ファイアウォールの設定を確認してください",
+ ],
+ severity: "error",
+ };
+ }
+
+ // 同期エラー
+ if (lowerError.includes("failed to apply") || lowerError.includes("適用")) {
+ return {
+ title: "同期適用エラー",
+ message: "Masterからの変更を適用できませんでした",
+ suggestions: [
+ "OBS Studioが正常に動作しているか確認してください",
+ "シーンやソースが存在するか確認してください",
+ "OBS Studioのログを確認してください",
+ ],
+ severity: "warning",
+ };
+ }
+
+ if (lowerError.includes("desync") || lowerError.includes("不一致")) {
+ return {
+ title: "同期不一致",
+ message: "MasterとSlaveの状態が一致していません",
+ suggestions: [
+ "再同期を実行してください",
+ "OBS Studioの状態を確認してください",
+ ],
+ severity: "warning",
+ };
+ }
+
+ // デフォルトエラー
+ return {
+ title: "エラー",
+ message: error,
+ suggestions: [
+ "エラーの詳細を確認してください",
+ "OBS Studioとアプリケーションを再起動してみてください",
+ ],
+ severity: "error",
+ };
+}
diff --git a/technologystack.md b/technologystack.md
deleted file mode 100644
index c7894bc..0000000
--- a/technologystack.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# 技術スタック
-
-## フロントエンド
-- **フレームワーク**: React 19.1.0 (TypeScript)
-- **ビルドツール**: Vite 7.0.4
-- **UI**: CSS Modules / Styled Components
-- **通知**: react-toastify 10.x
-- **OBS通信**: obs-websocket-js 5.x
-
-## バックエンド (Rust)
-- **フレームワーク**: Tauri v2.x
-- **非同期ランタイム**: tokio 1.x (full features)
-- **WebSocket**: tokio-tungstenite 0.21.x
-- **シリアライゼーション**: serde 1.x, serde_json 1.x
-- **非同期処理**: futures 0.3.x
-
-## プロトコル
-- **OBS WebSocket**: v5.x (OBS Studio 28.x以降)
-- **Master-Slave通信**: カスタムJSON over WebSocket
-
-## 開発ツール
-- **TypeScript**: ~5.8.3
-- **Node.js**: 推奨 LTS版
-- **Rust**: 1.70以降
-- **パッケージマネージャー**: npm
-
-## 対応プラットフォーム
-- Windows
-- macOS
-- Linux
-
-## アーキテクチャ
-### Master モード
-- OBSの変更を監視
-- 変更をSlaveノードにブロードキャスト
-- WebSocketサーバーとして動作
-
-### Slave モード
-- Masterからの変更を受信
-- 受信した変更をローカルOBSに適用
-- 非同期検出とアラート機能
-- WebSocketクライアントとして動作
-
-## 同期対象
-- ソース（Source）
-- プレビュー（Preview）
-- プログラム（Program/Live Output）
-
-## 主要機能
-1. リアルタイム画像同期（内容、サイズ、位置）
-2. Master-Slaveアーキテクチャ
-3. 非同期アラート
-4. 同期対象選択機能
-5. LAN内自動検出（オプション）