Blog

ハッカソン合宿制作記①|そして、おすすめへ…「Recommend Quest」

はじめに

こんにちは!
入社一年目の小倉、坂内、鈴木です。

ニフティでは新人エンジニア研修の一つに「エンジニア定例」というものがあります。

例年、エンジニア定例の集大成として開発合宿を行なっています。
昨今の事情によりリモートでの開催になりましたがリラックスした雰囲気で臨めました。

開発合宿の概要に関してはこちらの記事をご覧ください!

本記事では開発合宿で作成した「Recommend Quest」について紹介していきます。

メンバー紹介

  • 小倉
    • 合宿での担当:バックエンド
    • 普段の業務 :課金請求系システム開発・運用、新回線システム開発
  • 坂内
    • 合宿での担当:マークアップ
    • 普段の業務 :社内業務ツールの運用・開発・新規導入
  • 鈴木
    • 合宿での担当:フロントエンド・プロダクトオーナー
    • 普段の業務 :セキュリティサービスの開発・運用

作ったものについて

近年eSportsという言葉をよく耳にしますね。
部活動として取り組んでいる高校もあるそうで、全国高校eスポーツ選手権という大会も開かれています。

全国高校eスポーツ選手権の開催はすでに4回目。多くの企業がスポンサーになって盛り上げています。
また、全国高校eスポーツ選手権だけでなく他のeSports大会を耳にしたこともあるのではないかと思います。

盛り上がりを見せているeSports業界ですがどんなゲームが大会種目として存在しているか知っていますか?
大会種目として「League of Legends」や「CS:GO」、「DOTA2」などが有名です。

「タイトルくらいは聞いたことあるけど…」そんな人も多いのでは。
実際私自身も詳細を知らないゲームもいくつかあり、視聴までには至らないことも。

そこで、身近に遊んでいるゲームの特徴からオススメのeSports種目を選んでくれるアプリを作りました。
例えばFPSのゲームを遊んでいるなら「CS:GO」をオススメしてくれます。
このアプリを使えば「ルールがよくわからなくて…」と嫌厭していた方でも、興味を持ってeSportsを見て楽しむことができます!

それが「Recommend Quest」です!

あらすじ

あなたはとある噂を耳にした。
eSports洞窟と呼ばれるダンジョンには不思議な宝がある。
なんでもそのお宝はダンジョンでのあなたの振る舞いによって中身が変わると言う。

興味を持ったあなたは十分に装備を整え、ダンジョンの入り口へと向かった…。

遊び方

タイトル

Startボタンを押すことであなたの物語が始まります。
心の準備ができたらプレイヤーとなりダンジョンへ突入です。

ダンジョン

画面下部にあるテキストボックスにメッセージが流れてきます。
まずプレイヤーにあらすじや目的を説明します。
テキストボックスをクリックすることで次のメッセージが表示され物語が進んでいきます。

モンスター登場

洞窟を進んでいくとプレイヤーの前にモンスターが現れます。
画面右上のCommandを選択してモンスターと立ち向かいましょう。
今回は「銃」選択してみました。

宝箱発見

モンスターを倒すと噂の宝箱が出てきました。
クリックすることでCommandに応じたeSportsをオススメしてくれます。

「銃」を選択したのでFPSゲームであるApex Legendsがオススメされましたね。
今はTwitchのページに遷移するようになっています。

※チャンネル名が表示されているため一部塗りつぶし加工をしています

システム構成

 

今回作成したアプリケーションは図のような構成で動いています。
バックエンド側をFlask、フロントエンド側をReactを使って実装し、WEBサーバーはNginx、データベースにはMy SQLを採用しました。
また、これらはDocker Composeでコンテナ化してEC2に搭載しています。

今回の開発は短期間でありインフラよりもアプリーケーション作成に時間を割きたいと考えました。
そのため、EC2上でコンテナをビルドすることでローカルとの操作がほとんど変わらずに短時間でデプロイができる方法を採用しました。

