【配信】勝ち抜き戦の表 第2弾 12デザイン｜2〜32人・勝った方の名前を押すと次の回戦へ｜左から右／左右から中央の2通り・背景透過・OBS用・設定ボタン(⚙)つき

配信画面に置きっぱなしにする「トーナメント表」です。参加者を書くと山が組み上がり、勝った方の名前を押すと、その人が次の回戦へ上がります。線は枠の位置から引き直すので、人数が何人でも、名前が長くても、必ず枠と枠が繋がります。同じ機能のまま、見た目だけ違うものを12デザインそろえました。

単一HTML・インストール不要・アカウント不要・オフライン動作。背景は透過しているので、そのまま画面に重ねられます。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ 先に、大事なところが2つ

━━━━━━━━━━━━━━━━━━

このツールは視聴者のコメントを読みません。自動集計もしません。勝ち負けは、OBSの「対話」の画面で、勝った方の名前をクリックして入れます。外部サービスにも配信サイトにも繋がないので、アカウントもAPIキーも要りません。

勝敗は「開いている間だけ」の物で、溜め込みません。ブラウザソースを更新したり、OBSを閉じて開き直すと、表は⚙に入っている状態（買ったときは勝敗なし）に戻ります。何日もぶんの記録が勝手に積み上がらないよう、わざとそうしてあります。続きから始めたいときは⚙を開いてください。「いまの勝敗」の欄に、その時点の表がそのまま入っています。そのまま「保存して閉じる」を押せば、次に開いたときはその形から始まります。

━━━━━━━━━━━━━━━━━━

◆ 収録している12デザイン

━━━━━━━━━━━━━━━━━━

・arena.html … 競技場（濃紺の板に白い線。回戦の見出しが小さな帯になります）

・gold.html … 金の縁取り（黒地に金の二重枠。優勝の枠だけ地色が反転します）

・neon.html … ネオン（枠も線も光ります。たまにゆっくり明滅します）

・pixel.html … ドット絵（角を丸めません。線もかくかくのまま引きます）

・terminal.html … 端末（等幅。見出しに $、勝ち上がった名前の後ろに < が付きます）

・paper.html … 紙とペン（明朝。枠は下線だけ。勝った枠の下線が太く差し色になります）

・chalk.html … 黒板（木枠つき。線は少し太く、粉っぽく光ります）

・led.html … 電光掲示板（黒い筐体に光る文字。細かい点の網がかかります）

・glass.html … すりガラス（薄く曇った板に、上から光が差します）

・metal.html … 金属（ヘアラインの入った板。枠は彫り込んだ形です）

・washi.html … 和風（生成りの紙に朱の線。見出しの下に朱の罫が1本）

・minimal.html … 極細の線（板を敷きません。枠は下線だけで、線が主役になります）

中身と機能は12種とも同じです。見た目だけが違います。

━━━━━━━━━━━━━━━━━━

◆ 参加者を入れる

━━━━━━━━━━━━━━━━━━

⚙の「参加者」の欄に、1行に1人ずつ書きます。2人から32人まで、名前は24文字までです。

上から順に第1シード・第2シード…として置かれます。第1シードと第2シードは決勝まで当たりません（標準の組み方です）。枠の大きさは「自動」だと 2 / 4 / 8 / 16 / 32 から人数に合う物が選ばれます。人数が 4・8・16・32 ちょうどでないときは、上位のシードから順に不戦勝が入り、その人は自動で次の回戦へ上がります（5人なら8枠。第1・第2・第3シードが不戦勝で、第4と第5だけが1回戦を戦います）。下の行の試合数は「参加人数 − 1」です。

━━━━━━━━━━━━━━━━━━

◆ 勝敗の入れかた

━━━━━━━━━━━━━━━━━━

ソース一覧でこの表を右クリック →「対話」を開いてから操作します。配信画面そのものはクリックを受け取らないので、誤って勝敗が入ることはありません。

・勝った方の名前をクリック … その人が次の回戦へ上がります。負けた方には取り消し線が付きます

・同じ名前をもう一度クリック … その試合の結果を取り消します

・反対の名前をクリック … 勝者を入れ替えます

・Backspace キー … いちばん最後に決めた試合を取り消します

