Overotakuted

by saitolumesaitolume

ウマ娘が楽しすぎてフレンド募集掲示板を作った

📅 2021/3/2 ・ ☕ 1 min read

先日 Cygames から「ウマ娘 プリティーダービー」という馬の姿をした女の子たちを走らせるスマホゲームをリリースされました。

数年前にグラブルで痛い目にあっているので「もうサイゲには騙されない!」と思っていましたが、また騙されてドハマリしています。あまりにも楽しくてフレンド募集掲示板を作ってしまいました。

umamusume.club からアクセスすることができます。

背景

ウマ娘のフレンドは、次のようなメリットが得られるためより良い育成を行うためにそこそこ重要です。

  • 殿堂入りウマ娘を借りられる (1 日 3 回)
  • 育成サポートを借りられる
  • フレンドポイントをアイテムと交換できる

フレンドには「育成サポートを借りた後」と「おすすめ」で出会うことができます。しかし、前者は代表ウマ娘を選べない、後者はレコメンドが弱いという欠点があるため効率的にフレンドと出会うことはできませんでした。次に、よくあるゲーム攻略サイトのフレンド募集掲示板を見てみると、僕が中学生の頃 (8 年ほど前) にパズドラのフレンドを探していたときから体験が向上していませんでした。

そこで、これなら自分でより良いものを作ったほうが効率が良い (+ 他の人の課題も解決できる) と思って自作することを決意しました。

できること

「代表ウマ娘」と「育成サポート」による検索

「代表ウマ娘」の「育成サポート」両方、もしくは片方を指定して募集を検索することができます。新着の募集が優先表示されます。

フレンド募集の作成と共有

「新しい募集を作る」ボタンからフレンド募集を作成することができます。入力項目は「トレーナー ID」「名前」「代表ウマ娘」「育成サポート」「コメント」です。 作成したフレンド募集は Twitter でシェアすることで、より多くのユーザーに見てもらうことができます。

ロードマップ

とりあえず使えるレベルにするのが目的だったので、まだまだ機能不足です。モチベ次第で今後も機能実装や改善を行うつもりなので、ざっくりと予定を書いておきます。

  • ウマ娘のアイコンを表示 (公式が配布している SNS 用アイコンが使えそう)
  • 因子による検索
  • Twitter でシェアしたときに表示される Twitter カードの生成

技術的な話

少し技術的なことにも触れておきます。今回は次の構成でガッと作りました。

  • Next.js + React (本番ビルドでは Preact)
  • Tailwind CSS
  • Firebase
  • React Hook Form
  • Vercel

やはり短期でアプリを作るときは、Next.js + Tailwind CSS + Firebase の構成が一番パフォーマンスを出せる気がします。

注目して欲しいのは React Hook Form という React 用のフォームライブラリです。再レンダリングが少なかったり、バリデーションやエラーを扱いやすかったりと多くのメリットがあって、最近個人的に推しています。自前でバリデーションやステートを管理していた時代には戻れなくなるくらい良いです。

ソースコードは GitHub に公開しています。

おわりに

ゲームの内容には言及しませんでしたが、「ウマ娘 プリティーダービー」は近年の育成ゲームの中で一番と言っても良いほど完成度が高いゲームです。時間があり余っている人は全員遊んでください。

そして今回作ったフレンド掲示板 (umamusume.club)をたくさん使ってください!!