【個人開発】自転車好きのための投稿サービスを開発しました

## はじめに
初めまして、[きよ](https://twitter.com/kiyo_rteq44)と申します。
こちらは、先日(2024/4/2)にリリースしたWebサービス「ChariLog」の紹介記事となります。初めての記事執筆なので拙い点も多いかと思いますが、その点何卒ご了承ください。

もしよろしければ最後までご覧ください！

## 目次

1. [サービス概要](#サービス概要)
2. [サービス作成の経緯](#サービス作成の経緯)
3. [サービス紹介](#サービス紹介)
4. [工夫した点](#工夫した点)
5. [使用技術](#使用技術)
6. [インフラ構成図](#インフラ構成図)
7. [er図](#er図)

## サービス概要
### サービス名 ： 「<ins>ChariLog(チャリログ)</ins>」

自慢のカスタムや友人とのツーリングなどの思い出を写真・カスタムパーツ(アイテム)と共に発信できる、 **自転車というツールに特化した投稿サービス**です。

![charilog-introduction-image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745701/3753f69c-60f0-4f44-70d6-6801f83f30ae.jpeg)
【サービスURL】https://charilog.jp
【Githubリポジトリ】https://github.com/kiyosan0517/charilog

## サービス作成の経緯
- **自転車の楽しさを共有できる友人づくりに多少苦労した経験があったため**
=> アメリカやヨーロッパ圏などではBMXやロードレース等を中心とした自転車競技がメジャースポーツとして発展しているものの、日本においては健康志向の中年層がメインに利用するマイナースポーツに留まっているのが現状です。
特に10~20代の若年層の利用者人口は少なく、私自身趣味である自転車の楽しさを共有できる友人づくりに多少苦労した経験がありました。

- **SNSの投稿を見ても詳細なカスタムパーツ等を確認できないことが多いため**
=> 自転車は非常にカスタム性が高く、持ち主の個性が強く出る乗り物ですが、XやFacebookに投稿された画像等を見ても、どんなメーカーのどのようなパーツ/アイテムを使ってカスタムしているのかを分かりづらいと感じる時がありました。

  そこで、`自転車という共通の趣味を持った友人を作りたい方のニーズ`、`カスタムアイテムを見てみたい方のニーズ`を満たせるような、自転車に特化した投稿サービスを考案しました。

## サービス紹介
**1. ログ投稿ページ**
- ログの投稿には、**画像**、**タグ**、**タイトル**、**投稿本文**、**移動ルート**、**カスタムアイテム**の6つを登録して投稿することができます
- ログ投稿には、以下のような注意点があります
  - <ins>**投稿画像**</ins>
    - 最大4枚まで添付可能
    - 画像サイズ1枚あたり5MBまで
  - <ins>**ルート登録**</ins>
    - [タップ]or[クリック]で<ins>A → B → C</ins>の順に設定
    - 3地点設定後に【ルート表示】押下で登録可能
    - 投稿後の編集/削除不可
  - <ins>**アイテム登録**</ins>
    - 最大4つまで登録可能
    - 投稿後の追加/削除不可

| ログ投稿 | ログ投稿 |
| :---: | :---: |
| ![charilog-post-new](https://github.com/kiyosan0517/charilog/assets/131296049/3a61ca3e-fffc-460a-9100-3e916f6faa85) | ![charilog-post-new2](https://github.com/kiyosan0517/charilog/assets/131296049/2a06f49c-c49a-4bd3-9b12-46b510488656) |

<br>

**2. ログ詳細ページ**
- 投稿後はログ詳細から内容を確認することが可能で、カスタムアイテムに関しては**商品画像**、**商品名**、**価格**の他に、<ins>**楽天へのリンク**</ins>も確認できます
- `XやLINEでのシェア`や`他ユーザーの投稿へのいいね`、`投稿内でのコメント`等の機能も実装してあります

| ログ詳細 | ログ詳細 |
| :---: | :---: |
| ![charilog-post-show](https://github.com/kiyosan0517/charilog/assets/131296049/fda1b7d1-1dc0-4f99-b324-8fa9ac409290) | ![charilog-post-show2](https://github.com/kiyosan0517/charilog/assets/131296049/dfb9fc3d-aeae-49b0-bbd8-ec123fd5be08) |

<br>

**3. 各投稿一覧ページ**
- ホームでは**全てログ**が、いいね一覧では**いいねしたログ**が、ユーザー詳細では**各ユーザーのログ**が表示されるようになっています
- ホーム / いいね一覧では`検索機能と並べ替え機能`が利用でき、ユーザー詳細では`並び替え機能`が利用できます

| ログ一覧（ホーム） | いいね一覧 | マイページ<br>（ユーザー詳細） |
| :---: | :---: | :---: |
| ![charilog-posts-index](https://github.com/kiyosan0517/charilog/assets/131296049/cdec1e12-482f-4377-b1d6-24913e6d3245) | ![charilog-likes-index](https://github.com/kiyosan0517/charilog/assets/131296049/0dcdd941-7a68-4437-b670-c051651b41f8) | ![charilog-user-show](https://github.com/kiyosan0517/charilog/assets/131296049/0ba4e1d9-f064-453e-a424-82696a8eef24) |

## 工夫した点
**1. 投稿がログ投稿ページ内で完結するように実装**
アイテム登録に関して、サービス開発当初は各ユーザーにアイテムを登録してもらい、投稿時にその登録したアイテムの中から選択して紐付ける方法を想定しておりました。

しかし、その方法では未登録のアイテムを投稿に紐付けたい場合、`アイテム検索=>アイテム登録=>ログ投稿`というプロセスを踏む必要があるため、UXの観点からも投稿ページで全て完結するように実装する方が良いと考えました。

そこで、下記のように<ins>`モーダル表示=>検索=>楽天APIから情報取得=>「選択」ボタン押下でデータセット=>投稿`</ins>という流れにすることで投稿ページ内にて完結するように実装しました。

![charilog-rakuten-api-gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745701/57f6d189-b4bd-b028-bca9-17d1ea48b5b6.gif)

また、Google Map APIを利用したルート登録に関しても、以下のように画面遷移を伴わず、ログ投稿ページ内で完結するように実装しております。

![charilog-google-map-api-gif](https://github.com/kiyosan0517/charilog/assets/131296049/d6db5d06-05c8-469b-ac20-30ce7df84719)

<br>

**2. UIを意識したレスポンシブ対応**
これはあくまで私個人の考え方 / 性格になりますが、私は何かを買う時、どのアプリを利用するかを選択する時など、まず第一に**使いやすさ**や**機能性**に目を向けて考えてしまいます。

そのため、きっと同じような視点でサービスを選択する人も多いかと思い、<ins>どのデバイスからアクセスしてもコンテンツが崩れないよう</ins>、かつ<ins>使いやすいようなサービスになるよう</ins>、特に**レスポンシブ対応**には意識して開発を進めました。下記は一例になります。

- スマートフォン等の小さなデバイスの場合、主要な機能へ遷移可能なナビゲーションフッターが表示
- PC等の大きなデバイスの場合、主要な機能へ遷移可能なナビゲーションサイドバーが表示（スマートフォン等の場合、フッターから遷移可能なコンテンツがサイドバーから非表示となり、サイドバーを表示するためのトグルボタンがヘッダー内に表示）
- タブレット等の中サイズの画面以下では、ヘッダー部分に各ページに応じたタイトルと前のページに戻るための戻るボタンが表示

![charilog-responsive-gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3745701/557854e7-52b7-7a6e-0b0d-67e6aeb96a12.gif)

## 使用技術
### フロントエンド
- Bootstrap
- JavaScript
- jQuery
- Stimulus
- Sass

### バックエンド
- Ruby（3.1.0）
- Rails（6.0.6.1）
- PostgreSQL（14.10）

### 外部API
- [商品価格ナビ製品検索API](https://webservice.rakuten.co.jp/document/)（楽天API）
- [Google Maps Platform](https://developers.google.com/maps?hl=ja)（Google Map API）

### インフラ
- AWS
  - EC2
  - RDS（PostgreSQL）
  - Route53
  - ALB
  - S3
  - CloudFront
- puma
- Nginx

## インフラ構成図
![charilog-infrastructure](https://github.com/kiyosan0517/charilog/assets/131296049/e9469572-5028-469b-a246-b0b563bbf465)

## er図
![charilog-table](https://github.com/kiyosan0517/charilog/assets/131296049/5a387e02-8b1c-458b-b28f-380f363a9b2f)

## 最後に
初めての個人開発で何度も壁にぶつかり挫けそうにもなりましたが、スクールのサポートもあり、無事サービスをリリースすることができました。

足りない知識をキャッチアップしながら開発すること、頭の中で描いた想像を形にしていくことは知識の乏しい私にとって難しいことでしたが、その反面開発の楽しさと多くの学びを実感できたように感じております。

今後は利用者の方からいただいたフィードバック等を基に、更なるサービス向上に努めてまいりたいと思います。最後までご覧いただき誠にありがとうございました。