・0 キー … 勝敗を全部消します（1回では消えません。もう一度 0 を押すと消えます。Esc で取り消し）

・S キー … ⚙の設定を開きます

勝者を入れ替えると、その人のその先の回戦の結果だけが消えます。関係のない山の結果は残ります。不戦勝の枠は押しても何も起きません。優勝が決まると、優勝の枠が差し色になってゆっくり明滅し、下の行も「優勝 ◯◯」に変わります。

━━━━━━━━━━━━━━━━━━

◆ 並べ方は2通り

━━━━━━━━━━━━━━━━━━

・左から右へ（初期）… 参加者が左端に縦に並び、右へ勝ち上がります。横長です

・左右から中央へ … 左右から中央へ勝ち上がり、優勝が真ん中に出ます。横幅は広がりますが、縦は半分で済みます

━━━━━━━━━━━━━━━━━━

◆ ほかに変えられるところ

━━━━━━━━━━━━━━━━━━

・見出し（空にすると消えます）

・枠の大きさを自分で決める（2 / 4 / 8 / 16 / 32）

・シード番号を消す／回戦の見出しを消す／優勝の欄を消す

・不戦勝の枠の文字を消す（枠だけ残ります）／下の行を消す

・優勝の枠の明滅を止める

・画面の九か所から置き場所を選ぶ

・大きさ（0.3〜4倍）と、板の下地の濃さ（0にすると文字と線だけ）

・配色はデザインごとに3〜4色。文字・差し色・板の色を自分で指定することもできます

・表示専用にする（クリックもキーも⚙も効かなくなります）

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

ソースを右クリック →「対話」→ 画面にマウスを乗せると右上に ⚙ が出ます。参加者も、色も、枠の大きさも、いまの勝敗も、そこから変えて「保存して閉じる」だけです。普段 ⚙ は見えないので配信画面には映りません。歯車が見つからないときは、対話ウィンドウ内で S キーでも開きます。設定は保存され、OBSを再起動しても残ります。「設定を初期化」でいつでも元に戻せます。

設定の保存先はブラウザごとに別々です（localStorage の仕様）。Chromeで開いて設定してもOBS側には反映されませんので、OBSで使うぶんは対話の画面の中で設定してください。同じデザインを複数のシーンで別々に使いたいときは、URLの末尾に ?key=a ?key=b を付けて保存先を分けてください。

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・視聴者コメントの集計はしません。勝ち負けは配信者が手で入れます

・外部アプリ・API・配信サイトとの連携はありません

・効果音はありません（表示のみです）

・勝敗は保存されません。開き直すと⚙に入っている形に戻ります（続きから始めたいときは、⚙を開いて「保存して閉じる」を押してください）

・手元のブラウザで操作して、OBS側に反映させるという使い方はできません。勝敗はOBSの「対話」の中で入れてください

・1人ずつ勝ち上がるシングルエリミネーション専用です。敗者復活戦・3位決定戦・ダブルエリミネーションには対応していません

・点数は出ません（勝った人が上がるだけです）

・組み合わせは自動で作りません。並び順はご自分で決めてください

・出せるのは32人までです

・枠からはみ出しそうなときは、表ごと自動で縮んで収まります。小さくなりすぎたときは、ブラウザソースの幅・高さを広げてください

━━━━━━━━━━━━━━━━━━

◆ 動作環境

━━━━━━━━━━━━━━━━━━

OBSのブラウザソース（Chromium）で使うために作っています。こちらでの動作確認は Chrome / Edge で行いました。Streamlabs など、ブラウザソースがある配信ソフトでも同じ形で読み込めます。ネット接続は不要で、外部へは一切通信しません（Webフォントも広告も入っていません）。書体はお使いのPCに入っているものを使います。

枠も線も文字もHTMLの図形なので、どんな大きさでもにじみません。画面に出しているのは「いまの表」だけで、履歴を溜め込みません。動画ではないので、容量はごくわずかです。

━━━━━━━━━━━━━━━━━━

◆ 同梱

━━━━━━━━━━━━━━━━━━

HTML 12本 ／ はじめにお読みください.txt ／ READ ME FIRST (English).txt ／ 利用規約.txt ／ Terms of Use (English).txt