7
5

More than 3 years have passed since last update.

【Rails,AWSを使用】僕が作成したポートフォリオの紹介をします。

Last updated at Posted at 2021-01-27

はじめに

フレームワークにRuby on Rails、インフラにAWSのEC2を使用してポートフォリオを作成しました。

正直なところ全体の完成度は6割程度でまだまだ改善の余地はあるのですが、一旦はサービスとして形になったので、振り返りの意味も含めアプリについて詳しく書いた記事を投稿しようと思います。

(不具合や未完成の部分については随時改善していきます)

アプリの概要

アプリ名:オフリード(英語で「リードを手放し自由にする」という意味)
URL:https://www.offlead-dog.com/
GitHub:https://github.com/yuuta-matsumoto/off_lead

ドッグトレーナーと犬を飼う人のマッチングサービスです。

【ドッグトレーナーとは】
犬に対してしつけや訓練を行う職業です。よく、ブリーダーと勘違いされる方が多いのですが、ブリーダーはペットの交配や出産、繁殖を手がけて市場に流通させる職業なのでドッグトレーナーとは異なります。
また、ドッグトレーナーの中でも職域によって仕事内容は変わってきます。
例えば、警察犬を訓練する人と一般家庭の飼い犬を預かって訓練する人では必要なスキルや仕事内容が大きく変わるそうです。

開発に至る経緯

サービスの内容はドッグトレーナーのマッチングサービスですが、目的はドッグトレーニングを普及させ、犬の殺処分問題の解決に少しでも貢献することです。

僕が殺処分問題を知ったのは高校生の時でした。
たまたまテレビから流れてきた映像のあまりの残酷さに衝撃を受けた事を今でも覚えています。
それ以来、なんとかならないのかなという気持ちを漠然と持ち続けてきました。

最初は保護犬を探せるサイトを作ろうと思ったのですが、競合するサービスが複数あったので、それならドッグトレーナーを気軽に探せるマッチングサービスはどうかと考えました。
きちんとしつけされた犬が増えれば、それが原因で捨てられる犬も減り、間接的にだが殺処分問題に貢献できるのではないか。そんな考えを経て開発に取り掛かりました。

使用イメージ

ユーザー一覧画面

ユーザー一覧.gif

ユーザーのマイページ

簡易的ですがSPAっぽくしています。
ユーザー詳細画面.gif

投稿詳細・口コミ投稿・いいね

投稿詳細⇨口コミ投稿.gif

使用技術

フロントエンド

  • jQuery 3.5.1
  • HTML&CSS/SCSS
  • Bootstrap4.5.3

バックエンド

  • Ruby on Rails 6.0.3
  • Ruby 2.6.3
  • RSpec 3.9

インフラ

  • MySQL 5.7.33
  • Nginx 1.22.2
  • AWS (EC2, ALB, ACM, RDS, Capistrano, Route53, VPC, EIP)

コンセプト

【ドッグトレーニングをもっと身近に】

欧米ではドッグトレーニングが文化として根付いている国もあるのですが、日本ではまだ言葉の意味すら知らない人が多いのが現状です。また、正しい飼い方の知識を持つ日本人も決して多いとは言えないでしょう。
とはいえ、人間の子育てにそれぞれのやり方があるように、犬のしつけも自由でいいはずです。
ですがそれは飼い方に対して、ある程度の知識を持っている前提の話だと僕は思います。

ドッグトレーニングは、本質的には「人間のトレーニング」です。
なぜならその先何年もの日々を共に過ごすのは、ドッグトレーナーではなく飼い主自身だからです。
また、犬の問題行動の8〜9割が飼い主自身によって引き起こされているという説もあります。

サービス名のオフリードには、英語で「犬のリードを手放し自由にさせる」という意味があるそうです。
犬と人間が今よりも良い形で共存する為にドッグトレーニングの普及は必要不可欠であると考えています。

DB設計

ER図

スクリーンショット 2021-01-27 21.10.30.png

テーブル設計

テーブル名         説明           
users 登録ユーザー情報
posts ドッグトレーナーが投稿するプラン
relationships フォロー・フォロワー関係を管理
likes いいねを管理
reviews 口コミを投稿
messages DM機能のメッセージ内容を管理
entries usersとroomsの中間テーブル
rooms メッセージルームを管理

機能一覧

ユーザー認証

  • ログイン、ログアウト、会員登録
  • プロフィール編集
  • ゲストログイン

