個人開発WEBサービス！eSportsプラットフォーム「SPFans」をリリース！概要と使用技術はこちら！

 

こんにちは、古賀です！

 

本記事では、わたしが個人開発したWEBサービス

の紹介をします。

 

以前に紹介した野球のスコア管理WEBサービスと比べて、より力を入れて開発してみました！

本記事ではそのeSportsプラットフォームの概要と、どのような技術で開発を行ったかを紹介したいと思います。

今回の内容がポートフォリオ作成や個人開発の参考になればと思います。

 

簡単な自己紹介ですが、

わたしは上場IT企業に新卒入社し、プログラマー、システムエンジニアとして約１０年間働いた後、

現在フリーランスとして活動しております。

プロフィールの詳細はこちらです。

WEBサービスの作成手順はこちらの記事で紹介しています。

WEBエンジニアのポートフォリオ作成！WEBサービス作りの参考に！

 

今回紹介するWEBサービスはこちらです。eSportsに興味のある方はぜひ利用してみてください。

https://spfans.com/

※YouTubeに同内容を公開しております。

eSportsプラットフォーム「SPFans」とは？

SPFansは『Streamers and Players with Fans』の略で、ゲーム配信者やeSportsプレイヤーとファンを繋ぐeSportsプラットフォームです。

 

これを開発しようと思った経緯ですが、

現在eSportsプレイヤーの収益は大会の賞金をはじめ、スポンサーに大きく依存していることを知りました。

ですので、eSports業界をこれから長く発展させていくためには、スポンサー頼りではなく、

他のスポーツと同じようにファンに支えてもらわなくてはならないと思いました。

 

そこで、少しでもeSportsプレイヤーの収益課題を解決できるような環境があればいいなと思い、

プレイヤーが収益化できる今回のWEBサービスを作成しました。

 

色々とeSports関連のスマホアプリやWEBサービスを調べてみたのですが、大会運営ツールや賞金が掛かった試合を主催できるものはあっても、

どれも視聴者層を取り込むものではなかったので、そのあたりは差別化できているのではないかなと思っています。

 

詳細を知りたい方はサイトのヘルプを確認して欲しいのですが、簡単にWEBサービスがどんなものになっているかを紹介したいと思います。

主な内容は以下です。

YouTubeとTwitchのライブ配信で試合を行う

プレイヤーは自身で日時やルールを決めて、試合を主催することができるのですが、

その試合はYouTubeやTwitchのライブ配信を利用して行います。

そのライブ配信がサイト内に反映されるので、プレイヤーは再生回数を増やしたり、視聴者は好きなプレイヤー視点で楽しむことができます。

 

配信を行わなくても試合を行うことはできますが、より多くの視聴者に見てもらったり、

サイト内で収益化するためにも、配信することをオススメします！

 

プレイヤー同士がコラボするよう感じになるので、お互いチャンネルの成長の手助けになるのではないかと思います。

1stゲームタイトルは「Dead By Daylight」

試合はサイト内で対応しているゲームのみ行うことができます。

1stタイトルは「Dead By Daylight」です！

 

正直eSportsっぽくはないのですが、わたしも実際にプレイをしててゲーム内容の把握もできていて、

大会も適宜開催されていますし、プレイするだけでなく見るだけの人も比較的多いと思っているので、

そのあたりのことを考慮して採用しました。

 

今後ユーザ数が増えていけば、ゲームのタイトルは追加していきたいと思っています。

ただ、自分１人だけでは追加していくゲームの内容や規約のキャッチアップに対応しきれないので、このあたりは今後の課題です。

試合結果がプレイヤー成績として残り収益化可能

試合後は各プレイヤーが結果を入力します。その結果は各プレイヤーの成績として残ります。

DBDは以前にランク制度が廃止されました。

ですので、このあたりもゲームタイトルの補助的な役割を果たして一定の需要を満たせるのではないかなと思っています。

 

各成績項目に対してランキングページもあるので、

これもプレイヤーはもちろん、応援してくれるファンも楽しめる要素になるのではないかなと思います。

 

