11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-04-02

はじめに

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

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

目次

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

サービス概要

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

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

charilog-introduction-image
【サービス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つまで登録可能
      • 投稿後の追加/削除不可
ログ投稿 ログ投稿
charilog-post-new charilog-post-new2

2. ログ詳細ページ

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

3. 各投稿一覧ページ

  • ホームでは全てログが、いいね一覧ではいいねしたログが、ユーザー詳細では各ユーザーのログが表示されるようになっています
  • ホーム / いいね一覧では検索機能と並べ替え機能が利用でき、ユーザー詳細では並び替え機能が利用できます
ログ一覧(ホーム) いいね一覧 マイページ
(ユーザー詳細)
charilog-posts-index charilog-likes-index charilog-user-show

工夫した点

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

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

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

charilog-rakuten-api-gif

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

charilog-google-map-api-gif


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

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

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

charilog-responsive-gif

使用技術

フロントエンド

  • Bootstrap
  • JavaScript
  • jQuery
  • Stimulus
  • Sass

バックエンド

  • Ruby(3.1.0)
  • Rails(6.0.6.1)
  • PostgreSQL(14.10)

外部API

インフラ

  • AWS
    • EC2
    • RDS(PostgreSQL)
    • Route53
    • ALB
    • S3
    • CloudFront
  • puma
  • Nginx

インフラ構成図

charilog-infrastructure

er図

charilog-table

最後に

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

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

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

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?