投稿機能

  • ドッグトレーナーがプランを投稿(プラン名、内容、金額)

口コミ投稿機能

  • 投稿されたプランに対しての口コミ
  • 星評価
  • プロフィール画面で投稿一覧が見られる

メッセージ機能(メンテナンス中)

  • ユーザー同士で1対1のメッセージが可能
  • メッセージボタンを押すと新規メッセージルームが作成される。
  • (作成済みの場合は既存のメッセージルームにリダイレクト)

画像アップロード(CarrierWaveを使用)

  • プロフィール画像のアップロード
  • プラン投稿時の画像アップロード

フォロー機能

  • フォローボタンを押すとフォロ、フォロー解除が行える
  • プロフィール画面でフォロー中、フォロワーが見れる

いいね機能

  • 投稿されたプランにいいねができる
  • プロフィール画面でいいね一覧を確認できる

工夫したポイント

開発の際に現職のドッグトレーナーの方からの意見を聞き、その内容を取り入れました。

アプリの概要が決まり、要件定義など諸々の準備が整っていざ開発、という時に僕の中でふと「これって本当にニーズあるの?」という疑問が生まれました。
当たり前ですが、ユーザーの潜在的なニーズを満たすサービスでなければ使ってもらうことはできません。
自分なりに考えを落とし込んだつもりでしたが、実際のユーザーに意見が聞きたい、そう思いツイッターを通じて現職のドッグトレーナー10名にお声がけしたところ、ありがたい事に2名からご返信を頂き、話を聞くことができました。

実際にお話を聞いてみると、自分の知らなかった事や考えの至らなかった点がたくさん聞けたのですが、その中でも以下の2つは特に参考になりました。

  • ドッグトレーナーは個人事業主が多く、そのほとんどは自分でWEBサイトを運用している。
    ⇨オフリードがある程度の集客ができるプラットフォームになれば、自前サイトを運用しなくてもよくなり、コストカット・手間削減につながるはず。

  • サイト内でユーザー同士が直接やりとりできた方が成約率は上がると思う。
    ⇨当初予定にはなかったDM機能を実装する。

それまでの僕は、いかにサービスを完成させるかだけに注力していました。ユーザーファーストで考える事の大切さを肌で感じる事のできた貴重な体験だったと思います。
ご協力頂いたお二人からは「ニッチな領域だが発想は面白い」「完成したらぜひ協力させてください」と言って頂けました。

ただ、ユーザーの話を鵜呑みにしてそれを採用することは誰にでもできるので、今後似たような機会があった際には、ユーザーの意見を知った上で鵜呑みにせず、何を提供すればそのニーズを満たせるのかの最適解を探せるエンジニアになりたいです。

苦労したポイント

独学での作業で、知り合いのエンジニアもいなかった為、最初から最後まで苦労しっぱなしですが、その中でフロントエンド、バックエンド、AWSに分けて紹介していこうと思います。

フロントエンド

  • 細かいスタイルの調整(SCSS)

フロントエンド

  • メッセージ機能の実装
    ⇨多対多のDB構造を理解するまでの時間がかかりました。
    また、コントローラーの記述が複雑で他の機能を実装する時よりも苦労した記憶があります。

  • モデルのアソシエーション
    ⇨全体的にActive Recordの関連付けでは苦労しました。

AWS

  • プリコンパイル
    ⇨デプロイ時にasset:precompileが実行できず、3日以上ハマってしまいました。
    最終的にSprocketsに移行することで解決。

  • Capistranoの導入
    ⇨Unicornの設定で手こずったり、環境変数の渡し方を間違えていたり複数箇所でつまづいてしまいました。
    このあたりから公式のリファレンスを参照することを意識していました。

最後に

総じて技術的な内容よりも、エピソードや自分の思っていることをメインに綴った記事になってしまいました。
技術的にはまだまだ未熟なので引き続き学習を続けていこうと思います。

今後の実装・改修予定

  • メッセージ機能(1対1のメッセージルームを正常に作成)
  • デザイン全体の改善
  • レスポンシブ対応にする
  • 通知機能
  • 絞り込み検索
  • ユーザーの属性毎にインターフェイスを分ける(ドッグトレーナーとその他のユーザー)
  • Vue.jsを用いたSPA化
  • 安全なテストコードの記述
  • 決済機能の導入

追加機能の実装やアプリの改修を行った際には随時、記事にまとめて投稿していく予定です。
最後までご覧頂きありがとうございました。

7
5
1

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
7
5