一部の成績項目「ファンポイント」と「レート」は収益の基準となります。

基本的にファンから送られるファンポイントが重視されますが、技術の証であるレートも収益の基準となります。

YouTubeやTwitchの配信プラットフォームの収益に加えて、こちらのプラットフォームでも収益を得ることができます。

個人戦とチーム戦の両方に対応

eSportsはチーム戦で行われるゲームタイトルも多いので、個人戦とチーム戦の両方に対応しています。

チーム戦で試合を行った場合も、個人戦と同様にチーム成績が残ります。

友達と一緒に試合をしてみたい場合はチーム戦を選んで楽しむことができます。

視聴者はポイントを購入してプレイヤーを応援できる

視聴者はポイントを購入して、プレイヤーにファンポイントとしてポイントを送ることができます。

今のところ、無課金でもポイントを送れるように、ログインをしたり、友達招待をすることでもポイントをもらえるようにしています。

 

視聴者のポイント購入分がプレイヤーへの収益の源泉になります。

スパチャのようなものですが、その場限りのものではなく、

送ったポイントはプレイヤーの成績に溜まっていき、プレイヤーのステータスになります。

 

このポイントの使用用途を増やしていくのも今後の課題です。

 

この他にも細かい内容はありますが、以上が簡単な概要です。

eSportsプラットフォーム「SPFans」の使用技術

ここからはSPFansで使用している技術についてお話します。

細かい話は技術毎に別記事にするかもしれませんが、今回は全体を簡単にお話します。

使用した主な技術は以下です。

今回は勉強も兼ねて、普段仕事で使っていない技術を多く使用しました！

Golang

バックエンドはGo言語にしました。

選んだ理由としては、

といった観点から選びましたが、一番の理由は「今後の需要」です。

 

もしこのWEBサービスがまったく伸びなかったとしても、作ったことは経験として残ります。

なので、今回の開発が無駄にならないように需要が伸び盛りで、フリーランスとしての単価も高めのGo言語を選択しました。

逆にサービスが成長して一人で手に負えない状況になったら、採用の面でも同じ理由で助けになります。

需要の高い言語を経験したい人は多いと思うので、ある程度興味を引けるかなと思います。

 

その他フレームワークやマッパーなど、Go言語の細かい話はまた別の記事でお話したいと思います。

TypeScript

フロントはTypeScriptを選択しました。

本当はReactも使用したかったのですが、わたし自身にフロントの知識があまりないので、時間が掛かり過ぎることを懸念して見送りました。

今後一段落したら、SPA化まではしないと思いますが、部分的にReactを取り入れていくかもしれません。

 

TypeScriptは簡単に言うとJavaScriptに型が付いただけなので、そこまで実装に苦労しませんでした。

型が付くことで、コーディング段階でミスに気付けるのは大きなメリットだと思います。

webpack周りの環境構築で躓かなければ、新しくTypeScriptに挑戦する人にとっても負担は少ないと思います。

これからはTypeScriptが当たり前になっていくと予想されるので、今回使えることができて良かったです。

TailwindCss

CSSのフレームワークはTailwindCssを選択しました。

こちらもこれから主流になっていくであろうと思われるのが１つの理由で、もう１つはデザインにオリジナル感を出したいと思ったからです。

Bootstrapだと、どうしても「見たことあるデザイン」になりがちなので、それを避けたいことがもう１つの理由です。

 

TailwindCssはBootstrapとは違い、一つ一つのクラスを当ててデザインしていくフレームワークです。

最初はめんどくさいのではないかと思いましたが、実際にやってみると逆に小回りが利いて、やりやすいという印象を受けました。

CSSファイルを直接書く必要もないので、フロントが苦手なわたしにとっては非常にやりやすかったです。

MySQL

データベースはMySQLです。

PostgreSQLでも良かったのですが、どちらかというとシェア率が高いMySQLを選択しました。

ただデータベースに関しては、機能にあまり大差なく、SQLの書き方が微妙に違ったりするだけなので、

これと言って新しく勉強になったことはなかったと思います。

GCP(Google Cloud Platform)

