はじめに
ニフティでは、新入社員を対象に「エンジニア定例」というスキルアップを目的とした勉強会が行われており、先日、その集大成として3日間に渡るリモートでのハッカソン合宿を行いました。
この記事では私たちのチームが作成したToDoリストとガチャを掛け合わせたWebアプリ「ToDo Gacha」を紹介します。
メンバー
- 大里
- フロントエンド(ToDoリスト)を担当
- 業務では@nifty Wi-Fiルーターレンタルサービスとつなぎモバイルのシステムを担当
- 佐藤
- フロントエンド(ガチャの結果)やデザインの調整を担当
- 業務ではまかせて365、@niftyスマートセキュリティシステムの開発と運用を担当
- 諏訪
- バックエンド(DB、API)を担当
- 業務ではDWHの機能保全やデータ提供基盤の管理を担当
- 南川
- フロントエンド(サインアップ、ログイン、ガチャの結果)、デプロイを担当
- 業務ではユーザーサインアップやSSOの開発と運用を担当
制作物
背景
皆さんはToDoリストに対して、次のようなことを思ったことはありませんか？
- ToDoを完了したときにより達成感が欲しい！
- ToDoの管理を楽しみながら行いたい！
このようなニーズに対して、「ToDoリストのToDoを完了する」と「ソーシャルゲーム等でよくあるミッションをクリアする」が似ているなと思いました。ミッションをクリアすると石が貰え、その石を消費してガチャを引くことができるように、ToDoを完了すると石が貰え、その石を消費してガチャを引くことができれば、ToDoリストの楽しみが増え、ToDoを完了するモチベーションの向上が期待されます。
説明
このWebアプリでは、既存のToDoリストの機能に加え、ToDoを完了した際に貰えるジェム(石)を消費してガチャを引く機能が備わっています。
また、ユーザーごとにToDoや現在のガチャの進捗等を管理したかったため、ログイン機能も搭載しました。
使い方
ページにアクセスすると、ログイン画面に移ります。
まず、ログインするためにユーザーを登録する必要があります。
ユーザー登録画面では、ユーザー名とメールアドレス、パスワードを入力します。
ユーザー登録を完了するとログイン画面にリダイレクトします。
先ほど登録したメールアドレスでログインするとToDoリストが表示されます。
「Please enter your todo」と書かれたフィールドにToDoの内容を入力して左側の+ボタンを押すと、入力した内容のToDoが追加されます。
今回は「散歩をする。」というToDoを追加しました。
この追加されたToDoを完了したら、左側のチェックを押してジェムを1個手に入れることができます。現在所持しているジェムの個数はToDoリストの上に表示されます。
このジェムを5個集めると、右下のガチャボタンを押して1回ガチャを引くことができます。
ガチャを引くと、分割された写真の中からランダムに1ピースが手に入ります。
新しく手に入ったピースは枠で囲って強調しています。
ToDoをこなしてガチャを回して、写真の完成を目指しましょう！
システム
このWebアプリのシステム構成は以下の通りです。
WebアプリはフロントエンドにReact、バックエンドにFlask、データベースにMySQLを利用しています。ログイン処理にはFlask-Loginを使い、Flask-Bcryptを用いたパスワードの暗号化も行っています。また、Flask-MigrateでPythonのソースコードで書かれたモデルからデータベースのテーブルを作成しています。そして、ローカル環境とAWS環境間での差異を極力減らし、デプロイを効率化する目的でコンテナ化しています。
ソースコードはBitBucketで管理し、デプロイするタイミングでCodeCommitにpushし、EC2からCodeCommitのソースコードをpullして、EC2上でDockerコンテナを立ち上げています。本来、DockerをAWS上で利用する場合、EC2よりもECSを使ったほうが良いですが、今回は時間内に完成させることを重視し、デプロイにそこまで時間をかけられないと判断したため、確実にデプロイできる方であるEC2を採用しました。
工夫した点
まず、サービスでの工夫としてユーザーに有利なガチャの確率操作を挙げます。このアプリでは横6マス縦4マスに分割された写真のピース、計24枚を集めるということで、完全にランダムだと最後の1ピースでは約4%の確率を当てる必要があるため、重複したピースが出てしまった時の再抽選やそれでも重複してしまった場合に消費したジェムの一部を返還する救済措置を実装しました。
また、ToDoリストにおいては入力内容が空の場合ToDoを追加できなくしたといった点が挙げられます。
そして、今回はリモートでの開発ということで、定期的な進捗報告の時間を設けて開発にメリハリをつけるようにしました。定期的に進捗報告を行うことで、各チームメンバーの状況を確認することができ、さらに、このメリハリによって作業に集中することができ、アプリの完成に繋がりました。
苦労した点・失敗した点
今回のこの開発では、フロントエンドでReactを使用しました。しかし、メンバーの中に業務でReactを使っている人がいなかったため、コンポーネントの設計やコーディングに苦労しました。また、3日間という限られた期間の中で一人一人のスキルレベルに合わせてどこまで機能を実装するかを考えたことも苦労した点として挙げられます。
一方、APIの仕様（入力と出力）の定義をあらかじめしっかりと決めていなかったことが失敗した点として挙げられます。これにより、APIができあがるまで開発が滞ってしまうといったこともあり、開発する前の事前準備の段階で決めておくべきことだったと実感しました。
今後の展望
このアプリの今後の展望として、デイリーミッションの追加や絵の複数枚対応、デザインの調整等が挙げられます。
ソーシャルゲームにおいてデイリーミッションという形で毎日クリアしなくてはいけないミッションがあるのと同じように、現実世界でも毎日達成しなければいけないToDoというのもあったりします。このようなケースに対し、毎日ToDoを追加するのは手間であると考え、ToDoを自動的に追加する機能を実装できればと思いました。
合宿を通じて成長したと思う点
この合宿での開発を通じて、一人一人コーディングやデザイン面で気にするところが異なることが分かり、視野が広がりました。
また、Reactといった実務で触れてこなかった技術の知見が深まり、スキルアップにつながりました。
そして、3日間という限られた短い期間の中でどこまで実装できるのかを考えながら開発することで、時間管理、タスク管理の重要さを感じました。
さいごに
今回のハッカソン合宿を通じて、チームでのものづくりの楽しさを再確認することが出来ました！
ここで学んだこと、反省を活かして、普段の業務に取り組んでいきたいです。
