スイカ 🍉 ジェネレーター Gousei Suika Generator for わんコメ の紹介

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

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

--- 

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

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

## このテンプレートは何？
![テンプレートを使ってみた](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/2adf8096-d673-fae9-49ed-60a7e4f2643e.jpeg)


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

#### ゲーム概要 🍉

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

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

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

#### 適した配信規模

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

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

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

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

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

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

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

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

## 導入方法

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

#### テンプレートフォルダを開く
![わんコメからテンプレートフォルダを開く](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/2298e860-13f5-62dd-6473-75b1e89215c2.png)


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

#### テンプレートを追加

![2つのフォルダをcustomフォルダに入れる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/3203b12d-9c81-be22-165f-f77e346bcfc5.png)


- スイカ 🍉 ジェネレーター Gousei Suika Generator https://booth.pm/ja/items/5813323 をダウンロードする

- custom フォルダに、解凍したフォルダ「gousei_suika」と「word-party_gousei_suika」を入れる。

#### テンプレートを追加
![OBSにテンプレートを追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/5bd6e238-afa3-a639-b508-18ed1cd859ff.png)


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

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

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

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

#### テンプレートのプロパティを編集
![プロパティから、幅・高さを編集](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/e60bbf7d-73a6-b0fa-bdc2-3673ada618b2.png)

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

#### プロパティの設定
![OBSで音声を制御する、表示されていないときにソースをシャットダウンする にチェック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/46fc445e-e676-71d7-3db6-9a6d294e6e49.png)

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

#### 音声ミキサーの設定
![「音声モニタリング」の設定を「モニターと出力」に変更](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/227a8298-6d71-fea4-6204-64f04fa7c2bd.png)

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

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

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

## 使い方・カスタマイズ

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

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

### カスタマイズ

![ランキングを3位までに変更したケース](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/e27e1f54-722a-4241-40cf-c9c83d122f3b.png)

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

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

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

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

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

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

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

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

#### ギフト/スパチャ限定「スイカ」(0:OFF 1:ON)
![ギフトした方のみスイカゲームが可能になる設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/86d07219-b002-a0c5-d987-5ccc2fa6db60.jpeg)


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

#### 特定のユーザーを弾く

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

#### 候補となる名前の配列

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

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

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

### 秘密のカスタマイズ(分かる人だけ設定して下さい)
![だるまさんがころんだ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/9c17fdb8-47f7-c24b-5f3e-c49088c81500.jpeg)

#### イカゲームのスイッチ(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. スイカジェネレーターの音が配信に出ない

![「音声モニタリング」の設定を「モニターと出力」に変更](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/227a8298-6d71-fea4-6204-64f04fa7c2bd.png)

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

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

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

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

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

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

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

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

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

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

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

#### Q. おみくじ結果の読み上げを別のボイス(ずんだもん等)にしたい
![枠IDを取得するには](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/348359e4-80f2-0918-a44e-15154f7982c6.png)


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

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

### おみくじ関連

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

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

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

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

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

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

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

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

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

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

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

### トラブルシューティング

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

![OBSで音声を制御する、表示されていないときにソースをシャットダウンする にチェック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555376/46fc445e-e676-71d7-3db6-9a6d294e6e49.png)
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 内の「スイカゲームを行うワード」設定を編集します：

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

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

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

### 改変の自由度

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

### 著作権と利用規約

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

### 改変のアイデア例

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

### コードの再配布について

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

### コミュニティへの貢献

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

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

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

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

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

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

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

https://www.kfstudio.net/font/kfhimajifude/

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

https://www.irasutoya.com/

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

https://commons.nicovideo.jp/works/nc297798

#### 各種効果音:効果音ラボ

https://soundeffect-lab.info/

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

https://twitter.com/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