配信用マルチカウンター(勝・敗・デスをキーで数える)
OBSのブラウザソース用|無料・登録不要|入力内容は外に送りません
対戦ゲームの勝ち負けや、ボス戦のデス数のように、配信中に数え続けたい数字を、画面に重ねて出すカウンターです。数えるのはキーボードの数字キーで、背景は透明なので、ゲーム画面の上にそのまま置けます。
上の枠で、実際に動かせます。枠の中を一度クリックしてから、キーボードの 1・2・3 を押すと、数字が増えます(右下の設定パネルは、URLの末尾に #edit を付けたときだけ出ます)。
https://kamitool.com/tools/counter/app.html
OBSの「ソース」で+を押し、「ブラウザ」を選んで、このURLを貼ります。幅1920・高さ1080が目安です。設定を変えたURLを使いたいときは、上の枠の設定パネルで「この設定のURLをコピー」を押してください。
OBSの中での動作は、実機での確認が済んでいない部分があります。表示が違うときは、お問い合わせからお知らせください。
画面に出る3つの数字
初めに出るのは「勝」「敗」「デス」の3つで、カードのような枠の中に数字が入ります。ラベルの文字、初期値、数字の色は、カウンターごとに変えられます。対戦ゲームなら「勝」「負」「引き分け」、ボス戦の企画なら「挑戦」「撃破」「デス」のように、自分の企画に合わせて書き換えます。文字の大きさは、設定パネルのスライダーで18〜120の間で選べ、初めは40です。
| カウンター | 初めのラベル | 初めの色 |
|---|---|---|
| 1つ目 | 勝 | 水色(#7dd3fc) |
| 2つ目 | 敗 | オレンジ(#f4a261) |
| 3つ目 | デス | ピンク(#f28fad) |
キーボードで数える
数えるときに、マウスで画面を触る必要はありません。次のキーで操作します。数字キーは、キーボード上段のものでも、テンキーでも反応します。
| キー | 動き |
|---|---|
| 1 2 3 | その番号のカウンターを1つ増やす |
| Shift + 1〜3 | その番号のカウンターを1つ減らす |
| 0 を0.6秒以内に2回 | 3つとも、初期値に戻す |
0を1回だけ押しても、数字は戻りません。押し間違いで全部が消えてしまわないように、2回続けて押したときだけ戻す作りです。数字は0より小さくならないので、0の状態でShiftを押しても、マイナスにはなりません。設定パネルの入力欄に文字を打っている間は、キーに反応しません。
OBSの中でキーを使うとき
OBSのブラウザソースは、そのままではキーボードの入力を受け取りません。キーで数えたいときは、OBSの画面でそのソースを右クリックして「操作」を開き、表示された画面を一度クリックしてから、キーを押します。もう1つ知っておきたいのは、このカウンターは、ページの中でキーを受け取る作りだという点です。ゲームを遊んでいる最中に、ゲームの画面でキーを押しても、カウンターは反応しません。数えるときは、OBSの「操作」の画面か、ふだんのブラウザで開いたこのページに、キーボードの入力が向いている必要があります。
数えた値が残るしくみ
数えた値は、お使いのブラウザの保存領域(ローカルストレージ)に書き込まれます。ページを閉じても、OBSを終了しても、同じ環境で開き直せば、前の数字から続けられます。設定パネルの「初期値」の欄は、「リセットしたときに戻る数」です。書き換えると、いまの数もその値に変わります。
起動したとき、保存された数があれば、それが優先されます。URLの末尾に初期値を書いておいても、保存された数のほうが先に使われます。「全部を初期値に戻す」を押すと、保存された数も初期値に書き換わります。「初期設定に戻す」を押すと、保存と設定そのものが消えます。OBSの中のブラウザは、ふだん使っているブラウザと、保存の場所が別になることがあります。配信の前に、OBSの画面で数字を確かめておくと安心です。
設定の例
設定パネルを触ると、画面の下にある欄に、いまの設定を含んだURLが作られます。「この設定のURLをコピー」を押して、OBSの「URL」欄に貼ると、同じ見た目で使えます。たとえば、次のようなURLになります。
https://kamitool.com/tools/counter/app.html#label1=勝&label2=負&label3=引き分け&size=56
この例は、ラベルを「勝」「負」「引き分け」に変えて、大きさを56にしたものです。手で書かなくても、設定パネルを触れば、自動で作られます。
できないこと
- 2台のパソコンの間で、数字を共有すること(数字は、その環境のブラウザの中にだけ残ります)
- ゲームの勝敗を、自動で読み取ること(数えるのは、自分の手です)
- この無料版では、置く場所(左下)、カウンターの個数(3つ)、見せ方は決まっています
場面ごとの、ラベルの付け方
- フレンド戦:ラベルを「勝」「負」「引き分け」にします。3つの色を、勝は水色、負はオレンジのままにして、引き分けだけ、灰色に近い色へ変えると、視聴者が、見分けやすくなります。
- 耐久配信:「挑戦」「クリア」「デス」のように、並べます。デスの数字だけ大きく見せたいときは、ツール全体の大きさを上げ、ほかの2つは、気にしない作りにします。
- 周回の企画:「周回数」「ドロップ」「失敗」のように、数えたいものを、3つ決めます。周回のたびに1を押し、ドロップしたときに2を押す、という運用ができます。
カウンターを4つ使えますか?
無料版は3つまでです。4つ目のカウンターは、有料版で使えます。無料版でも、3つ目のラベルを書き換えて、使い道を変えられます。
数字が0より小さくなりません。
減らす操作は、0で止まる作りです。マイナスの数を表示することは、できません。数字を、0より下げたいときは、別の数え方(引き算ではなく、別のカウンターに分ける)を、考えてください。
0を2回押しても、数字が戻りません。
0を、0.6秒以内に2回続けて押す必要があります。ゆっくり押すと、1回ずつの扱いになり、戻りません。日本語入力がオンの場合は、キーが届かないこともあるので、半角英数に切り替えて、試してください。
配信のたびに、数字を0から始めたいです。
設定パネルの「全部を初期値に戻す」を押すか、0を素早く2回押します。初期値の欄の数字を、0以外にしておくと、戻る先も変えられます。
配信の前に確かめること
- OBSの画面で、3つの数字が、思った値になっている(前の配信の数が、残っていないか)
- OBSの「操作」を開いて、キーの1・2・3を押し、数字が増えること
- Shiftを押しながら、数字キーを押して、数字が減ること
- 色とラベルが、ゲームの映像の上でも、読めること
- 設定パネルが、映り込んでいないこと(URLの末尾に「#edit」が付いていない)
動作の細かい点
数字が変わるたびに、増えた数字が、ひと呼吸だけ弾むように動きます。この動きは、無料版でも入っています。ラベルが変わっても、数字の位置は、変わりません。3つのカウンターは、横に並んで、画面の左下に出ます。数字の表示を、縦に並べる、または、置く場所を変える設定は、有料版にあります。
数字の更新は、押した瞬間に、画面とブラウザの保存領域の、両方に反映されます。保存のタイミングを、選ぶ設定は、ありません。
ほかのツールとの組み合わせ
数えた数を、目標と見比べたいときは、目標カウンターと、並べて置く方法があります。ゲームの名前と、デス数も、出したいときは、プレイ中バナーを、別のソースとして、重ねます。数字のツールが、画面の同じ場所に、重なると、読めなくなるので、置き場所を、先に決めておいてください。
無料版の初めの値と、変えられる範囲
| 項目 | 初めの値 | 無料版では |
|---|---|---|
| ラベル | 勝・敗・デス | 書き換えられる |
| 初期値 | 0 | 書き換えられる |
| 数字の色 | 水色・オレンジ・ピンク | 書き換えられる |
| 文字の大きさ | 40(18〜120) | 変えられる |
| 見せ方 | カード | 変えられない |
| 並び方 | 横並び | 変えられない |
| 置く場所 | 左下 | 変えられない |
| フォント | ゴシック | 変えられない |
| 数字が変わる動き | オン | 変えられない |
| ブラウザへの保存 | オン | 変えられない |
数え間違いを減らす工夫
配信中に数を数えるときは、数え間違いが、一番の悩みどころです。数え間違いを減らすための考え方を、いくつか挙げます。まず、数える対象を、1つの出来事に絞ります。「勝ち」「負け」のように、結果がはっきりしているものは、押し間違えにくく、あとで数字を直す必要も、少なくなります。次に、ゲームの進行と、数える動作を、セットにしておきます。たとえば、「試合が終わった画面になったら、必ず数える」のように、きっかけを決めておくと、数え忘れが、減ります。
数え間違いに気づいたときは、Shiftを押しながら、数字キーを押して、1つ戻せます。何回も戻したいときは、設定パネルの「初期値」の欄を使って、数字を直接入れ直せます。ただし、この操作は、配信の画面に、設定パネルが映らない状態(OBSの「操作」の画面の中)で、行ってください。
4つ目のカウンター、目標値と進捗バー、見せ方3種(文字だけ・板・丸い帯)、縦並び、置き場所9通り、フォント4種は、有料版で変えられます。
BOOTHで有料版を見る(400円)この無料版は、このページのままご利用いただけます。有料版は、運営者が別に配布しているものです。
あわせて使われるツール
ツールの内容や使える範囲については、免責事項もご覧ください。