👋
サポーターズの技育CAMPハッカソンにて、「スポーツマッチングアプリ」を開発

2024/12/22に公開
こんにちは。大学生エンジニアの豆太郎です。

サポーターズの技育CAMPハッカソンに即席チームの３人で参加しましたので、以下に私たちが作った「スポーツマッチングアプリ（スポッ友）」のアプリの詳細や開発で使った技術を紹介したいと思います。

 アプリ説明
 スポーツマッチングアプリ（スポッ友）このアプリは、
身近にスポーツをしてくれる仲の良い友人がいないとき
久しぶりにスポーツをやりたいと思ったとき
気軽に、近くの人とマッチングしてスポーツを行うことができるアプリです。

従来の開催されているイベントを自分で探すアプリと異なり、

自分でやりたいことや遊びたい時間を決めてマッチングが行われ、
それによって、自分の好きな時間にスポーツを行うことができます。

 作成した画面や機能一覧
 ユーザ認証機能まずアプリを使うには、ログイン・新規登録が必要です。

以下が新規登録画面となっています。
新規登録では、上記のように名前、年齢、性別、またプロフィール画像を登録できます。

 イベントの一覧画面ログイン処理を終えると、イベント一覧画面に遷移します。

イベントの一覧画面では、イベントが以下のように表示されます。
ここで、上記の画面のようにイベントの状態に応じて色を変えて表示しています。
マッチング未成立→赤
部分マッチング(すでにマッチングしているがまだ定員に達していない)→黄色
マッチング済み→緑

 イベント作成画面イベント一覧画面にある「イベント作成」のリンクをクリックすると、イベント作成画面に遷移します。

ここでは、自分の行いたいスポーツに関して、開始時間や終了時間、開催場所などの条件を設定することができます。
以下はフォームの入力内容の一例です。
上記では、開催場所のフォームに「マスカットスタジアム」と入力すると自動でGoogleMapのピンが「マスカットスタジアム」の緯度と経度を指してくれるようになっています。
また、ジャンルに「野球」を選択することで、RailsのTurboの非同期処理によって野球に紐づくサブジャンルである「キャッチボール」「草野球」などの選択肢が上がってくるようになっています。
また、希望する人数を２人に設定すると「マッチングを希望しない性別」「年齢の下限」「年齢の上限」のフォームが出現して、値を入力することができます。これはマッチングアプリでありがちな、２人きりであった人が自分に合わない場合を防ぐためで、犯罪の防止や意図しないマッチングが行われないようにしています。

 マッチング機能イベントの作成が行われるとイベント同士のマッチングが行われます。

以下の条件でイベント同士のマッチングが行われるようになります。
マッチングがまだ募集されているか
今の時間より開始時間が後か
自分以外のユーザーが作成したイベントか
場所が5km以内か
開始時間と終了時間が包括されているか
サブジャンルが一致しているか
なければジャンルが一致しているか

