スイカ🍉ジェネレーター Gousei Suika Generator - ピンとくる企画 - BOOTH
https://booth.pm/ja/items/5813323

この記事は、配信者のためのコメントアプリ「わんコメ」で使用できる、テンプレート＋ WordParty の紹介です。
同梱しているreadmeをQiita向けに編集しています。

このコードを利用するときは

わんコメ(https://onecomme.com/) の利用規約に基づきます。
わんコメの利用規約に基づき、コードに限っては商業利用も含め自由に利用することができます。
このコードの使用に関連して生じた損害について一切の責任を負いません。このコードの使用は自己責任で行ってください。
ベータ版のため、コードの動作は保証しません。コードや仕様は予告なく変更される可能性があります。

このテンプレートは何？

朝活・雑談配信にピッタリ!　コメントでスイカゲーム風のおみくじを楽しめる!

ゲーム概要 🍉

「スイカ」「スイカゲーム」「🍉」等とコメントすると、配信画面にたくさんのフルーツが現れ、ランダムに得点を表示します。(くっついてもシンカはしません)
- 得点は 900 ～ 3000 点程度が一般的ですが、まれに 5000 点を超える高得点も出現します。

🎃 バリエーションもあるよ 🐋

「スイカゲーム」の他、「カボチャゲーム」(ハロウィン仕様のスイカゲーム)風のおみくじや、「クジラゲーム」風のおみくじも遊べます。
カボチャゲームの起動：「カボチャ」「かぼちゃ」「🎃」etc...
クジラゲームの起動：「クジラ」「くじら」「🐋」「🐳」etc...

適した配信規模

同時接続数 5 ～ 100 人程度の朝活・雑談配信にピッタリ!

ギフト・スパチャ限定の設定も可能

設定を変更することで、ギフトやスパチャをした視聴者限定の「スイカゲーム」を提供できます。これにより、スパチャリストとしても活用可能です。

ランキング機能も搭載! ハイスコアは誰の手に?

得点の読み上げとハイスコアの表示

スイカゲーム風のスコア表示で表示され、誰がどんな得点だったかがわかります。
高得点が出ると、盛大な歓声と共に「New Record」と表示されます。

それっぽいスコアランキング付き

何度でも「スイカゲーム」をプレイでき、デフォルト設定では最高 5 回までの記録が残ります。リスナーから、よりたくさんのコメントが貰えるかも。（同じコメントばかりで困るかもしれませんが 💦）

導入方法

テンプレートを OBS に追加する

テンプレートフォルダを開く

わんコメの右上にある【…】（三点リーダー）をクリックし、**「フォルダを開く」**を選択。
**「テンプレートフォルダ」**を選択。

テンプレートを追加

スイカ 🍉 ジェネレーター Gousei Suika Generator https://booth.pm/ja/items/5813323 をダウンロードする
custom フォルダに、解凍したフォルダ「gousei_suika」と「word-party_gousei_suika」を入れる。

テンプレートを追加

わんコメの右上にある【…】（三点リーダー）をクリックし、「テンプレート」を選択。
「カスタム」タブから、「gousei_suika」「word-party_gousei_suika」を見つける。
「ここをドラッグして OBS に入れる」の指示通り、両方のテンプレートを OBS のソースに追加。

【重要】OBS の設定・プロパティを変更する

テンプレートの名称変更:

追加したテンプレート「index.html」という名称を、わかりやすい名前（例：SuicaGame、SuicaWordParty 等）に変更。

テンプレートのプロパティを編集

「SuicaGame」のソースを右クリックし、「プロパティ」を選択
プロパティから以下の設定を行います
- 幅・高さを編集します。目安としては、幅 540、高さ 780 です。
- **「表示されていないときにソースをシャットダウンする」**にチェックを入れる。

プロパティの設定

「SuicaWordParty」のソースを右クリックし、「プロパティ」を選択
プロパティから以下の設定を行います
- **「OBS で音声を制御する」**にチェックを入れる。
- **「表示されていないときにソースをシャットダウンする」**にチェックを入れる。

音声ミキサーの設定

OBS の音声ミキサーの【︙】（三点リーダー）をクリックし、**「オーディオの詳細プロパティ」**を選択。
変更した WordParty の名称を探し、**「音声モニタリング」の設定を「モニターと出力」**に変更する。

【注意】これら設定をしていないと、以下のような不具合が発生する可能性があります

配信者は聞こえるのに、配信動画では音声が乗っていない
タイマーやおみくじが二重三重に出てくる
非表示にしているのに勝手に音声が鳴る

使い方・カスタマイズ

script.js をテキストエディタで編集する

キホンはそのままでご使用いただけます。
「ランキングを 20 位まで表示させる」「ギフト/スパチャ限定で機能させる」「スイカのおみくじ最大回数を変更する」「BOT の名称(ポッピィー)を変更する」等の機能は、以下の設定が必要です。
「gousei_suika」フォルダにある、**「script.js」**というファイルを、テキストエディタ等で編集することで、以下の設定を変更できます。
- 言語は Javascript、フレームワークは Vue2 です(24/07/02 現在)。
- 編集には、VisualStudioCode が便利です

カスタマイズ

ランキング表示数: 下位何位まで表示させるか

デフォルト: 10
小さく表示させるなら 3 位まで、朝活など雑談メインなら、20 ～ 30 まで表示させるのも良いでしょう。

ウェルカムおみくじ(0:OFF 1:ON)

デフォルト: 1
その日初めてのコメントを行うと、自動で「スイカゲーム」を行います。

「スイカ」のおみくじ最大回数(0 で OFF)

デフォルト: 5
視聴者が多い場合、コメント抑制のために最大回数を設定できます。
最大回数を超えた場合、リセットされるまでスコアに得点が載らなくなります。(超えた場合のアナウンスあり)

「スイカ」のクールダウン時間（秒、0 で OFF）

デフォルト: 3
前回「スイカ」を行ってから、設定した秒数が経過しないと「スイカ」が発動しません。

ギフト/スパチャ限定「スイカ」(0:OFF 1:ON)

デフォルト: 0
ON にすると、ギフト/スパチャのコメントのみ「スイカ」が行われます。
ギフトの金額によってスコアは変化しません。(それではスイカゲームではありませんからね…)

特定のユーザーを弾く

ここに記載したユーザーは「スイカ」が発動しません。

候補となる名前の配列

起動時、配列の名前を使ってランキングを生成します。
必要があれば、有名プレイヤー等の名前を追加したりして下さい。配信メンバーの名前を入れるといいでしょう。

スイカゲームを行うワード(カボチャゲーム、クジラゲームも同様)

コメントで反応するワードを設定できます。また、英字の小文字・大文字は区別しません
- Javascript の配列については、こちらを参照
- https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays
switch
- true(真)なら「スイカゲーム」の機能が ON、false(偽)なら OFF になります
matchExact:完全一致
- このコメントと全く同一のデータのみ、真とします。
matchStartsWith:前方一致
- コメントの先頭に同じデータがある場合、真とします。
matchIncludes:部分一致
- コメントのどこかに同じデータがある場合、真とします。
modes
- 内部データです。特別な理由がない限り、変更しないでください。

秘密のカスタマイズ(分かる人だけ設定して下さい)

イカゲームのスイッチ(0:OFF 1:ON(回数制限:1 回のみ) 2:(回数制限なし))

隠し機能として「イカゲーム」があります。初期設定は OFF です。
「イカゲーム」とコメントすると発動します。
ON にすると、イカゲームにちなんだおみくじで遊べます。1/456 で大量の得点が入りますが、それ以外は 0 点です。

このスクリプト BOT の comment.data.userId

通常は「FirstCounter」としてください。
「初見判定ちゃん」といっしょに使う場合、この箇所を変更すると不具合が出る場合があります。

コメントしてから Bot が反応するまでの遅延(秒)

コメントしてから設定時間後に bot が反応します。初期設定は 1 秒です。

コメントするキャラクター設定

結果を話す BOT の名前やアイコンの設定ができます
- name:BOT の名前
- frameId:わんコメで複数の枠を設定している場合、ID を入れることで任意の枠に投稿が可能です。
  - BOT の音声を変更する際に使用します。
- profileImage:BOT のアイコン画像。
  - 他のわんコメジェネレーターで確認すると、表示されてるはずです。

おみくじの結果・アナウンスについて

設定・音声関連

Q. スイカジェネレーターの音が配信に出ない

A. 以下の手順で解決できます：

OBS にある、スイカジェネレーターのプロパティを開く
「OBS で音声を制御する」にチェックを入れる
OBS の「オーディオの詳細プロパティ」を開く
スイカゲームの音声モニタリング設定を「モニターと出力」に変更

Q. コメントが読み上げられるが画面に表示されない

A. 別のわんコメジェネレーターを使用することで、配信画面上にコメントを表示できます。適切なジェネレーターを選択し、設定してください。

Q. BOT のコメントが、Youtube のコメントに反映されていない

A: 仕様です。BOT のコメントはわんコメアプリ内のみに投稿され、Youtube や Twitch のチャットには影響しません。

Q. カスタマイズした設定が反映されない

A: 以下を確認してください：

script.js を保存したか
OBS でシーンをリロードしたか
設定を反映するには、編集後の保存と OBS シーンのリロードが必要です。

Q. カスタマイズしたらランキングが消えてしまった

A: script.js は比較的デリケートです。カギカッコ 1 つの欠落でもエラーの原因になります。問題解決が難しい場合は、ファイルを再ダウンロードして設定をやり直すことをおすすめします。

Q. おみくじ結果の読み上げを別のボイス(ずんだもん等)にしたい

わんコメの左上にある「追加」ボタンを押し、枠を増やす
該当する枠の三点リーダー(…)を押し、設定を選択
読み上げ設定を行う
設定した枠を右 Click→ID をコピー
script.js 内の「コメントするキャラクター設定」(【秘密のカスタマイズ】にあります)の frameId に、コピーした ID を入れる

ずんだもん等の VOICEVOX を使うタイプについては、棒読みちゃんや SAPI 等の設定が必要です(この readme では説明は割愛します)

おみくじ関連

Q. 「スイカゲーム」の最低得点・最高得点は？

A: 最低は理論上 630 点、最高は 9999 点以上です。ただし、天文学的な確率です。

Q. 落ちてくるフルーツの数と得点が合わない

A: フルーツの落下は演出です。実際の得点計算とは異なります。

Q. OBS のシーン移動でランキングがリセットされる

A: 現在の仕様です。シーン移動時にランキングは保持されません。

Q. スイカゲームの結果が反映されない

A: 以下を確認してください：

わんコメが起動しているか
わんコメがコメントを正しく拾えているか
最大回数やクールダウン時間の設定条件を満たしているか

Q. 特定ユーザーがゲームを利用できない

A: script.js 内でユーザー制限の設定がされている可能性があります。設定を確認し、必要に応じて修正してください。
また、わんコメの除外ユーザー(設定＞コメント＞除外ユーザー)も影響を受けます。

トラブルシューティング

Q. スイカゲームの結果が 2 つ表示される

A: 他のシーンにスプリクトが置かれていると、表示されていないのに機能してしまいます。これを防ぐには、以下の通り

「SuicaWordParty」のソースを右クリックし、「プロパティ」を選択
プロパティから以下の設定を行います
- **「OBS で音声を制御する」**にチェックを入れる。
- **「表示されていないときにソースをシャットダウンする」**にチェックを入れる。

Q. スイカゲームを連続で行うとコメントが反映されなくなる

A: 配信プラットフォームの自動規制（ソフト BAN）が原因の可能性があります。同じコメントの連続投稿を避け、適度な間隔でおみくじしてください。

Q. 複数視聴者の同時コメントで結果が表示されない

A: コメントの衝突により、まれに結果が反映されないことがあります。
また、視聴者が多すぎるとログが流れがちです。その場合は、以下のように参加する機会を絞ると良いかもしれません。

ウェルカムおみくじを ON ＋「スイカ」のクールダウン時間を 999999 に設定（初回のコメントのみ反応するようになります）
ギフト/スパチャ限定を ON にして参加者を限定する

カスタマイズ関連

Q. 配布されてる WordPerty って改変していいの？

A: いいよ。ただし、画像等の著作権には注意してね。

Q. ウェルカムおみくじが自動発動しない

A: script.js 内のウェルカムおみくじ設定が OFF になっている可能性があります。設定を確認し、必要に応じて ON にしてください。

Q. カボチャゲームやクジラゲームを無効にしたい

A: script.js 内で以下を変更：

「カボチャゲームを行うワード」セクションの「switch: true,」を「switch: false,」に
「クジラゲームを行うワード」セクションも同様に変更

Q. スイカゲーム実行キーワードの変更方法

A: script.js 内の「スイカゲームを行うワード」設定を編集します：

該当セクションを探す
words: ["スイカ"], の部分を希望のキーワードに変更
例：words: ["フルーツ", "めろん"],

設定変更後は必ずファイルを保存し、OBS でシーンをリロードしてください。

備考：コードの改変について

改変の自由度

このコードは、わんコメのテンプレートをベースにしていますが、さらなる改変を歓迎します。
必要に応じて自由にカスタマイズしてください。
WordParty も同様に改変可能です。画像等を差し替えて、リアルなスイカを降らしてみるとか。

著作権と利用規約

わんコメの利用規約に基づき、本コードは商業利用を含め自由に利用可能です。
ただし、おみくじの一部サンプル内容には元ネタがあるため、良識の範囲内でご使用ください。

改変のアイデア例

UI/UX の改善: ボタンのデザイン変更、アニメーション追加など
新機能の追加: 新しいミニゲーム、統計機能の実装など
パフォーマンスの最適化: コードの効率化、読み込み速度の向上など

コードの再配布について

改変していないコードの配布は禁止とします。
コードを改変した場合のみ、再配布が許可されます。
- クレジットについては、readme に配布元の URL を貼っていただければ OK です
- https://booth.pm/ja/items/5813323
- コードの自作発言とかはご勝手にどうぞ。

コミュニティへの貢献

改良版を作成した場合、ぜひコミュニティで共有してください。
他のクリエイターの参考になり、全体の発展につながります。

サポートとフィードバック

コードに関する質問や提案がある場合は、[]にお寄せください。
作者はコミュニケーションが苦手なため、返信が遅れたり、場合によっては返信がない可能性があります。ご了承ください。
皆様からのフィードバックは歓迎しますが、即時の対応は難しい場合があります。

注意: コードの一部が最適化されていない場合がありますが、ご了承ください。継続的な改善を行っています。

クレジット：イラストと音源について

ジェネレーターや WordParty、アイコンで使用しています。

「スイカジェネレーター」のフォント:ＫＦひま字ふで

「クジラ」で使われる水生動物:かわいいフリー素材集いらすとや

飛び散る血の痕【フリー素材あそび】

各種効果音:効果音ラボ

細かい部品のほとんど:ダーヤマ TOPECONHEROES

素材の取り扱いについて

イラスト素材・動画・音源の再配布は禁止されています。
イラストや音源の利用については、各配布サイトの利用規約をご確認ください。

バージョン情報

v0.3 : 24/07/02

「ウェルカムおみくじ」の追加
「カボチャゲーム」「クジラゲーム」を追加
ギフト/スパチャした場合のみ「スイカ」が可能になるスイッチを追加
特定のユーザーを弾く設定を追加
他細かい調整・改良

v0.2 : 24/06/10

演出の調整、アイコン等の編集を行いました(弾ける効果音など)
今回のスコア+ユーザー名を表示するようにしました
「スイカ」のおみくじができる最大回数を追加

v0.1 : 24/06/08

初版

せすじピンとしてます @pintocuru
https://twitter.com/pintocuru
https://www.youtube.com/@pintocuru