[個人開発]Ruby on Railsで阪神ファンのためのアプリを開発しました！

はじめまして！
オンラインスクールにてRuby on Railsを学習中の初学者です。
この度卒業制作で「甲子園NOW!」というアプリを作成いたしました。

甲子園球場の盛り上がりを可視化することができ、ファン同士の交流を促進できるようにしています。
砕けて言えば、周りのファン同士は友達になれるけど、遠くの席のファンの方とも持ち上がりを共有したい！という私の願望がこもっています。笑
ライトスタンドの盛り上がりを３塁アルプスからでも共有したいというエゴです。笑
阪神ファンの方はぜひ！使ってみてください＾＾
阪神ファンじゃない方も触っていただけると、甲子園で野球が見たくなるはず！？笑

Github : 甲子園NOW Github
サービスURL ：　甲子園NOW!

開発環境

・Ruby on Rails 7.1
・Ruby 3.2.3
・Javascript
・VScode
・Git・Github

インフラ

・render
・render PostgreSQL
・Amazon S3

機能一覧

・ユーザー登録　( gem devise )
・いいね・コメント機能　( turbo )
・位置情報登録機能　（ Geolocation API、Javascript ）
・アイコンの表示機能　（　turbo、Javascript　）
・カレンダー機能　（ gem simple_calendar ）
・コメント通知機能　（　line-bot-api　）
・OmniOAuth認証機能　（　Google+ API、LINEログイン　）

ビジョン・ポイント

当初から思い描いていたビジョンとしては、甲子園球場内での使用が主となるので、スマホユーザーを前提としたアプリ設計を意識していました。
レスポンシブデザインに対応することでスマホでもPCでも見やすいように工夫しました。
OmniOAuth認証を実装することで、パスワード入力の煩わしさを無くし、ログインのしやすさを意識しました。
どこにどれくらいのユーザーがいて、それぞれどのように楽しんでいるかを一目で確認できるような設計を意識しました。
以降は本開発で特に苦労したこと、工夫したことを記載していきます。

位置情報機能

この機能はこのアプリのメイン機能なので、特にこだわりました。

Geolocation APIで緯度経度を取得して、seeds.rbに記載しているシートごとの緯度軽度の範囲と比較して現在位置を割り出すという感じです。

Javascriptファイルからseeds.rbのデータを直接持ってくることはできないので、Ruby on RailsのActiveModel::Serializer を使用して、APIエンドポイントからデータを持ってくることに成功しました。

実際に甲子園球場にPC持っていって、中の通路を移動しながら位置情報を取得してテストを実施しました。

詳細記事はこちら

アイコンの表示機能

上記で取得した位置情報に好きなアイコンをつけて、甲子園球場の画層の上にアイコンを該当のシート位置に表示させる機能です。

甲子園球場の画像を縦横 ( x.y )１００％比率で設定して、seeds.rbにポリゴン（多角形）でpointsとしてJSON形式で保存。

例えばバックネットは、

seeds.rb

seat_name: "backnet", points: [{ x: 36, y: 72 }, { x: 25, y: 81 }, { x: 32, y: 86 }, { x: 58, y: 86 }, { x: 67, y: 81 }, { x: 55, y: 72 }] }

という感じで定義していきました。

ちなみに甲子園球場の緯度軽度の情報も上記のpointsの取得もどっちも手作業です(^^;

詳細記事はこちら

カレンダー機能

Google Calendarを実装していた方が楽だったかな。。。と思いながら、simple_calenderでなんとか実装できました。

試合日程をすぐに確認できるように、カレンダーの右上に月のリンクを用意しているのですが、このリンクを踏むと任意の月の１か月の試合データが閲覧できるというふうにしたくて、これがかなり大変でした。
simple_calendarにはPrevious（先月）、Next（来月）がデフォルトで提供されていますが、それだとひと月ごとにしか移動できないので不便だなと思い、show_month.html.erbというファイルを作成して、リンクを踏んだらshow_monthで月のデータを取得して表示させるようにしました。
でも試合データやイベントデータは手入力です(^^;
Ruby on Railsにもスクレイピングありますが、Python勉強したいので、その後スクレイピング入れる予定です！

詳細記事はこちら

コメント通知機能

LINE Messaging APIの甲子園NOW!のアカウントを作成して、そのQRコードを読み取ってもらい、アカウントを友達追加したら「通知設定」とメッセージを送ると、ワンタイムコードとリダイレクトURLを送信するようにしました。

そのリダイレクトURLでアプリに戻ってログインして、ワンタイムコードを入力するとユーザーのLINEアカウントIDと甲子園NOW!のアカウントIDが連携されます。

連携されるとそのユーザーの投稿にコメントがついたら、LINEに「あなたの投稿に〇〇さんからコメントがあります。（コメント内容）（該当の投稿の詳細のURL）」が送られてくるようになります。

これによりユーザ交流のリアルタイム性が高まり、メッセージのやり取りが容易になります。

こちらは詳細記事が工程ごとに分かれています。
以下は画像付きでLINE Developerの登録の仕方から細かく載せています。

OmniOAuth認証機能

スマホユーザー対象にしているので、LINEログインはつけたいなと考えていました。

そしてタイガースファンのおっちゃんたちは認証怖いから通常ログインがいいとか言いそうと思って通常ログインも残しました。

オンラインスクールの卒業制作ということもあり、講師も生徒もPCで触ってくれる機会が多いだろうなということでGoogle認証もつけましたが、これらを連携させるのがなかなか大変でした。

emailを起点としてユーザー検索をしているので、通常ログインとGoogleログインは連携できたのですが、LINEにはメールアドレスを登録していない方が多いので、nilで送られてきた場合はカスタムアドレスを設定してバリデーションを回避しました。

ただそうするとアカウント連携ができないので、カスタムアドレスで登録しているユーザーはメールアドレスの登録を促すモーダルをトップページに表示させるようにしました。

テーブル構成

今回自分で思っていたより機能が多かったので、それに伴ってテーブルもかなり多くなってしまいました。

簡単に解説すると、
・ユーザーテーブル
・投稿テーブル
・コメントテーブル
・いいねテーブル
・座席テーブル（甲子園の画像上にアイコン出す方）
・ユーザーの座席テーブル（ユーザーが保持しているアイコン位置を保存する）
・シートテーブル（現実の座席位置情報を保持する方）
・試合テーブル
・ユーザーに紐づく試合テーブル
・イベントテーブル
・イベントの日付テーブル
・通知テーブル
・ワンタイムコードテーブル
・SNSログイン情報テーブル

あとここに画像のアップロードにActive Storageを使用しているので、3つテーブルが加わっています。笑
めっちゃ多い。。。笑

今後のアップデートについて

機能実装を最優先でやっていたので、もう少し見た目に気を遣って、UI/UXの向上に努めたいと考えています。
具体的にはReactを使用したエフェクトの追加です。
位置情報の登録後にXシェアを促すモーダルを表示していますが、ここにアニメーションをつけたり、投稿後、ログイン後、登録後、いいね時などにうるさくならない程度につけていきたいと考えています。
そして先述しましたが、Python勉強時にスクレイピングで試合情報を取って来れるようにして、更新の手間を減らしたいと考えています。
今後の勉強を兼ねてより充実したアプリにしていきたいと考えています。

最後に

最後までご覧いただきありがとうございます！
未経験なのに実装テストなどあまりしないまま実装を進めてしまっていたので、壁にぶつかるばかりでしたが、完成したときは感動でした。
そして機能内容については後々詳しく記事を書いていこうと考えています。
まだまだ至らないところもありますが、今後もより良いアプリ開発に努めたいと考えています！