| name | webrtc-screen-layout |
| description | WebRTC 画面の見え方を、接続ロジックに触れずに最小差分で調整するための Skill。 |
webrtc-screen-layout
目的
この Skill は、WebRTC 画面の見え方を最小差分で調整するためのものである。
対象は主に次である。
WebRTC_UI.vue のレイアウト調整- 共有画面 / 参加者カメラ / self view の表示優先順位の調整
- PC / モバイルでの見え方の改善
- プレースホルダや空状態 UI の最小修正
- 必要最小限の class / computed / 小さな helper 追加
- 共有の自動主表示を止め、選択式にするための最小修正
この Skill は見た目専用である。
接続、購読、publish / unpublish、late join、background blur、RNNoise、device 選択の挙動変更は担当しない。
この Skill を使う場面
次のような依頼で使う。
- 自分の画面が相手より小さくて不自然なので統一したい
- 共有画面を自動では開かず、選んで見たい
- 参加者を 1 列固定ではなく折り返しやグリッドにしたい
- スマホで主要映像が最初に見えるようにしたい
- 「共有中の画面はありません」などのプレースホルダが大きすぎる
- 画面レイアウトを Zoom / Discord / Gather っぽい思想に寄せたい
- 接続不具合ではなく UI の見え方だけを直したい
使わない場面:
- late join 不具合
- subscribeExisting / onStreamPublished の不具合
- join / leave / 再入室不具合
- 画面共有開始 / 停止の不具合
- 背景ぼかしや RNNoise の不具合
- SkyWay SDK 呼び出し順序の修正
これらは別 Skill で扱う。
最重要ルール
- 変更対象は必要最小限に限定する
- まず
WebRTC_UI.vue の責務として解く
- 必要な場合だけ、UI 表示専用 helper を最小差分で触る
- 見た目修正のために
useStreamReceiver.js の接続順序を触らない
useRoomSession.js, useRemotePublications.js, useLocalMediaSession.js の挙動を変えない- コメント、文言、整形、空白、引用符、改行コードは依頼がない限り触らない
<template>, <script>, <style> の並びを変えない- テンプレート全体の書き換えはしない
- 日本語コメントと日本語 UI 文言は保持する
- whole-file rewrite をしない
- 横 1 列固定を前提にしない
- モバイルで主要映像を横スクロール前提にしない
- 実行していない検証を成功したとは書かない
現在の前提
このプロジェクトでは、共有画面と参加者カメラは別責務で扱う。
ただし、共有画面が存在しても自動で主表示するとは限らない。
共有画面の「存在」と、ユーザーがその共有を「視聴中」であることは別状態として扱う。
selectedMainSharePubId があるときだけ、共有画面を主表示にする。
selectedMainSharePubId が null のときは、共有一覧だけを表示してよい。
また、ローカル self view は通常会議時には特別扱いせず、参加者カメラの一員として同格表示してよい。
自分のカメラを小窓や補助表示に落とすのは、主に共有視聴中や共有配信中の補助 UI に限定する。
レイアウト思想
この Skill では、次の思想を優先する。
1. 通常会議時
- 参加者を同格に扱う
- 1 列固定ではなく、wrap または grid を使う
- self view だけを常に小さくしない
- 自分の映像だけが不自然に小さい、または大きい構成を避ける
2. 共有あり時
- 共有画面と参加者カメラは別責務で扱う
- 共有画面が存在しても、自動で主表示しない
- ユーザーが「配信を見る」を押したときだけ、共有を主表示にする
- 共有を主表示した後は、既存の共有レイアウト比率と配置を維持する
- 参加者カメラは共有視聴中のみ補助帯へ落としてよい
3. self view
- self view は通常会議時には他参加者と同格表示でよい
- self view を小窓や補助表示にするのは、共有視聴中または共有配信中の補助 UI を優先する
- self view だけが常に特殊サイズになる構成は避ける
既定の UI ルール
依頼が曖昧な場合は次を既定とする。
PC
共有なし
- 参加者カメラは wrap または grid
- self view を他参加者より常に小さくしない
- 自分だけ極端に小さい、または大きい見え方を避ける
- 10 人前後でも横 1 列固定にしない
共有あり
- 共有一覧は表示してよいが、自動で主表示しない
- 「配信を見る」を押したときだけ共有を主表示にする
- 主表示に入った後の共有比率と配置は現状維持とする
- 主表示中は参加者カメラを下部または側部の補助帯にしてよい
- self view を補助表示へ落とすのは主表示中のみでよい
モバイル
- 主要映像を最初に見せる
- 共有ありでも自動で共有主表示にしない
- 共有未選択時は共有一覧を自然に見せる
- 共有選択後は共有画面を上部に出す
- 参加者カメラは横スクロール前提より、縦積みまたは 1〜2 列グリッドを優先する
- self view を大きくしすぎない
- 「見えていないだけ」を接続不具合と誤認しにくい構成にする
推奨する実装順
修正は次の順で検討する。
第 1 優先
WebRTC_UI.vue の class / レイアウト分岐だけで直せるか確認する。
例:
tile.isLocal の見た目を通常会議時は他参加者と揃えるselectedMainSharePubId の有無で共有主表示を切り替える- 共有未選択時は共有一覧だけを出す
- placeholder の
max-width, padding, aspect を抑える
flex-wrap, grid, min-width, max-width を調整する
第 2 優先
Vue 側で読みにくい条件や、共有の自動選択を止めるための小さな helper 修正だけを行う。
例:
hasScreenShareisViewingShareselectedMainSharePubId === null 時の空状態分岐syncSelectedMainShare() の自動フォールバック削除
useVideoTiles.js のような UI 用 helper は、表示ポリシー修正に限って最小差分で触ってよい。
第 3 優先
どうしても必要な場合だけ、UI に必要な state の橋渡しを useStreamReceiver.js に追加する。
ただし、接続フローや publication 処理には触れない。
触ってよい範囲
優先して触ってよい:
WebRTC_UI.vuesrc/composables/helpers/useVideoTiles.js- その画面専用の小さな helper
- class 切り替え
- computed
- プレースホルダのサイズ
- レイアウト用 wrapper の構造
- 共有の自動選択を止めるための最小ロジック
必要なら最小限で触ってよい:
- UI 表示専用の小さな state bridge
- 既存 return shape を壊さない範囲の公開 state 追加
原則触らない:
useRoomSession.jsuseRemotePublications.jsuseLocalMediaSession.js- SkyWay service
- subscribe / publish / unpublish の順序
- remote attach 本体
- dedupe ロジック
- mute badge ロジック
- blur / RNNoise ロジック
変更の判断基準
良い修正:
WebRTC_UI.vue 中心で完結している- 必要なら
useVideoTiles.js の UI helper を最小差分で触っている
- 通常会議時に self view が他参加者と不自然にズレていない
- 共有ありでも自動で主表示しない
- 「配信を見る」を押したときだけ既存の共有レイアウトに入る
- 共有主表示に入った後の比率やサイズ感を壊していない
- 10 人前後でも破綻しない
- スマホで主要映像が初見で見える
- 変更理由を class と構造で説明できる
- 接続ロジックへ広がっていない
悪い修正:
- 見た目修正のために composable を大きく組み替える
- self view を通常会議時から常に小窓扱いにする
- 共有ありで自動的に先頭共有を開く
- 共有表示比率を不要に変える
- 10 人時に横 1 列固定へ押し込む
- モバイルで横スクロールしないと主表示へ到達できない
- UI 修正なのに join / leave / subscribe 系へ手を出す
依頼の読み替えルール
「自分の画面が相手より小さくて不自然」
- まず通常会議時の self view を他参加者と同格表示に寄せる
tile.isLocal だけで常時小さくする前提を置かない- self view の小窓化は、共有視聴中や共有配信中の補助表示に限定する
「10 人くらいで自然にしたい」
- 1 列固定ではなく wrap または grid を採用する
- self view だけ小さくする前提を置かず、参加者全体の見やすさを優先する
- 10 人を横 1 列で押し込むような設計は避ける
「Zoom / Discord / Gather を参考にしたい」
- そのまま複製しない
- Zoom: self view は必要時のみ補助表示
- Discord: 通常時は grid / focus 思想
- Gather: 共有視聴時は content first
- この 3 つの思想を今の WebRTC UI に最小差分で落とす
「共有があっても勝手に開かないようにしたい」
- 共有の存在と共有視聴中を別 state として扱う
selectedMainSharePubId が null なら共有を主表示しない- 共有一覧だけを表示し、「配信を見る」を押したときだけ主表示に入る
- 選択後は現在の共有レイアウト比率と配置を維持する
- 自動で先頭共有を選ぶ挙動は避ける
「共有は見たいが、比率や配置は今のままでよい」
- 共有主表示の出現条件だけを変える
- 共有を開いた後の主表示レイアウト比率と配置は維持する
- レイアウト再設計に広げない
「共有中の画面はありません、の box が大きすぎる」
- まず placeholder の max-width と padding を下げる
- aspect 比や min-height の持ちすぎを疑う
- 接続不具合の調査へ広げない
実装パターン
パターン A: 最小修正
WebRTC_UI.vue のみ変更- または
WebRTC_UI.vue + useVideoTiles.js のみ変更
- 共有の自動表示を止める
- 「配信を見る」導線を追加する
- 通常会議時の self view サイズ差をなくす
- 共有主表示の既存レイアウトは維持する
最優先で選ぶ。
パターン B: 小さな helper 追加
WebRTC_UI.vue が読みにくいときだけ採用- 小さな computed / helper を追加
- API shape は維持する
パターン C: 軽い mode 分離
必要時のみ採用する。
大規模な状態管理追加はしない。
受け入れ条件
修正後は最低でも次を満たすこと。
- 通常会議時に self view が他参加者と不自然にズレない
- 共有ありでも自動で共有画面が開かない
- 「配信を見る」を押すと既存の共有レイアウトで表示される
- 共有を閉じると共有一覧表示へ戻る
- 共有を開いた後の比率やサイズ感を壊していない
- 共有なしでも参加者映像が読みやすい
- 10 人前後で横 1 列固定に見えない
- モバイルで主要映像が最初に見える
- late join, join / leave, 画面共有, 背景ぼかし, mute の挙動を壊していない
- 変更差分が小さい
- 文字化けがない
- 無関係なコメント変更がない
検証
優先順は次のとおり。
- 変更ファイルの syntax 確認
WebRTC_UI.vue の表示崩れがないか確認- PC で通常会議時の self view サイズ感を確認
- PC で共有あり時に自動で主表示されないことを確認
- 「配信を見る」で既存の共有レイアウトに入ることを確認
- スマホ幅で主要映像の見え方を確認
- 可能なら 2 端末で最低限の join / share 表示だけ確認
検証していない項目は未検証として明記する。
Codex への指示テンプレート
依頼を受けたら、まず次を整理する。
- 変更対象ファイル
- 今回の表示問題
- 変えてよい範囲
- 触ってはいけない範囲
- 最小差分の案
- 既存比率や配置を維持すべきか
- 検証方法
出力では次を簡潔に書く。
- 変更ファイル
- 何をどう小さく / 大きく / 並べ替えたか
- 共有の自動主表示を止めたか
- 既存の共有レイアウト比率を維持したか
- 接続ロジックに触れていないこと
- 未検証項目
禁止事項
- whole-file rewrite
- composable の大規模分割
- SkyWay 接続順序の変更
- subscribeExisting / onStreamPublished の責務変更
- 共有 / blur / mute の実行順序変更
- 無関係な import 並び替え
- 無関係な整形
- コメントの書き換え
- UI 修正に見せかけた設計大改造
- 共有があるだけで自動的に先頭共有を主表示する実装への回帰
- 既存の共有表示比率を不要に変えること
一言でいうと
この Skill は、
「WebRTC の見た目だけを、通常会議時は self view を同格に、共有時は選択式で主表示にし、既存の共有レイアウト比率を保ったまま、WebRTC_UI.vue 中心の最小差分で直す」
ための Skill である。
