【わんコメテンプレート】勉強時間ボード 10デザイン|科目ごとの勉強時間・今日の合計と目標・休憩タイマー・視聴者の『#勉強』で一緒に勉強中の一覧・おつかれさまの札ほか【OBS/勉強配信/作業配信】
- Digital700 JPY


わんコメ(OneComme)のカスタムテンプレートとして使う、勉強時間ボードです。勉強配信で、いま勉強している科目と経過時間、今日の合計と目標を画面の隅に出しておけます。視聴者が『#勉強 英語』とコメントすると一緒に勉強している人の一覧に入り、終わると『おつかれさま』の札で何分がんばったかを発表します。横1280×縦720・背景透明。画面の四隅のどれか(既定は左上)に「いま: 数学 0:42:10」「今日 2:15 / 目標 4:00」の札と進みの棒、その下に科目ごとの今日の合計が出ます。デザインは10種類です。時間と科目は、配信者がコメント欄のコマンドで入れます。 ■ 流れ 1. OBS に入れます。最初は「いま: 停止中 0:00:00」「今日 0:00 / 目標 4:00」と、config.js に書いた科目(初期設定は「英語」「数学」「国語」)の札が出ています 2. 勉強を始めるとき、配信者がコメント欄に `!sd start 数学` と書きます。「いま: 数学 0:00:00」から経過時間が進み、数学の行の枠が光ります 3. 科目を替えるときは `!sd sub 英語`。数学のぶんが数学の合計に足されて、英語が計られます。止めるときは `!sd stop`。手で足すときは `!sd add 30 国語` 4. (有料版)視聴者が「#勉強 英単語」とコメントすると、横の縁の「一緒に勉強中 5人」の一覧に入ります。「#おわり」で外れて、画面の中ほどに「おつかれさま ○○さん 1時間12分」の札が 3 秒出ます 5. (有料版)`!sd break 5` で、画面の中ほどの上に「休憩 4:59」が出て 0 まで数え、0 で「再開しよう」が 2 秒出ます 6. (有料版)今日の合計が目標に届くと、画面の中ほどに「今日の目標 4時間 達成!」の大きな札。`!sd log` で直近 7 日の勉強時間の棒グラフ 7. 次の日は `!sd newday` で今日の合計を 0 に戻します(日ごとの記録は残ります) ■ 特長 ・勉強の札: 「いま: 科目」と大きな経過時間(時:分:秒)、「今日 2:15 / 目標 4:00」と進みの棒。計っているあいだは「計測中」の札が付きます。位置は config.js の position で四隅から選べます ・(有料版)科目ごとの合計: 科目ごとの今日の合計と割合の棒。いま計っている科目は枠が光ります。科目は config.js の subjects(10 文字まで・最大 6 つ)で決め、一覧にない科目を書くと 6 つまで足されます ・(有料版)一緒に勉強: 視聴者の「#勉強 内容」で、勉強の札と反対側の縁の「一緒に勉強中 5人」の一覧に入ります(内容 20 字まで。名前・内容・経過時間。新しい順に最大 8 人、人数は全員ぶん)。「#おわり」で外れて「おつかれさま ○○さん 1時間12分」の札。3 時間(memberTimeoutMinutes)コメントが無い人は自動で外れます ・(有料版)目標の大きな札: 今日の合計が目標に届くと「今日の目標 4時間 達成!」。きらきらと光線の演出つき。cardSeconds(既定 5 秒)のあと消えます。計りが動いたまま届いたときも出ます ・(有料版)休憩タイマー: `!sd break 分`(1〜180)で「休憩 4:59」と数え、0 で「再開しよう」を 2 秒。終わる時刻で数えるので、OBS を再読み込みしても続きから進みます ・(有料版)7日の記録: `!sd log` で、直近 7 日の勉強時間の棒グラフ(点線は目標)と合計。日ごとの記録は 60 日ぶん覚えています ・経過時間は、計り始めた時刻との差で数えます。OBS を再読み込みしても、配信の途中で開き直しても、経った時間ぶん進んだ続きから出ます ・配信者のコマンドは配信者本人のコメントだけ有効(視聴者が「!sd add 600」と書いても合計は変わりません)。全角の「!」・全角スペース・全角の数字も可 ・名前・科目・内容は文字として表示します(タグを書いてもそのまま文字で出ます)。237 時間・10 文字の名前・20 字の内容でも、札からはみ出さないよう文字を縮めて収めます ・時間・科目ごとの合計・日ごとの記録・一緒に勉強の一覧・休憩の終わる時刻は localStorage(キー onecomme-study-v1)に保存され、同じコメントで二度数えません ・config.js で、position・goalMinutes・subjects・cardSeconds・logSeconds・memberTimeoutMinutes・アクセントカラーを変えられます ・アクセントカラー: color を変えると、札の枠・今日の進みの棒・科目ごとの棒・計っている科目の枠と光・「計測中」の札・一覧の色・7日の棒・大きな札の光線ときらきら・光の色が変わります(文字の基本色・札の地は変わりません) ・OBS の「ローカルファイル」で index.html を選んで入れても、自動でわんコメの URL に開き直して動きます ・デザイン10種: ネオン(夜のネオン管の札)/ゆめかわ(パステルの札)/ピクセル(8bit の枠)/和風(茶の札に金の縁)/ミニマル白/ミニマル黒/肉球・猫(やさしい暖色の札)/宇宙(星空の札)/宝石(紺の面に宝石色の縁)/ターミナル(緑の線画の端末) ・背景は透明。外部フォント・外部画像は使わず、システムフォント+プログラム描画で表示。音は鳴りません ■ こう使う 1. 使いたいデザインのzip(例: neon.zip)を、わんコメの「テンプレート」画面にドラッグ&ドロップして追加する 2. 追加したテンプレートの「ここをドラッグしてOBSに入れる」をOBSにドラッグ&ドロップする(OBSの「ローカルファイル」で index.html を選んで入れても、自動でわんコメのURLに開き直して動きます) 3. OBSのブラウザソースの幅1280・高さ720を設定し、画面いっぱいに置く 4. 配信者が `!sd start 数学` と書くと、計りが始まります ■ 動作環境 わんコメ 9.1 以降 + OBS のブラウザソース。表示中はわんコメを起動しておいてください(テンプレートはわんコメ本体の OneSDK を読み込みます)。 ■ 同梱 ・デザイン別テンプレートzip 10個(neon / yumekawa / pixel / wafu / minimal-light / minimal-dark / nikukyu / uchu / houseki / terminal、それぞれ index.html + config.js) ・説明書.txt(導入手順・画面の見方・配信者のコマンド・一緒に勉強・目標の札・7日の記録・状態の記録・無料版との違い・config.jsの変え方・アクセントカラー・デモ表示・動作環境・利用規約) ■ 注意 ・コマンドはわんコメの配信者(自分のチャンネル)のコメントだけが効きます。視聴者のコメントで動くのは、一緒に勉強(有料版)の「#勉強」「#おわり」だけです。 ・このテンプレートは、勉強の時間・科目・目標を表示するための道具です。学習の内容や方法についての助言は行いません(時間と科目は配信者が入力します)。画面の見本に出てくる「英語」「数学」「ユーザーA」などは仮の名前です。 ・科目ごとの合計・一緒に勉強の一覧・おつかれさまの札・休憩タイマー・目標の大きな札・7日の記録は有料版の機能です。 ・画像・動画を生成するAIは使っていません(プログラムで描画)。プログラムと説明文はAIアシスタント(Claude)が作成しています。 ・わんコメ公式のテンプレート追加機能(zipのドラッグ&ドロップ)で導入します。フォルダを直接配置する方法ではありません。 ・コメントを使う機能(配信者のコマンド・視聴者の「#勉強」)が YouTube のコメントに反応するには、わんコメで Google ログインが必要です。 ・記録は OBS のブラウザソースの中(localStorage)に保存されます。別のパソコン・別のブラウザ・わんコメのプレビュー画面とは共有されません。OBS をわんコメと別のパソコンで使う場合は、URL に ?stay=1 を付けてください(説明書に手順があります)。 ・わんコメ本体を無料版で使う場合は、わんコメの規約により概要欄などへのわんコメのクレジット記載が必要です(わんコメ側の決まりです)。 ・配信・動画での使用可、収益化配信(投げ銭・広告収益等)での使用も可、このテンプレートのクレジット表記は不要です。 ・このテンプレート(zip・index.html・config.js等)そのものの再配布・転売は禁止です。 ・ご質問はメッセージでどうぞ。 ▼ わんコメテンプレート 全部入りセット(2,980円) https://moonlitprops.booth.pm/items/8924071

