やわらかテック

興味のあること。業務を通して得られた発見。個人的に試してみたことをアウトプットしています🍵

トップ > サービス作ったぞ > 【OBSで使用可能】スプラトゥーン3の武器をランダムで表示するサービスを公開しました

【OBSで使用可能】スプラトゥーン3の武器をランダムで表示するサービスを公開しました

サービス作ったぞ JavaScript

最近、Twitchでスプラトゥーン3のプレイを配信しています。
その中でただプレイするだけだと面白くないので、武器をランダムで選択してバンカラマッチ(対戦)できたら面白いかも...と思ったのですが、配信でいい感じに使える武器をランダムに選択してくれるサービス・ツールを見つけることができませんでした。

どうしようか...と思っていたのですが「無いのなら自分で作れば良いじゃない」と思い立って、スプラトゥーン3の武器をランダムに選択するサービスを作成して公開しました。

okabe-yuya.github.io

使い方

操作はとてもシンプルで、画面下に表示されるスタートを押すのみです。
現時点(2024/01/06)では、2023冬 Chill Seasonに登場した武器までをサポートしています。

左: 初期表示, 右: スタートを押した後

スプラ3 武器ルーレット

今後、武器が追加される度に新武器を追加していく予定です。
画像は熟練度が星4になった際にゲーム内でもらえるバッジを採用しました。
なお、本サービスで使用している画像の著作権はその著作者(任天堂様)に帰属します。この画像は引用として使用しております。

OBSでの使い方

OBSのソースに「ブラウザ」を新規追加します。
名前を入力後、以下のような画面が出てくるので以下のURLに以下の値を入力してください。
デフォルトではカスタムCSSが入力されているのですが、こちらは不要なので削除することをおすすめします。

あとは適当にサイズを調整して配置してください。
操作は「対話(操作)」を押して表示されるモーダルから行なってください。
「スタート」を押せばランダムで武器が表示されます。

おまけ: 実装について

せっかくなので簡単に実装方法について紹介しておきます。
やっていることは非常にシンプルでピュアなhtml, css, JavaScriptを使って実装しました。
オブジェクトを含む配列に武器名と画像のパスが格納されており、ランダムに取得した値を配列のインデックスとして武器情報にアクセスして、武器名と画像を表示するようになっています。

const weapons = [
  { display: '14式竹筒銃・甲', path: 'images/14式竹筒銃・甲.png' },
  { display: 'ボールドマーカー', path: 'images/ボールドマーカー.png' },
  :
]

splatoon3-random-weapon/blob/master/js/handler.js

「こういったツールが欲しい」と思ってプログラムを書くことがあまりないので、良い体験ができました。
自分・誰かが欲しいものを作るのは楽しいですね。

少しでも「ええな〜」と思ったらはてなスター・はてなブックマーク・シェアを頂けると励みになります。