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

はじめに

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

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

サービス概要

サービス名：「ChariLog(チャリログ)」

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

【サービスURL】https://charilog.jp
【Githubリポジトリ】https://github.com/kiyosan0517/charilog

サービス作成の経緯

自転車の楽しさを共有できる友人づくりに多少苦労した経験があったため
=> アメリカやヨーロッパ圏などではBMXやロードレース等を中心とした自転車競技がメジャースポーツとして発展しているものの、日本においては健康志向の中年層がメインに利用するマイナースポーツに留まっているのが現状です。
特に10~20代の若年層の利用者人口は少なく、私自身趣味である自転車の楽しさを共有できる友人づくりに多少苦労した経験がありました。
SNSの投稿を見ても詳細なカスタムパーツ等を確認できないことが多いため
=> 自転車は非常にカスタム性が高く、持ち主の個性が強く出る乗り物ですが、XやFacebookに投稿された画像等を見ても、どんなメーカーのどのようなパーツ/アイテムを使ってカスタムしているのかを分かりづらいと感じる時がありました。

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

サービス紹介

1. ログ投稿ページ

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

ログ投稿	ログ投稿

2. ログ詳細ページ

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

ログ詳細	ログ詳細

3. 各投稿一覧ページ

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

ログ一覧（ホーム）	いいね一覧	マイページ（ユーザー詳細）

工夫した点

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

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

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

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

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

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

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

使用技術

フロントエンド

Bootstrap
JavaScript
jQuery
Stimulus
Sass

バックエンド

Ruby（3.1.0）
Rails（6.0.6.1）
PostgreSQL（14.10）

外部API

商品価格ナビ製品検索API（楽天API）
Google Maps Platform（Google Map API）

インフラ

AWS
- EC2
- RDS（PostgreSQL）
- Route53
- ALB
- S3
- CloudFront
puma
Nginx

インフラ構成図

er図

最後に

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

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

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

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