はじめに
はじめまして！タク と申します。
未経験からWebエンジニアへの転職を目指して、働きながらプログラミングスクールで学習を続けております。
この度、「サ飯の時間」というアプリをリリースしました！
サウナ後のご飯「サウナ飯」、通称「サ飯」を記録・共有することで、
▶︎ サウナ愛好家の方へ
「サ飯」を通して新しいコミュニティ
サウナ ⇨ サ飯のモデルコース
▶︎ サウナ初心者の方へ
サウナへの新しい入り口
を提供することを目指したCGMサービスです。
サービス
開発期間：３ヶ月
サービスURL
Github
エンジニア転職チャンネルで取り上げていただきました！
開発背景
私にとってのサウナとは、10年以上続く唯一の趣味です。
大学在学中に当時通っていた美容師さんとの会話の中でサウナと出会い、自身の境遇の変化に比例して、変化のあった関心が多い中、変わらず大好きで行かずにはいられないサウナ。
初めてのアプリ開発は、やはりそんな大好きなサウナに関連したものを作りたいと考えました。
昨今のブームにより、サウナー（サウナ愛好家）が増え、
そのおかげもあり、サウナ施設の母数も増え、
各サウナ施設がどんどん力を入れて設備改革していて、
サウナに特化したアプリやWebサービスも増えているなか
当時まだ世になかったサウナ飯に着目したアプリを開発しようと考えました。
メイン機能
※はログイン限定機能
周辺サウナ検索
DBに保存されている現在地周辺のサウナ施設がマップ上に表示されます。
サウナ施設詳細ページにリンクすると、サウナ施設に紐づいた投稿が一覧表示されます。
現在の対応エリア（順次拡大中）
新潟県、福島県、富山県、長野県、石川県、東京都、埼玉県、千葉県、神奈川県、山梨県、静岡県、愛知県、大阪府、京都府、福岡県、宮崎県、鹿児島県
投稿一覧
多様な組み合わせで検索が可能です。
投稿詳細
直感的に操作が可能で、ユーザーと気軽にコミュニケーションが図れる設計。
投稿詳細ページからXシェアが可能です。
※ いいね＆コメント
非同期通信でブラウザにリアルタイムで反映されます。
表示はログイン後の画面です。
※ 新規投稿
サウナ施設入力欄はオートコンプリート機能が備わっており、DBに保存されているサウナ施設から選択していただく必要があります。
各都道府県、現在約100施設ずつの登録です。
※ マイページ
タブコンポーネントはtailwindcss-stimulus-componentsで整形。
タブ内はturbo_frame_tagを使用し、ページリフレッシュせずにコンテンツをロードできるようにしました。
技術スタック
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Rails 7.1.3( Hotwirw / Turbo ), Javascript, TailwindCSS, DaisyUI |
| バックエンド | Rails7.1.3, Ruby3.2.2 |
| データベース | PostgreSQL |
| 環境構築 | Docker |
| インフラ | Fly.io |
| Web API | Google Maps API( Maps Javascript API / Places API ) |
技術選定理由
フレームワーク
働きながらの開発であったため、開発速度で圧倒的に優れていると感じているRailsを採用。
主な使用想定がスマホなため、レスポンシブ対応が容易であり、コードの記述量を削減できるという理由でTailwindCSSを採用。
Google Maps API
Maps Javascript API
アプリ内にGoogle Mapの表示。
Google Map内に各サウナ施設の位置にピン立てする機能。
Places API
サウナ施設の詳細情報を収集・DBへ保存。
開発環境・インフラ
Dcoker
スクラップ＆ビルドが容易。
スクールのカリキュラムでの使用経験と転職後の開発も意識。
Fly.io
東京リージョンがあり、無料枠がある。
DBはFly.ioがデフォルトで提供するPostgreSQLを採用。
ER図
工夫した点
UI / UX
固定されたヘッダーとボトムナビゲーションにより、トップページとメインの機能に関してはどのページにいてもワンタップでページ遷移することができるようにしています。
基本的にアプリ内の閲覧にユーザー登録、ログインは不要にしてあり、ログインする必要があるページに遷移しようとした際にのみ、ログイン、新規登録ページに遷移するように設計しました。
今後の展望
1. テスト
開発中はテストが書けていなかったため、テストコードを追加しカバレッジを上げていきたいです。
2. 対応エリア拡大
Google Maps APIのコストと相談しながら順次対応エリアを拡大します。
3. リファクタリング
継続的にアップデートしつつアプリを育てていきたいと考えているので、開発効率向上のため随時リファクタリングします。
おわりに
アプリ開発にあたり、スクール関係者の皆様には特に多大なGiveをいただきました。
本当にありがとうございました！
初めての記事投稿で至らない点も多いかと思いますが、今後は継続的に技術的なアウトプットを通して、自身の成長と、必要としている方へのGiveを実現していけるよう精進します。
最後まで読んでいただきありがとうございます！
この記事を書いた人