アプリの概要

掃除機のスライドを、取り付けたスマートフォンに搭載された加速度センサで検知し、リズムゲームの判定とするアプリです。
2020年の技育展で優秀賞をいただいた作品になります。
チームメンバーは私を含め3人で、私を除く2人はweb開発未経験でしたが2週間余りで作品を作ることができました。

github: https://github.com/ysdko/rhythmic-cleaner
デプロイURL: https://rhythmic-cleaner.vercel.app/

主な機能

楽曲・難易度選択
リズムゲーム機能
スコアのツイート

アーキテクチャ

アイデア出し

技育CAMPハッカソンというハッカソンイベントに参加した際に作成したものになります。
ハッカソンのテーマが「生活を豊かにするアプリ」で、そのテーマにあったアプリを考えることになりました。
アイデア出しには１週間ほどかけました。
最初は、Discordに各自が好きにアイデアまたは解決したい課題を投稿していくというやり方で進めて行きました。話を進める中で、「研究とアルバイトで部屋の掃除が、後回しになりやすい」という課題が全員の共通部分であることがわかりました。どうすれば解決を行えるアプリにするかと考えていた時に、当時流行っていたポケモンスマイルの広告を目にしました。このゲームは画像認識を用い、歯磨きの動作に合わせてポケモンが攻撃を行うという画期的なゲームでした。これをヒントに、掃除機をリズムゲーム化するという案を思いつきました。

技術選定

スライドの判定をジャイロセンサを用いることにしました。
当初はポケモンスマイル同様画像認識で掃除機のリズム判定を行う予定でしたが、スライドの判定にラグが発生してしまう画像認識はリズムゲームには難しいと考え断念しました。その代わりとして、スマホに搭載されている加速度を取得するジャイロセンサを使うことにしました。
言語はjavascript, htmlでライブラリはphinaJSというゲーム開発用のものを採用しました。
私以外のメンバー２人が初めてのweb開発ということもあり、言語はjavascript, htmlでライブラリはphinaJSというゲーム開発用のものを採用しました。
デプロイについてはVercelで動かしています。

開発

開発はGithubでイシューを発行し、優先度やメンバーのレベルを考慮しながら割り当てていきました。
最初はリズムゲーム、ジャイロセンサによる加速度取得、譜面の作成に分かれて行い、開発が終わったメンバーからリズムゲームの開発に加わってもらうことにしました。
リズムゲームの実装に関しては以下の記事を参考に開発を進めていきました。
Phina.jsとリズムゲーム開発の実装全般についてわかりやすく説明されており、かなり参考になりました。
https://qiita.com/pentamania/items/399d133e5440c9424bde

改善

ハッカソンの審査員や私の両親に実際にアプリを使った感想をヒアリングしました。最初に作成したUIについてなどからダメ出しを受けました。それはUIが拙く、全体的な色やボタンの形の統一感がないという点です。これについてはメンターについていただいた企業のエンジニアの方にどうしたら統一感のあるUIにできるか？という質問をしました。メンターのエンジニア曰くUIデザインを考える上で、配色のバランスを重視すると良いというアドバイスをいただきました。具体的な考え方を以下に記載します。

UI作成における配色の考え方

一般的に画面上での色の配色を「70：25：5」の比率にして配色すると、バランスの取れた美しい配色になるとされています。
最も大きな面積を占める色が「ベースカラー（70％）」、アプリののイメージカラーとなる色を「メインカラー（25％）」、画面にアクセントを持たせるための色を「アクセントカラー（5％）」と呼びます。

苦労した点と学んだこと

実装の方向性をめぐり、チームの方向性を一つにしなければいけなかったことが最も苦労しました。一通りアプリが完成した時に、多くの機能を搭載すべきという意見とメンターに指摘いただいたUIの改修に注力すべきという意見に分かれました。私は、アプリ開発をする上でユーザーの期待に応えることを最優先と考え、チームの目標をUIの改修に注力した方がよいのではないかということをメンバーに説得しチーム全員の合意が取れた上でUI改修に臨むことができました。結果的にメンターの指摘通りにUIが修正されたことが評価され優秀賞を獲得することができました。この経験から、ハッカソンおよび実際に世に出すアプリ作りにおいては「自分たちが作りたいもの」よりも「ユーザーが使いやすいもの」を意識して作ることが重要だと改めて感じました。