【個人開発】キャンプを記録するサービスTAKiBee（タキビー）をリリースしました!

### サービス概要
キャンプの写真・キャンプギア・場所の記録できる投稿型のサービスです。
URL：https://www.takibee.net
Github：https://github.com/MocoAristo/set_camp

### 開発の経緯
私の趣味がキャンプでよく行くのですが、キャンプをするには非常に多くのキャンプグッズが必要になります。衣・食・住を全て大自然の中で行うわけなので当然なのですが、キャンプに忘れ物をしてしまうとめちゃくちゃテンション下がってしまいます。
キャンプグッズをうまく整理したい！！ということで、今回のサービスを開発することにしました。

### 主な使用技術
・Ruby 3.0.0
・Rails 6.0.3
・jQuery 3.3.1
・Bootstrap 4.3.1
・[楽天商品価格ナビ製品検索API](https://webservice.rakuten.co.jp/document/)
・[Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/overview)
・Heroku
・AWS S3

### サービスの紹介
#### ①TOPページ
 ・新規登録
 ・ログイン
 ・ゲストユーザーログイン
手軽に中身を確認してもらうために、ゲストユーザーログインを実装しています。
<img width="1440" alt="top" src="https://user-images.githubusercontent.com/67957898/124103404-355d6a80-da9c-11eb-999a-fee290216d77.png">
-
#### ②投稿機能
・写真
・キャンプグッズ
・キャンプ場
・日付
・コメント
を投稿することができます。キャンプにどのキャンプグッズを持って行ったかが一目で確認できるので、キャンプグッズ整理に役立ちます。また他のユーザーのキャンプグッズもみることができるので、このキャンプグッズいいな〜、おしゃれだな〜とキャンプグッズ知見が深まります。
<img width="1440" alt="投稿一覧" src="https://user-images.githubusercontent.com/67957898/124104284-14494980-da9d-11eb-9318-b351ac44f086.png">
-
#### ③アイテム登録機能
マイアイテムとしてキャンプグッズを追加することができます。
<img width="1440" alt="アイテム追加" src="https://user-images.githubusercontent.com/67957898/124123750-a0b23700-dab2-11eb-9444-59e3f87330e9.png">

### 工夫したこと
#### ①ユーザーの入力負荷を減らす
投稿型のサービスであるため、投稿してもらえなければサービスとして成り立ちません。キャンプを本格的にやっている人はキャンプグッズを100種類近くは持っているので、商品名・メーカーなど全て入力して記録するのは非常に負荷が高くなります。
本サービスでは、キャンプグッズの情報を[楽天商品価格ナビ製品検索API](https://webservice.rakuten.co.jp/document/)を利用して取得し、ワンクリックで登録することができます。楽天のAPIはSDKとして[rakuten_web_service](https://github.com/rakuten-ws/rws-ruby-sdk/blob/master/README.ja.md)を使用できるので簡単に商品情報を取得できます。
またキャンプ場の登録も[Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/overview)を使用することでユーザーの入力負荷を下げています。
<img width="1440" alt="プロフィール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661628/89cf055e-f6e0-6593-a09f-37187708538a.png">



#### ②投稿がポジティブになるちょっとしたお楽しみ機能をつける
投稿するたびに自分のパラメーターが成長すれば、投稿が楽しくなってみんなに使ってもらえるといいな〜、と思ってレーダーチャートをプロフィールページに表示しています。投稿数・アイテム数などに応じてレーダーチャートが成長していきます。各項目がどのアクションによって成長していくかも含めてちょっとした楽しみにしてもらえれば嬉しいです。
レーダーチャートの導入方法は[こちら](https://www.notion.so/Chart-js-c91507b9f05c496fb6141a656963ce04)でまとめていますので、気になる方はご覧ください。

<img width="1440" alt="プロフィール" src="https://user-images.githubusercontent.com/67957898/124128798-140a7780-dab8-11eb-8038-d8e4d1364180.png">

また、オリジナルのいいねボタンのアニメーションも導入しました。いいねボタンを押すのがちょっと楽しくなりますね。アニメーションについても導入方法をまとめましたので、[こちら](https://www.notion.so/a9a76f41d43c45d79b757af34f9b4127)をご覧ください。
![5cc05020be8e8cc9d4f06bfe9fce7c76.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661628/9115c657-7c60-7a7a-1499-5cfa478aeeb9.gif)

### 今後実装したい機能
キャンプグッズをさらに整理しやすくするために、下記の機能を実装できればと思います。
・キャンプグッズをカテゴリーごとに整理できる機能。
・マイアイテム内でキャンプグッズを並べ替える機能。
・人気キャンプグッズランキングの表示機能。

### ER図
![erd](https://user-images.githubusercontent.com/67957898/123559729-c7355100-d7d8-11eb-9667-3a710b2145f2.png)

### インフラ構成図
![image](https://user-images.githubusercontent.com/67957898/123647030-b4fff500-d862-11eb-8c84-a2c25a5fabd7.png)


### 最後に
初めてWebサービス開発でしたが、非常に思い入れのあるサービスにすることができました。また多くの人からフィードバックをいただき、サービス改善に努めています。ありがとうございました！みなさんもキャンプに行くときは、ぜひTAKiBeeを使ってみてください。気になった点はコメントで教えてもらえると嬉しいです！！