【わんコメ】コメントドロップ|コメントが降って積もる 参加型パズル配信オーバーレイ
- Digital700 JPY





━━━━━━━━━━━━━━━━━━━━━━ コメントドロップ / Comment Drop コメントが降って、積もって、つながって消える。 ━━━━━━━━━━━━━━━━━━━━━━ わんコメ(OneComme)と連携して動く、視聴者参加型の「落ち物パズル」配信オーバーレイです。 コメントが1件届くと、半透明のしずくが1つ、画面上から落ちてきます。 しずくの中にはコメントした人の名前とコメント本文が入っていて、 下から順番に積み上がっていきます。 同じ種類のコメントが上下左右で4つそろうと、ぽんっと消えて連鎖。 連鎖が伸びるほど、盤面が大きく揺れます。 そして視聴者のリアクションやスパチャが届くと、盤面がぐらぐら揺れます。 「コメントが増える」「反応が増える」ことが、画面の中で目に見えるかたちになります。 背景は完全透過なので、OBS のブラウザソースとして配信画面にそのまま重ねられます。 ■ こんな配信におすすめ ・雑談配信で、画面に「動くもの」が欲しい ・コメントが流れて消えてしまうのがもったいない ・視聴者に「もっと反応したくなる」しかけを置きたい ・作業配信・BGM配信の待機画面をにぎやかにしたい ■ できること ◆ 1コメント = 1つのしずく コメントした人の名前とコメント本文が、しずくの中に表示されます。 ◆ コメントの中身で色が変わる(全5色) 「草・w」「かわいい・すき」「こんにちは・おつ」「絵文字」「その他」を 正規表現で判定して振り分けます。判定ルールは設定ファイルで自由に書き換えられます。 ※AI・機械学習・外部APIは一切使っていません。ローカルだけで動きます。 ◆ 4つつながって消える → 連鎖 連鎖数が画面に大きく表示され、連鎖が伸びるほど揺れが強くなります。 ◆ 反応の大きさで揺れが変わる リアクション < メンバー加入 < ギフト < スパチャ(金額で4段階)< 大連鎖 の順に、揺れがどんどん大きくなります。 ◆ 短時間に大量のリアクションが来ると「REACTION OVERLOAD」 盤面がいっぱいまで積み上がると「COMMENT OVERLOAD」で崩れて、また最初から。 放っておいても勝手に回り続けます。 ◆ 半透明のガラス質感 落ちている間はより透けて、着地するとふっと色が濃くなります。 透け具合は設定ファイルの数値ひとつで変えられます。 ◆ 配置サイズの自動調整 OBS のブラウザソースが小さくても、はみ出す分は自動で縮小して収まります。 (「画面の上が切れる」ことがありません) ■ 導入方法(3ステップ) 1. 解凍したフォルダを、わんコメのテンプレートフォルダの custom の中に入れる 2. OBS で「ブラウザ」ソースを追加し、下記URLを入力 http://localhost:11180/templates/custom/<フォルダ名>/index.html 幅・高さは 420 × 920 を推奨 3. 配信画面に重ねて位置を合わせる(背景は完全透過です) わんコメのテンプレートフォルダを使わず、ローカルファイル指定でも動作します。 くわしい手順は同梱の README.md をご覧ください。 ■ 変えられるところ(設定ファイル config.js) ・盤面のマス数(横6×縦12)・マスの大きさ ・5色のパステル配色 / しずくの透け具合 ・コメントの色分けルール(正規表現) ・消去に必要な数(初期4個)・落下スピード ・揺れの強さ・減衰・回転量、イベントごとの揺れ量 ・パーティクル/画面揺れ/ゆらゆら待機モーションの ON/OFF ・負荷対策の上限値(同時しずく数・パーティクル数など) CSS変数でテーマ色とフォントもまとめて差し替えられます。 ■ 対応プラットフォーム ・コメント連動:わんコメが対応している配信サイト(YouTube / Twitch / ニコニコ生放送 / TikTok / ツイキャス など)で動作します。 ・スパチャ・メンバー加入・ギフト連動:主に YouTube を想定しています。 他サイトでは届くデータが異なるため、通常コメント扱いになる場合があります。 ・リアクション連動:YouTube ライブの「リアクション絵文字」が対象です。 (👍高評価ボタンとは別の機能です) わんコメ側でリアクション機能が有効になっている必要があります。 ■ 動作環境 ・わんコメ(OneComme)※動作確認バージョン:【要記入】 ・OBS Studio ※動作確認バージョン:【要記入】 ・インターネット接続(Webフォントの読み込みに使用します。オフラインでも 端末のフォントで代替表示されます) ■ ご注意 ・わんコメを無料でお使いの場合、わんコメ公式の規約により 配信画面へのクレジット表示が必要です(本商品は OneSDK を利用しています)。 ・配信サイトから届くデータの内容はサイトごとに異なります。 スパチャ・メンバー・ギフトの判定は最善努力の実装です。 必要に応じて js/onecomme.js の分岐を調整してください(README に解説があります)。 ・HTML / CSS / JavaScript で作られています。動作の仕組みや改造については README.md に日本語コメント付きで解説を入れてあります。 ■ ライセンス ・購入者ご自身の配信(収益化配信を含む)でご自由にお使いいただけます。 ・改変してお使いいただけます。 ・ファイルそのものの再配布・再販売はご遠慮ください。 ・クレジット表記は不要です(わんコメ本体のクレジット表示義務は上記の通りです)。