イベントの募集人数が一致しているか(募集人数が一人の場合）
希望しない性別や年齢の条件を満たしているか
まだ実装できていないマッチングの改善点としては、
複数のイベントがマッチングしたときに、一つのイベントに距離や時間が合わせてしまって、柔軟に時間（全員が参加できる時間）や場所（場所が離れていたらその中間の位置を指定）の調整をする
といったところです。

 詳細画面・マッチング結果表示詳細画面では、主にイベントの情報やマッチングしている場合にマッチングしたユーザやコメントを見ることができます。
上記のように、イベントのGoogleMapでのピン指し表示で開催場所を確認することができます。

また、マッチングしていた場合は、マッチングしいてるユーザのコメントを見ることができます。
今度の改善点としては、
Turboを使って、非同期処理でコメントを送信できるようにして、ユーザ同士で詳細な場所や時間の設定をすることができるようにすること
となっています。

 
 技術スタック
 サーバーサイドRuby 3.2.6
Ruby on Rails 7.0.4.3
Rails を選定した理由サポーターズのハッカソンにて

即席チームで3人で開発することになり、内2人はまだWeb開発の経験が浅かったため、バックエンドやフロントエンドを分けた開発工数のかかる技術スタックではなく、一つのリポジトリで手軽にアプリケーションを立ち上げることができ、初学者でも分かりやすいRailsを選定しました。
使用した主なGemfileturbo-rails (フォーム画面でGoogleMapのピン刺しや、SubGenreの絞り込みに必要な非同期処理をするため)
devise（ユーザ認証を手軽に実装）
geocoder (緯度・経度から距離を計算するため)
activestorage (プロフィールの画像をクラウドサービスに上げるため)
aws-sdk-s3 (本番環境でAWSのS3のクラウドに画像をアップロードするため)

 データベースSQLite3 開発環境
PostgreSQL

 開発環境GithubCodeSpaces
GithubCodeSpaces を選定した理由Railsと同様に、３人のハッカソンチームのうち、２人はWeb開発の経験が浅く、

ローカルでの開発環境やGithubの使いかたに苦戦して、開発に移る前に挫折することを懸念していました。そのため、GithubCodepSpacesを使い、さらにYassLabさんが公開しているソースコードと組み合わせて、GithubCodeSpacesからブラウザから数クリックで環境構築が完了できるようにして、初学者が環境構築でなかなか開発を進められない問題を解決しました。

 ソースコード管理Github

 CI/CDGithubActions

GithubActionsを使うことによって、mainブランチにpushされた変更を自動で、デプロイしているFly.ioの反映させるようにしています。

 インフラ環境Docker

本番環境で、アプリを立ち上げるためにDockerFileを使用。

とくに手動での設定は行っておらず、Fly.ioのコマンドを開発環境でうつことで、

自動でDockerfileがビルドされて生成される
Fly.io
Fly.ioの選定理由AWSやHerokuなどのホスティングシステムは有料で長期の運用には向きますが、短期間で作るハッカソンにはもったいないと感じたため、無料で使えるホスティングシステムを探したところFly.ioに行き当たりました。Fly.ioは毎月$5ドルで無料(参考：金が掛からないRailsの本番環境を求めて、_ぼとふね_zenn)で使えるうえ、数回のコマンドを打つだけで、デプロイできるため、手軽かつ経済的だと思いました。
AWS s3

顔写真の画像をクラウドにアップロードするために使用。

AWSS3は自分で設定したわけでなく、Fly.ioのデプロイのコマンドを打つと、tigrisというFly.io上で管理されているAWSのS3ストレージへのバケットやアクセスキー等のDockerfileにビルドされて、本番環境で使えるようになります。

最初にtigrisのことが分からずに、Fly.ioのコマンドを打つと、勝手に本番環境にS3のバケットやアクセスキー作られていたため、誰のAWSアカウントのS3が使われているのか分からず、S3が他の人のアカウントのもので他の人にプロフィール画像が渡ったらどうしようということ、自分のアカウントのS３であった場合に意図しないうちに多額の請求が来てたらどうしようと困惑しました。Fly.ioのことを調べて、Tigrisのことが分かり、AWSのアカウントが他人の人のモノでないと分かり、安心しました。
Tigrisでは使ったストレージの容量だけ、Fly.ioのアカウントに請求されるようになっています。

 システム構成図

 データベース設計以下はデータベーススキーマを視覚化したER図です。

 感想（mametaroより）ハッカソンで即席チームでの３人での開発で、開発期間はチームが決まってから、本番発表までの１週間程度でした。チーム開発が初めての方もおられた中で、GithubCodeSpacesを使うことで環境構築の手間を無くしてとっかかりを早く開発することができ、デプロイすることができて良かったです。また、マッチングイベントが完了したことを示すテーブルが必要ないのに設計の段階から作ってしまい、チームメンバーに困惑をかけました。ただ、素早くテーブルの変更に対応して、落ち着いて対処でき、大きな問題になることなく終えたのは良かったと思いました。
僕以外は、チーム開発が初めてで開発の途中までは自分一人でプレッシャーも責任も負ってくような開発になるのではないかと不安な所はあったのですが、日がたつにつれて他のメンバーの理解が思いのほか早く、最終日の三日前にはほとんど自分と進捗が変わらなくなるくらいになっていて、とても安心して充実したハッカソンを送ることができました。
ハッカソンのように、みんなが自由に意見を出し合って、誰にもプレッシャーや責任感をかけられず、作りたいアプリを作れることは、社会人ではなかなか味わえないことではあると思うので、この学生時代を大事にしたいと思いました。