『Tamari-Ba』とは
- アプリ名: Tamari-Ba
「たまりば」と読みます。バイク乗り達が自分のバイク、好きな道、きつかった道、楽しかった道の駅等を語り合う「たまり場」をイメージして作成。
いつも行くあのカフェ、あの道の駅等の集まってダベれる「たまり場」のように好きなスポットについて語り合えるようなアプリに仕上げました。
制作背景
友人とバイクでツーリングに行く際に、目的地までの道が重要なのだが道を紹介するサイトが少ない（もしくはバイク乗りなら誰でも知っているような内容しかなかった）という課題から、
道やスポットを紹介し、道やスポットについて交流するWEBアプリを作ろうと考えました。
使用技術
-
フロントエンド
- HTML / CSS(Sass)
- Bootstrap 4.5
-
バックエンド
- Ruby 2.7.2
- Ruby on Rails 6.1.3
- JavaScript
- GoogleMapsAPI (Maps JavaScript API, Geocoding API)
-
インフラ
- MySQL 5.7
- Nginx 1.20
- Puma 5.3.2
- AWS (VPC, EC2, S3)
- CircleCI
- Docker 20.10.8
- Supervisor
機能一覧
- ユーザー関連
| 機能 | |
|---|---|
| 1 | アカウント登録/削除機能 |
| 2 | ログイン/ログアウト機能 |
| 3 | ゲストログイン機能 |
| 4 | アカウント情報編集機能 |
| 5 | ユーザー情報 - 都道府県 |
| 6 | ユーザー一覧 |
- 投稿機能
| 機能 | |
|---|---|
| 1 | 投稿機能(CRUD) |
| 2 | GoogleMaps表示機能 |
| 3 | マップ検索機能 |
| 4 | 座標取得/保存機能 |
| 5 | マーカー設置機能 |
| 6 | コメント機能 |
| 7 | いいね機能 |
| 8 | 投稿検索 |
| 9 | 投稿一覧 |
| 10 | 管理者権限(全投稿削除権限) |
できること
1. トップページ
- ログイン状態に応じて、リンクボタンを表示分けさせています。
- 非ログイン状態：ログイン/ゲストログイン
- ログイン状態：アプリトップ
- 最新３件分の投稿を表示
- 機能の概要を説明
- 投稿詳細イメージを表示
2. 新規投稿
- マップの検索でマップ表示範囲を移動できます。
- 任意の箇所をクリックすることでマーカーを設置できます。
- 座標がデータベースに保存されます。
- その他にも画像保存、タイトル、説明文を入力することが可能です。
3. 投稿一覧
- 投稿一覧を見ることができます。
- 検索機能があるので、投稿を検索することができます。
- 9投稿でページネーションが適用されます。
4. 投稿詳細
- 保存された座標を元に地図上にマーカーを表示します。
- 投稿者本人がログインしている場合には編集/削除ボタンが表示され実行できます。
- 保存された画像が表示されます。
- コメント欄に入力して「コメントする」をクリックすることで、コメント可能です。
工夫したこと/苦労したこと
工夫したこと
工夫したことは主に3つあります。
- 新規投稿時に、マーカーを付けたい箇所を簡単に探せるようにマップ内の検索機能を実装
- Dockerでの環境構築やCircleCIを利用し、環境依存の解消やデプロイの自動化でデプロイ作業の効率化を実現
- ポートフォリオなのでアクセス負荷はないことを見込み、コスト削減のためRDSを使わずにEC2にMySQLを設置。万が一の負荷に起因するMySQL停止の500エラーに対応するため、swap領域を作り対応。
苦労したこと
苦労したことは主に以下の2つです。
- GoogleMapsAPIの実装。GoogleMapsの機能が多彩過ぎる分、自分が実装したい機能を実現するためには公式ドキュメントを読み込み、正しく理解する必要がありました。この公式ドキュメントを読み込む力は以下の実装にも活きています。
- Docker/CircleCI等のツール関連の学習です。AWS, CircleCI, Docker環境構築について1ヶ月未満でキャッチアップし実装しました。
これらのことについては、理解定着のため記事にまとめています。
記事のリンクは本記事の最後尾付近に貼っておりますのでぜひご覧ください。
ER図
インフラ構成図
- ポートフォリオなので大きなアクセス負荷はかからないという見込みからコスト削減のためRDSは使わずに構築しました。
まとめ
ポートフォリオとしてアウトプットすることで自分の実力がメキメキ付いてくるのを実感しました。
とはいえ、まだつけたい機能やフロント周りは改善の余地があるため転職活動を続けていく中で改善していこうと思います。
投稿記事
ポートフォリオ関連
ポートフォリオ作成に当たり、理解が難しかったもの、知識として足りないと思ったものに関しては記事にまとめています。
- 【GoogleMapsAPI】Rails6アプリにMapsJavaScript APIとGeocoding APIを導入してみた
- MySQLが起動失敗による500エラーの解消
- 【Docker】Rails6/MySQLのコンテナを作って開発環境を構築
- 【Amazon Linux2】【Rails】Nginxをpumaのunixドメインソケットでリバースプロキシする設定
- 【CircleCI】AWSにデプロイしたRails6アプリをCircleCIで自動デプロイ
- 【Rails6】rails sで起動できなくなった話
その他記事
以下は実案件受注やLT会の記事です。