Skip to main content

マルチウィンドウアーキテクチャ

jamjam のマルチウィンドウ構成を定義する。

関連: architecture.md Section 8, screens/README.md

概要​

設計目標​

  • マルチモニター環境での最適な操作性
  • 各ウィンドウの役割を明確に分離
  • 状態に応じた適切なウィンドウ表示

ウィンドウ構成​

ウィンドウ表示タイミング主な役割
接続画面未接続時セッション作成/参加
ミキシングコンソール接続後（メイン）音量・パン調整、退室
チャット接続後（メイン）テキストコミュニケーション
設定画面必要時オーディオデバイス、プリセット

状態遷移​

アプリケーション状態とウィンドウ​

状態別ウィンドウ表示​

アプリ状態接続画面ミキサーチャット設定
未接続表示（メイン）非表示非表示オプション
接続中表示（ローディング）非表示非表示オプション
接続済み非表示表示（メイン）表示（メイン）オプション

ウィンドウ詳細​

1. 接続画面ウィンドウ (ConnectionWindow)​

セッション参加/作成のシンプルなUI。

仕様​

項目値
デフォルトサイズ400 x 300 px
最小サイズ320 x 280 px
リサイズ不可（固定）
閉じる動作アプリ終了

機能​

  • ルーム作成ボタン
  • 招待コード入力フィールド
  • 参加ボタン
  • 設定ボタン（設定ウィンドウを開く）

レイアウト​

┌────────────────────────────────┐
│          jamjam               │
├────────────────────────────────┤
│                                │
│    ┌────────────────────┐      │
│    │  [ ルームを作成 ]  │      │
│    └────────────────────┘      │
│                                │
│    ─────── または ───────      │
│                                │
│    招待コード: [______]        │
│                [ 参加 ]        │
│                                │
│                        [⚙]    │
└────────────────────────────────┘

2. ミキシングコンソールウィンドウ (MixerWindow)​

DAWスタイルのミキシングコンソール。

仕様​

項目値
デフォルトサイズ800 x 600 px
最小サイズ600 x 400 px
リサイズ可（水平方向優先）
閉じる動作退室確認ダイアログ → アプリ終了

機能​

  • チャンネルストリップ（自分 + 参加者）
  • マスターセクション
  • 退室ボタン
  • 設定ボタン

既存コンポーネント​

ui/src/components/MixerPanel/ の以下のコンポーネントを使用:

  • MixerPanel - ルートコンポーネント
  • ChannelStrip - 個別チャンネル
  • MasterSection - マスター出力
  • StereoMeter, StereoFader, PanSlider

3. チャットウィンドウ (ChatWindow)​

テキストコミュニケーション用ウィンドウ。

仕様​

項目値
デフォルトサイズ400 x 500 px
最小サイズ300 x 400 px
リサイズ可
閉じる動作ウィンドウを隠す（再表示可能）

機能​

  • メッセージ一覧
  • 入力フィールド
  • 絵文字リアクション
  • システムメッセージ（参加/退室通知）

既存コンポーネント​

ui/src/components/ChatPanel/ の以下のコンポーネントを使用:

  • ChatPanel - ルートコンポーネント
  • ChatMessageList - メッセージ一覧
  • ChatInput - 入力フィールド
  • ReactionBar, EmojiPicker

4. 設定画面ウィンドウ (SettingsWindow)​

オーディオデバイス、プリセット、表示設定。

仕様​

項目値
デフォルトサイズ600 x 500 px
最小サイズ500 x 400 px
リサイズ可
閉じる動作ウィンドウを閉じる
モーダルいいえ（他ウィンドウ操作可能）

機能​

  • 全般設定（テーマ、言語）
  • プロフィール（表示名）
  • デバイス設定（入出力機器、サンプルレート）
  • 診断

既存コンポーネント​

ui/src/components/SettingsPanel/ の以下のコンポーネントを使用:

  • SettingsPanel - ルートコンポーネント
  • VerticalTabs - タブナビゲーション
  • GeneralTab, ProfileTab, DevicesTab, DiagnosticsTab

ウィンドウ間通信​

Tauri Events​

ウィンドウ間の通信には Tauri の Event System を使用する。

イベント一覧​

イベント名送信元受信先ペイロード
session:connectedBackendAll{ roomId, participants }
session:disconnectedBackendAll{ reason }
participant:joinedBackendMixer, Chat{ id, name }
participant:leftBackendMixer, Chat{ id, name }
audio:levelBackendMixer{ channelId, levelL, levelR }
chat:messageBackendChat{ id, type, content, ... }
settings:changedSettingsAll{ key, value }

状態同期​

ウィンドウ管理​

起動シーケンス​

ウィンドウ位置の記憶​

各ウィンドウの位置・サイズは設定ファイルに保存し、次回起動時に復元する。

# config.toml

[windows.mixer]
x = 100
y = 100
width = 800
height = 600

[windows.chat]
x = 920
y = 100
width = 400
height = 500

[windows.settings]
x = 200
y = 150
width = 600
height = 500

Tauri 実装​

tauri.conf.json​

{
  "app": {
    "windows": [
      {
        "label": "connection",
        "title": "jamjam",
        "width": 400,
        "height": 300,
        "resizable": false,
        "center": true
      }
    ]
  }
}

動的ウィンドウ作成​

// src-tauri/src/windows.rs

use tauri::{WebviewUrl, WebviewWindowBuilder};

pub fn create_mixer_window(app: &tauri::AppHandle) -> tauri::Result<()> {
    WebviewWindowBuilder::new(
        app,
        "mixer",
        WebviewUrl::App("mixer.html".into()),
    )
    .title("jamjam - Mixer")
    .inner_size(800.0, 600.0)
    .min_inner_size(600.0, 400.0)
    .build()?;
    Ok(())
}

pub fn create_chat_window(app: &tauri::AppHandle) -> tauri::Result<()> {
    WebviewWindowBuilder::new(
        app,
        "chat",
        WebviewUrl::App("chat.html".into()),
    )
    .title("jamjam - Chat")
    .inner_size(400.0, 500.0)
    .min_inner_size(300.0, 400.0)
    .build()?;
    Ok(())
}

アクセシビリティ​

キーボードショートカット​

ショートカット動作スコープ
Cmd/Ctrl + 1ミキサーウィンドウにフォーカスグローバル
Cmd/Ctrl + 2チャットウィンドウにフォーカスグローバル
Cmd/Ctrl + ,設定ウィンドウを開くグローバル
Cmd/Ctrl + Mミュート切り替えミキサー
Cmd/Ctrl + Enterメッセージ送信チャット
Escapeウィンドウを閉じる設定

フォーカス管理​

  • 新しいウィンドウが開いたらフォーカスを移動
  • チャットウィンドウを閉じて再度開いた場合、入力フィールドにフォーカス
  • 設定ウィンドウを閉じたら、元のウィンドウにフォーカスを戻す

i18n キー​

{
  "window.connection.title": "jamjam",
  "window.mixer.title": "jamjam - ミキサー",
  "window.chat.title": "jamjam - チャット",
  "window.settings.title": "設定",
  "window.mixer.closeConfirm": "セッションから退室しますか？",
  "window.chat.hidden": "チャットウィンドウを非表示にしました"
}

関連ドキュメント​