クラウドサービスはGCPです。

デプロイ先のGAE(Google App Engine)とGo言語の相性と、Googleログインを実装する際にGCPを使用するので、AWSではなくGCPの方を選択しました。

(Azureは前回のポートフォリオで使用したので候補外です。)

利用しているサービスは、

です。

 

個人サービスなので、極力お金が掛からない構成にしています。

GAEスタンダードは無料枠が用意されており、いきなりアクセスが増えない限り費用が掛かりません。

GCSも同様で、一定以下の容量であれば費用は掛かりません。

今回のWEBサービスではアカウントのアイコンとサムネイルのみストレージを使用するので、そこまで容量は圧迫しないと思います。

GoogleOAuthはGoogleログインを実装するために必要な機能ですが、こちらも費用は掛かりません。

 

初期で費用が掛かるのはCloudSQLのみです。一番スペックを低くして、24時間稼働すると大体1800円ほど掛かります。

(AzureのSQLServerだと1000円掛かっていないので、データベースだけ見るとAzureの方がお得な気がします。)

この金額をクリアするのが最初の目標になるかなと思います。

 

このあたりは新しく個人サービスを始める人の参考になればと思います！

Gmail

WEBサービスからメールを送る際はGmailAPIを使用して送信しています。

メール送信サービスはSendGridが有名ですが、GmailAPIを使用すれば自分のアカウントでメールを送信できるのでGmailを採用しました。

一応SendGridも無料枠があって、その枠を超えてしまうと有料になってしまうのですが、Gmailであればその心配もなくなります。

SendGridは色々と分析もできるのですが、今のところメールが送信できれば良いのでGmailで十分かなと思っています。

Stripe

eSportsプラットフォームでは視聴者がポイントを購入できる機能があるのですが、ここの決済はStripeを使用しています。

似たようなサービスだとPaypalがありますが、手数料の観点から収益性を重視してStripeを選択しました。

Stripeのホームページを見ると、機能が多いので、どれを取り入れたらいいか分かりにくいところはありましたが、

日本語ドキュメントも充実しているので割とスムーズに実装できたと思います。

その他(docker、reCaptcha)

その他ですが、開発環境の構築はdockerで作成しています。

dockerの基礎についてはこちらの記事でお話しています。

dockerとは？dockerをわかりやすく簡単に説明＆インストールする！

今回の場合だと、

Goのバックエンドコンテナ、

TypeScriptやTailwindCssのフロントエンドコンテナ、

MySQLのDBコンテナの３つを作成して開発しています。

 

reCaptchaはセキュリティ対策の１つで、お問い合わせ画面に設置しています。

大量に迷惑問い合わせが来ないように、機械的に送られてきている問い合わせに対しては除外するようになっています。

こちらもGoogleのサービスです。

気づけばGoogle一色です！

 

個人でやっているので「CI/CD」はやっていません。

ただ、もし人が増えた時のことを考えると、やっておかないといけないなとは思っています。。

 

以上、「SPFans」が使用している技術の紹介でした！

まとめ：eSportsプラットフォーム「SPFans」の紹介

今回の内容をまとめます。

 

今回は新しい技術を使って、１からWEBサービスを作りました。

本業の仕事をしながら約８か月程掛かったと思いますが、

外部サービスのドミュメントを見て実装することも多く、色々と勉強になって良かったです。

技術的なことばかりでなく、前回もお話しましたが市場調査であったり、

法律違反していないか、必要な届け出はあるか、売上のタイミングや仕訳の切り方など、

開発以外でも多くのことを学べました。

サービスが発展しなくても学べることは多いので、個人開発は一度経験してみるといいと思います！

 

とは言いつつ、サービスを多くの人に使ってもらって欲しいと思っています！

今後は実際にこのサービスの認知が課題です。

使ってくれる人のメリットを考えながら作ったので、少しでも知ってもらって拡散してもらえたら嬉しいです。

 

サービスに対して改善提案や質問があったら遠慮なくどうぞ！

※デザインがダサいのは認識しています。。

よろしくお願い致します！