工夫したこと

リアリティのある開発

アイデア出し

私たちはとある問題に拘ってアイデアを出していました。
解決したい問題が決まっているとチームの目標が明確になり意思決定がしやすくなると考えたからです。

私たちが解決しようとした問題は「どうしたらアプリが多くの人に使ってもらえるのか」でした。
業務でも新たなサービスを作る際には既存のアプリとの差別化は必須です。また、近年は便利であることだけでなくユニークさも求められていると感じています。
そういった実際に起こりうる課題を想定してアイデアを出していきました。

当初出ていたアプリ案はapple musicのレコメンドシステムをイメージしたものでした。
つまり、ユーザーが普段プレイしているゲームのジャンルや雰囲気などを選択し、アプリがそれを分析してレコメンドするというものです。
ただ、便利ではありますが普遍的で課題の解決には至りませんでしたので、チーム内で議論しこのアプリ案は不採用となりました。

そういった議論の後に、今回のアプリ案が採用されました。
最初に問題を設定しておくことで目標が明確になり、より課題にマッチしたアプリ案にできたと思っています。

リモート開発でのコミュニケーション

昨今リモートでの業務は当たり前になってきています。
慣れた環境で働けるため非常にリラックスしながら業務に挑めます。一方でチーム内のコミュニケーションが不足することが問題視されがちです。

コミュニケーションが不足すると小さな問題であっても解決にたくさんの時間を費やすことになります。
今回は開発期間が短いためこのようなことが起こると致命傷になりかねません。

小倉さんの業務時のチームではコミュニケーション不足を解消するためにリモートワーク中は必ずカメラを繋いでいるそうです。
それに倣い、開発中もカメラを繋ぎいつでも質問できる環境を整えました。
加えて、雑談を挟みながら作業することで和やかな雰囲気の中で開発できました。

質問しやすい環境になり、個人の課題をみんなで解決するという意識が自然と芽生えました。
リモートワークにおけるコミュニケーションの一つの形が理解できた気がします。

学び

役割分担の重要性

私たちチームでは事前に役割を決めて開発に臨みました。そうすることでそれぞれの役割に集中することができました。
加えてコミュニケーションを多く取っていたので質問もしやすく、効率よく動けていたと思います。

また私たちのチームではフロント・バック・マークアップの他にプロダクトオーナーを設けました。
これにより各担当の連携時に問題が発生したとしても解決方法の決定がしやすくなっていました。

事前に作業の役割を決めるだけでなくプロダクトの責任を持つ人を決めておくことで意思決定フローがスムーズになります。
このような機会だと作業内容に目を奪われがちではありますが、問題が起きた時のフローなども事前に考えておくと効率的ですね。

コンポーネント設計の大切さ

今回、開発時間が限られており焦りから設計が甘い状態で開発を行うことになってしまいました。
また比較的簡単なサービスなのであまり凝らなくても大丈夫だろうという思い込みもあり開発を進めていくこととなります。

実際に開発していくと技術的に慣れないこともあり可読性の低いコードができてしまいました
きちんとコンポーネント設計ができていれば状態管理の見通しが立ち可読性の高いコードができたかと思います。

またコンポーネント設計ができていれば分業がしやすくなるというメリットもあります。
時間が少ないからこそ設計を大切にすれば効率の良い作業ができると学びました。

終わりに

アプリの設計から開発までとても楽しい時間を過ごせました。
頻繁にコミュニケーションを取ることで問題解決しやすくなり、自然とチームの雰囲気も良いものになりました。

また、一つのアプリを形にすることができたため、チームメンバーそれぞれに自信がついたと思います。
こういった場を用意・運営してくれた先輩方にこの場を借りて感謝申し上げます。
エンジニア定例開発合宿を通して得た経験・知識を今後の業務に活かしていきます。ありがとうございました。