Zenn
🧸

サーモンランを音声でサポートするDiscord Botをつくった

2024/02/04に公開
TypeScript
Bot
discord.js
Splatoon 3
Salmon Run
tech

「え？WAVE3だったの？早く言ってよ・・・」

ポンコツすぎる筆者は、しばしばスペシャルを使い忘れる

筆者に限らず、一緒にプレイしているフレンドも同様にしばしば忘れたりして、
WAVE3だよと教えると「早くいってよね！」と怒られていました（理不尽）

そこで、思いつきで

Discordのボイスチャンネルに音声Botがいて、時間ごとにアラートしてくれたら嬉しいかも。

と思い、数年コーディングから離れていた筆者のリハビリにもなるなということで、つくることを決めました。
（これでフレンドさんに言わなくても済むし、怒られなくて済む・・・

初期につくった雑なスライド

まずは企画ということで、ざっくりとしたイメージを共有するための資料を書いた
が、やはりアイコンがかわいくない・・・(´；ω；｀)
このBotサービスにおいては、アイコンの可愛さが命だ・・・
かわいくないキャラにサポートされても嬉しくない


Discord Botのアイコンイラストがほしい・・・

デザインやイラストが好きな筆者は、やはり仮に良いものをつくっても見た目が悪いともったいないし、良いイラストがあると何よりテンションがアガります。
幸運なことに妹がイラストを書けるので、頼もうと思いましたが、
これまで筆者はたびたびプロジェクトを発起して依頼しても、最終的に頓挫して日の目を見ない、
という憂き目に合わせてきました。（すまん妹よ）
そこである程度できてから頼もうと思いました。

開発を進めて少しBotが形になってきた

そこで、改めて妹にお願いして、ついに描いてもらいました。お返しは美味しいご飯（なんだっけ）を奢ります

コグマのイラストが完成

一日も経たずに送ってきました、筆が早過ぎる

正直最高の出来です、かわいすぎる！ありがとう！！ぽんひろさん！！
※本番のBotではケバインクの背景になっています

このコグマちゃんがしゃべってくれるのが楽しみになりました🧸

開発にまつわる話

ここからは、開発の経緯を書いていこうと思います。

要件

  • 筆者の得意なJavaScript/TypeScriptで書くためにNode.jsで開発
  • VOICEVOXで音声合成してセリフの音声データを作成しておく
  • タイマーを走らせ、タイミングごとに作成してあるセリフを再生させる
  • 残り50カウントと残り20カウントでアラート。「残り20カウントだよ、納品足りるかな？」など
  • WAVE3のタイミングで**「最後だから、スペシャル余ってたら使おうね」**と言わせる
  • セリフのタイミングや内容が気に入らない、変えたい人もいる気がしたのでセリフをカスタムできるようにする
  • 無料でホスティングできるところを探す

ざっくりとした構成

音声合成（VOICEVOX）

声はどうしよう・・・と長考したわけではなく、昨今Toutubeなどで物凄く流行っている「ずんだもん」などの音声合成ソフト「VOICEVOX」を使おうと決めました。商用だとしても無償で使える点が非常に使いやすく、またAPIもとても扱いやすかったです。声優には櫻歌ミコちゃんに頑張ってもらいました、とってもかわいいくて好評です！（もはやこの可愛い声がこのツールのメインFeature・・・）

ありがとう！ヒホ（ヒロシバ）さん！！
https://voicevox.hiroshiba.jp/

Discord BotのTypeScriptテンプレート

リハビリにもかかわらずスクラッチからつくるのダルそう・・・と極限の面倒くさがりな筆者は、TypeScriptのTemplateないかな？とネットサーフィンに向かう

なんと世の中素晴らしいプログラマがいて、何個か見つかり、以下に決めました。
https://github.com/KevinNovak/Discord-Bot-TypeScript-Template

結果的にスクラッチで書いてたら、考慮しきれなかったポイントがたくさんあり、型補完にもなんども助けられ、何よりソースコードがキレイで素晴らしかったです。ありがとう！！Kevinさん！

ホスティング先

  • Railway
    • Discord Botをホスティング
  • GCP
    • VOICEVOX Engineをホスティング

Railway

いろいろ探したけど、無料枠があってUIがきれいでUXも良さそうなRailwayにしました。実際かなりUXが良かったです。
ただVOICEVOXをホストするのは、無料ではメモリが不足しているのか起動すら上手くいかず断念して他のホスティングを探しました。

https://railway.app/

GCP

なんとか無料枠で頑張りたいので、以下の記事を参考にVOICEVOXをホスティングしました。非常にカンタンにデプロイできました。

参考
https://zenn.dev/yunkai/articles/gcp-voicevox

完成形

できました！！！！！

バイト地に着陸と同時に「スタート」を押すと音声サポートが開始されます。
フレ鮭の時でもみんなで聞けるのが便利ですね。

タイミングがズレでもタイマーを調整できます

セリフのカスタム

これでタイミングを指定してオリジナルのセリフを作成できます。


つかいかた

以下のURLから好きなサーバーにインストールするだけです
https://discord.com/api/oauth2/authorize?client_id=1192157554327957585&permissions=19934464&scope=bot

心強いDiscordコミュニティの存在

  • Discord.js Japan User Group
    • Discord APIは分かりやすい部分もありますが、直感的に分かりづらい仕様もたくさんありました。そんな時、本当に困った時には質問などさせていただき、かなり助けてもらい感謝しています。
    • https://discord.gg/discord-js-japan-user-group-391390986770710528
  • VOICEVOX
    • ここにいるプログラマの会話を見てると自信がなくなるくらい知らないことばかりということを痛感させられましたが、実際にどのようにプロジェクトが動いているのか分かり、刺激になりました。あらためてありがとうございます
    • https://discord.gg/dQEeBZVm

今後の開発計画について

反響次第ですが、一旦お勉強プロジェクトなので、これにて一旦一区切りにしたいと思います。
フィードバックは歓迎ですし、ライトな修正で済むものは修正していきたいと思っています。
ヒカリバエの切り替わるタイミングなど知らせる機能はつくりたかったが、誰かがデスすると破綻するので残念ながらやめました。タツマキの降ってくるタイミングなどは対応できるが恩恵がすくない？やろうと思えばすぐできます

また、当初のアイデアで、

キャプチャーボードを持っている人向けに、画面解析で全自動サポートを提供する
つまり、スタートボタンも押す必要ないし、画面の内容から良い感じに音声をつくってサポートするというもの

というアイデアはありましたが、正直実装が大変そうなので、今は実装未定です。
ヒカリバエサポートもこれならできなくはありません。（大変そうですが・・・）

さいごに

イラストだけじゃなく、テストに協力してくれた妹のぽんひろさん、大感謝！
テストプレイしてくれたフレンドのみんな、ありがとう！！！
当初の想定よりもかなり時間はかかってしまいましたが、かなり楽しかったです

ではまた！

Splatoon Name: たけまる
Engineer Name: Repsy

Discussion