【わんコメテンプレート】コメントで育つペット 10デザイン｜コメントで経験値・5段階に進化・配信をまたいで育つ【OBS/視聴者参加】

わんコメ（OneComme）のカスタムテンプレートとして使う、コメントで育つ配信ペットです。視聴者さんのコメントが経験値になり、丸いもちもちの生き物（SVG/CSSで描画、画像素材は使用していません）が5段階に進化していきます。配信をまたいでずっと育ち続けるので、常連さんと一緒にペットを育てる楽しみが生まれます。デザインは10種類です。

■ できること

・視聴者さんのコメント1件で経験値（config.js の expPerComment、既定1）がたまり、配信をまたいで累計で育つ

・スパチャ・ギフト付きのコメントは expPerGift（既定10）の経験値。しきい値（config.js の levels）に届くたびに「Lv.5 になった！」と吹き出しでお知らせ

・見た目は5段階：たまご（Lv.1）→ ちび（Lv.2〜4）→ こども（Lv.5〜9、耳）→ おとな（Lv.10〜19、耳と羽）→ でんせつ（Lv.20〜、王冠と光の輪）。段階が変わる瞬間は光る変身演出（2秒）と紙吹雪

・コメントに「なでなで」「なでる」（petWords、変更可）が含まれるとハートが出て「〇〇さん ありがとう」。「ごはん」「おやつ」（foodWords、変更可）が含まれると食べる動きと一緒に経験値が増える（同じ人はクールダウンあり）

・状態確認：URL に ?view=status を付けたソースで、名前・レベル・累計コメント数と、いちばんお世話してくれた人（お世話回数）上位5人を表示（480×540）

・記録の書き出し・読み込み（?view=export / ?view=import）と全消去（?view=reset、2回押しで確定）。パソコンの買い替えやバックアップに

・配信者本人と BOT（Nightbot・StreamElements、追加可）は数えない。同じ人はユーザーIDで見分けるので、名前を変えても同じ人として数える

・わんコメにつないだ時点までのコメントは、演出を出さずに数えるだけ。数えたコメントの番号も保存するので、OBS でソースを再読み込みしても二重に数えない

・経験値のしきい値・名前・反応する言葉・クールダウンなどは config.js で自由に変更可能

・背景は透明。外部フォント・外部画像は使わず、システムフォント＋プログラム描画（SVG/CSS）で表示

・表示サイズは480×480px（状態確認は480×540px）のブラウザソース枠に収まる設計

・デザイン10種：ネオン／パステル（ゆめかわ）／レトロゲーム風ドット／和風（木札・朱印）／ミニマル白／ミニマル黒／肉球・猫／宇宙・星空／宝石／ターミナル（緑文字）。生き物の形は共通で、配色・線・質感がデザインごとに変わります

■ こう使う

1. 使いたいデザインのzip（例: neon.zip）を、わんコメの「テンプレート」画面にドラッグ＆ドロップして追加する

2. 追加したテンプレートの「ここをドラッグしてOBSに入れる」をOBSにドラッグ＆ドロップする

3. OBSのブラウザソースの幅480・高さ480を設定する

4. 配信サイトに接続すると、視聴者さんのコメントで経験値がたまり、ペットが育っていく

5. 状態確認を出したいときは、同じテンプレートをもう1つOBSに入れて URL の末尾に ?view=status を付け、幅480・高さ540にする

■ 動作環境

わんコメ 9.1 以降 ＋ OBS のブラウザソース。表示中はわんコメを起動しておいてください（テンプレートはわんコメ本体の OneSDK を読み込みます）

YouTube のコメントで数えるには、わんコメ側で Google ログインが必要です（わんコメ 9 系の仕様）。

ツイキャス・Twitch なども、わんコメでそれぞれの配信サイトに接続すれば育てられます。

■ 同梱

・デザイン別テンプレートzip 10個（neon / yumekawa / pixel / wafu / minimal-light / minimal-dark / nikukyu / uchu / houseki / terminal、それぞれ index.html + config.js）

・説明書.txt（導入手順・育ち方・記録の置き場所・状態確認の出し方・記録の書き出し/読み込み/全消去・config.jsの変え方・URLパラメータの例・動作環境・利用規約）

■ 注意

・OBS をわんコメと別のパソコンで使う場合は、URL に stay=1 を付けてください（説明書に手順があります）。

・画像・動画を生成するAIは使っていません（プログラムで描画）。プログラムと説明文はAIアシスタント（Claude）が作成しています。

・わんコメ公式のテンプレート追加機能（zipのドラッグ＆ドロップ）で導入します。フォルダを直接配置する方法ではありません。

・YouTube のコメントで数えるには、わんコメで Google ログインが必要です。

・経験値・レベル・お世話の記録は OBS のブラウザソースの中（localStorage）に保存されます。OBS に入れたソースだけで育ち、別のパソコン・別のブラウザ・わんコメのプレビュー画面とは共有されません（書き出し・読み込みで移せます）。

・わんコメ本体を無料版で使う場合は、わんコメの規約により概要欄などへのわんコメのクレジット記載が必要です（わんコメ側の決まりです）。

・配信・動画での使用可、収益化配信（投げ銭・広告収益等）での使用も可、このテンプレートのクレジット表記は不要です。

・このテンプレート（zip・index.html・config.js等）そのものの再配布・転売は禁止です。

・ご質問はメッセージでどうぞ。