🔌 配信サイトとの接続
🟣 Twitch
ログインはフォロワー数の取得に必要です(コメントの受信は、ログインしなくても匿名で読めます)。お願いする権限は「チャットを読む」だけで、書き込みやアカウントの変更はできません。トークンはこのブラウザの中にだけ保存されます。
コメント数・早押しで使います。早押しの「出題」を押した時に止まっていたら、自動で受信を始めます。
🔴 YouTube Live
- APIキーは Google Cloud のコンソールで「YouTube Data API v3」を有効にして作ります(無料)。1日の上限は 10,000 です。
- コメントの取得は回数に上限があるため、YouTube のコメントは早押しの受付中だけ取得します。
- コメント数(コメントカウンター)は、YouTube API の仕様による上限のため YouTube では使用できません。Twitch のみ対応です。
- APIキーはこのブラウザの中にだけ保存されます。配信画面に映さないでね。
👥 フォロワーカウンター
🟣 Twitch のフォロワー
他の人のチャンネルも監視できます(総数のみ)。🔌接続タブで Twitch にログインしておいてね。 停止中
🔴 YouTube の登録者数
- YouTube が公開している登録者数は上3桁に丸めた値です(例:12,345人 → 12,300人)。1人ずつ増えるリアルタイム表示にはなりません。
- 登録者数を非公開にしているチャンネルは表示できません。
- 🔌接続タブの APIキーが必要です。1回の確認で API を 1 使います(120秒ごとなら1日約720)。
停止中
🎨 表示
位置・大きさ・細かい色は 🪟表示タブ で変えられます。
⏱️ 同時視聴タイマー
⚙ 設定
💡 スタートを押すと「−5」から数え始め、0で本編スタート、そのあとは数え上がっていきます。配信画面のタイマーは OBS の中で自分で進むので、通信が少し遅れてもずれません。
🎨 表示のバリエーション
文字・帯・枠の形や色は 🪟表示タブ でさらに細かく変えられます。
💬 コメントカウンター (Twitch のみ)
🔴 YouTube は、YouTube Data API の仕様による1日の取得上限があるため、コメントカウンターは使用できません。Twitch のコメントだけを数えます。
🏆 ユーザーごと
| # | ユーザー | コメント数 |
|---|
⚙ 数え方
🎨 表示
総コメント数
ランキング
❓ 早押しクイズ
🙈 このタブには正解が出ています。配信画面(画面共有・ウィンドウキャプチャ)に映さないでね。
📜 受付中のコメント(判定の確認用)
📝 問題リスト
入力するのは 正解1つとポイント だけ。ひらがな・カタカナ・ローマ字・数字(3 と 三)・のばす音・全角半角・大文字小文字・絵文字・顔文字・Twitchスタンプの違いは、アプリが自動で同じ扱いにします。漢字の読みも自動で作ります(下の候補を確認してね)。
🏆 点数(集計スタートから集計終了まで)
| # | ユーザー | 正解数 | 点数 | 手で直す |
|---|
⚙ ルール
🏁 一番早い人は、コメントが届いた順ではなく 配信サイトがコメントを受け取った時刻 で決めます。YouTube を使う時は、YouTube のコメントが届くまで数秒待ってから正解者を決めます。
⚠ 正解のコメントは他のリスナーにも見えるので、最初の正解が出たあとは答えがバレます(1人1回だけ・正解者1人がおすすめ)。
🎨 表示
出題・正解者
ランキング
✏️ 画面ホワイトボード
マウス・ペンタブ・タッチで書けます(ペンタブは筆圧に対応。ペンのお尻の消しゴムも使えます)。書いた線は、書いている途中から配信画面にも出ます。ボードの縦横の比率は 🪟表示タブ の「ホワイトボード」の枠の形と同じです。
🪟 表示(配信画面・自分の画面)
🪟 自分の画面に出す(小窓)
「画面の大きさ」は、小窓とOBS用表示の基準の大きさです。配信の解像度(1280×720 や 1920×1080)と同じ比率にしてね。
📺 配信画面への出し方
🟩 簡単モード:OBSの設定なしで配信画面に出す
- 出したい表示の「出し先」で 🪟 小窓 にチェック(初期値でオン)
- 小窓の背景を緑にする → 🪟 小窓を開く
- OBSで ソース追加 → ウィンドウキャプチャ → ウィンドウに小窓を選ぶ。キャプチャ方法は 「Windows 10 (1903以降)」
- ソースを右クリック → フィルタ → エフェクトフィルタの ＋ → クロマキー(色の種類:緑)
- タイトルバーや枠が映る時は、OBSのプレビューで Altキーを押しながらソースの端をドラッグ して切り落とす
⚠ 📌最前面の小窓は開いている限り取り込めます。🪟ふつうの窓は、最小化すると止まり、ほかの窓に完全に隠れると更新が止まることがあります。ホワイトボードの背景を「透明」にすると、緑の部分が抜けます。
📡 OBS(配信画面)に出す
- OBSの ツール → WebSocketサーバー設定 で「WebSocketサーバーを有効にする」にチェック。「接続情報を表示」でポートとパスワードを確認
- 下にポートとパスワードを入れて 接続
- 出したい表示の「出し先」で 📡 OBS にチェック(初期値でオン)
- 下の 📥 OBS用の表示ファイルを保存 を押して、HTMLファイルをPCに保存(最初の1回だけでOK)
- OBSで ソース追加 → ブラウザ →「ローカルファイル」にチェック → 保存したファイルを選ぶ。幅・高さは上の「画面の大きさ」と同じ(例 1920×1080)がおすすめ
💡 OBSが同じPCで動いているなら、ホストは 127.0.0.1 がおすすめです。
🆕 アプリの更新で表示の描き方が変わりました。OBS用の表示ファイルを保存し直して、OBSのブラウザソースで選び直してね。
💡 なぜファイル?:このアプリは HTTPS で公開しているので、OBSのブラウザソースにURLで読み込むと、OBSとの接続(ws://)が止められてしまいます。PCに保存したファイルならこの制限がありません。見た目や配置はアプリから毎回送られるので、設定を変えても保存し直す必要はありません。
⚠ OBSのパスワードを設定している場合、保存したファイルの中にパスワードが入ります。人に渡さないでね。
💡 Yomi Frost Web と同じOBSに同時につないでも大丈夫です(表示ファイルは別々)。
📐 配置
枠をドラッグで移動、右下の三角でサイズ変更。小窓・OBSも同じ配置になります。枠をクリックすると、その表示の設定に切り替わります。うすい枠は「表示しない」になっているものです。
🎨 表示ごとの見た目
⚙️ 設定
💾 バックアップ
設定・問題リスト・点数・ボードの絵をまとめて1つのファイルに保存/読み込みできます(APIキーとTwitchのログインは含みません)。
🧹 初期化
ℹ このアプリについて
Kaki Frost Web v1.0.0 / made by compact
使用ライブラリ:WanaKana(MIT・ローマ字⇄かな)/ kuromoji.js(Apache-2.0・漢字の読み。辞書は IPAdic を jsDelivr から読み込みます)