わんコメ（OneComme）のカスタムテンプレートとして使う、TRPG進行度バーです。TRPG 配信で、いまシナリオのどのあたりかを『導入→探索→クライマックス→エンディング』の進行度バーで見せます。途中から見に来た視聴者にも、いまの場面がひと目で伝わります。章の名前は自由に変えられます。横1280×縦720・背景透明。画面の上（または下）に、横長のバーがひとつ出ます。デザインは10種類です。段の名前は config.js に書いておき、場面が進んだら、配信者がコマンドで切り替えます。 ■ 流れ 1. config.js の steps に、段の名前を書きます（最初は「導入」「探索」「クライマックス」「エンディング」。有料版は 8 段まで） 2. OBS に入れます。バーは、最初から出ています（1 段目が光った状態） 3. 場面が進んだら、配信者がコメント欄に `!prog next` と書きます。次の段が光り、前の段にチェックの印が付いて、駒が進みます。戻すときは `!prog back`、番号で飛ぶときは `!prog 4` 4. シナリオ名は `!prog title シナリオ名` 5. （有料版）いまの段の下に一言添えるときは `!prog note 洋館の2階` 6. （有料版）最後に `!prog log` と書くと、各段に入った時刻の一覧が出ます 7. 次の配信の前に `!prog reset` で、最初の段に戻します ■ 特長 ・シナリオ名（左）・段の一覧（丸と名前）・進んだ線・いまの段にのる駒を、横長の1本のバーにまとめて表示。いまの段は光って下線が付き、済んだ段にはチェックの印が付きます ・段の名前は自由（config.js の steps）。マーダーミステリーなら「自己紹介→調査→議論→投票→真相」のようにも使えます。有料版は 8 段、無料版は 4 段まで ・位置は画面の上（既定）か下（config.js の position）。バーは画面の隅に細長く出るだけなので、ゲーム画面やココフォリアの画面にかぶせて使えます ・（有料版）段が進むとき、駒が横へ動いて、光の輪が広がります（`!prog next`・`!prog back`・`!prog 番号`） ・（有料版）段の名前の大きな札: 段が進んだとき、「いまの場面 2 / 4」と段の名前が画面に大きく数秒出ます（cardSeconds で秒数を変更。0 で出さない）。バーとは重ならない場所に出ます ・（有料版）`!prog note`: いまの段の下に小さな補足の札（例「洋館の2階」）。書いた段だけに出ます ・（有料版）`!prog log`: 各段に入った時刻を覚えていて、「導入 0:00〜0:42」「探索 0:42〜1:35」のような一覧にします。配信後の振り返りや、次回の時間配分の目安に ・配信者のコマンドは配信者本人のコメントだけ有効（視聴者が「!prog next」と書いても変わりません）。全角の「！」・全角スペースも可 ・段の名前・シナリオ名・補足は文字として表示します（タグを書いてもそのまま文字で出ます）。長い名前でも、バーからはみ出さないよう文字を縮めて収めます ・いまの段・各段に入った時刻・シナリオ名・補足・表示状態は localStorage（キー onecomme-trpgprogress-v1）に保存され、OBS を再読み込みしても、セッションの途中で OBS を開き直しても同じ状態が続きます。同じコメントで二度動きません ・config.js で、steps・title・position・cardSeconds・logSeconds・アクセントカラーを変えられます ・アクセントカラー: color を変えると、バーの枠・シナリオ名の札・進んだ線・済んだ段の丸・駒・いまの段の光・補足の札・段の名前の札・進行の記録の色が変わります（文字の基本色・バーの地は変わりません） ・OBS の「ローカルファイル」で index.html を選んで入れても、自動でわんコメの URL に開き直して動きます ・デザイン10種: ネオン（夜のネオン管のバー）／ゆめかわ（パステルのバー）／ピクセル（8bit の枠）／和風（茶のバーに金の縁）／ミニマル白／ミニマル黒／肉球・猫（やさしい暖色のバー）／宇宙（星空のバー）／宝石（紺の面に宝石色の縁）／ターミナル（緑の線画の端末） ・背景は透明。外部フォント・外部画像は使わず、システムフォント＋プログラム描画で表示。音は鳴りません ■ こう使う 1. 使いたいデザインのzip（例: neon.zip）を、わんコメの「テンプレート」画面にドラッグ＆ドロップして追加する 2. 追加したテンプレートの「ここをドラッグしてOBSに入れる」をOBSにドラッグ＆ドロップする（OBSの「ローカルファイル」で index.html を選んで入れても、自動でわんコメのURLに開き直して動きます） 3. OBSのブラウザソースの幅1280・高さ720を設定し、画面いっぱいに置く 4. config.js の steps を自分のシナリオに書き換え、配信者が `!prog next` と書くと、段が進みます ■ 動作環境 わんコメ 9.1 以降 ＋ OBS のブラウザソース。表示中はわんコメを起動しておいてください（テンプレートはわんコメ本体の OneSDK を読み込みます）。 ■ 同梱 ・デザイン別テンプレートzip 10個（neon / yumekawa / pixel / wafu / minimal-light / minimal-dark / nikukyu / uchu / houseki / terminal、それぞれ index.html + config.js） ・説明書.txt（導入手順・画面の見方・配信者のコマンド・経過時間の一覧・状態の記録・無料版との違い・config.jsの変え方・アクセントカラー・デモ表示・動作環境・利用規約） ■ 注意 ・コマンドはわんコメの配信者（自分のチャンネル）のコメントだけが効きます。視聴者のコメントでは動きません。 ・このテンプレートは、いまの場面を表示するための道具です。最初に入っている「導入」「探索」「クライマックス」「エンディング」は例で、見本の「シナリオ名」「洋館の2階」は仮の値です。特定のシナリオ・ルールブックの文章や図は含まれていません。config.js を自分のシナリオに書き換えてお使いください。 ・駒の移動と光の演出・段の名前の大きな札・補足（note）・経過時間の一覧（log）・8 段は有料版の機能です。 ・画像・動画を生成する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