未経験からのWeb系エンジニア転職を目指し、ポートフォリオサイトをRuby on Railsで作成しました。
アプリケーション
アプリケーション：「PICK OUT」
※Herokuで動かしているので最初のページの表示に時間がかかる場合があります
(2022/10/24追記)この記事を参考にHerokuにアドオンを追加し対応しました。
(2022/11/29追記)現状公開していません。
ソースコード：https://github.com/bellmmm/original_rails_app
アプリケーション概要
アカウントを作成したユーザーに対し、テストを通してユーザーの服の好みを判断し、ユーザーの好みに合わせて洋服をおすすめするアプリケーションです。
目的
自分の好きな服、似合う服をはっきりと認識している人は少ないと思います。私もECサイトで服を購入したり店舗で試着をしてみて、しっくりこないと感じたことが多くあります。そこで、人はそれぞれ好まない要素が無意識にあると仮定しました。このWebアプリでは、ユーザーがしっくりこない服をいくつか選ぶことで好まない要素を想定し、それを持たない服をおすすめ商品として提示することで、ユーザーがより似合う服を発見することを手助けします。
使用イメージ
アプリを利用する際の操作方法の動画です。
- ゲストユーザーとしてログイン
- 好まない服の選択し、submitする
- おすすめ服の確認
- 再度好まない服の選択し、submitする
- おすすめ服の確認
開発で苦労したこと
5つのテーブルを繋げること
チュートリアルを読み直しながら関係性を設定しました。
テーブルをまたがって欲しい要素を取り出すこと
SQLの本を見直しながら、テーブルを結合して欲しい要素を取り出しました。
プログラミング、Webの勉強
技術を習得し、自分の手でサービスを作りたい、という思いから勉強を始めましたが、ここまで来るのにかなり時間がかかりとても苦労しました。最初はWordpressでブログを作るところから始め、コンピュータやWebの基礎的な知識を勉強した後、Railsチュートリアルを完走し、このポートフォリオサイト完成までこぎつけました。ここまで勉強したこと、読んだ本、作ってみたものについては以下の記事にまとめています。
その他工夫したこと
商品に関連付ける要素を想定よりも減らした
現状では商品のデータ数が多くないため、ユーザーのdislike要素(テストを通して判断したユーザーの嫌いな要素)を取り出すSQL文において、“テストで要素が2回以上選択された場合”としています。
そのため、多くの商品で関連付けられている要素があると、その要素が"dislike"要素になりやすくなってしまいます。
上記の理由から、商品間であまり共通していない要素を使用することにしました。
効率的な開発を心掛けた
- masterブランチへのpushを禁止し、機能ごとにブランチを作ってpull requestをした。また、commit logを見やすくするため、このqiitaの記事を参考にcommitメッセージにプレフィックスを付けた。
- 製作を始める前にモック図やER図を作成し、READMEに記載した。
- 各機能ごとにTo-doリストを作成し、READMEに記載した。
- モデルクラスのメソッドとRESTfulなルートを表にまとめ、READMEに記載した。
機能一覧
- ログイン機能
- ユーザーのdislike商品テスト機能
- ユーザーの好まない要素表示機能
- おすすめ商品表示機能
- ゲストユーザーログイン機能
ER図
このアプリケーションのER図は以下の通りです。
環境
言語: Ruby
フレームワーク: Ruby on rails
フロントエンド: HTML&CSS/Bootstrap/JavaScript
DB: PostgreSQL
インフラ: Heroku
開発環境: DockerでRubyコンテナを実行し、VS Code Remote Containerで接続
ソースコード管理: GitHub(https://github.com/bellmmm/original_rails_app)
アプリの改善点
セキュリティ
- Ruby、Railsや依存ライブラリのバージョンを最新にする。
スキルアップとして
- herokuへのデプロイからAWS ECSへのデプロイに変更し、CI/CDに対応する。
- RailsをAPI化し、フロントエンドをReactに分離する。
アプリの機能向上として
- 工夫したことで述べた通り、商品の数が少ないことでユーザーの好みに合わせられる精度が低くなっている。商品の数を増やし要素の取り出し方を厳しくすることで、ユーザーの好みをより反映したい。
- 嫌いな要素を基におすすめ商品を表示しているが、テストで嫌いな商品、好きな商品、その他を選べるようにして、好きな商品として選んだ商品に共通する要素をlike要素としておすすめ商品の表示に反映できるようにしたい。
- 商品の数を増やし、テスト用の商品をランダムに表示しても要素が偏らないようにし、ランダムな製品でのテストを行えるようにしたい。また、要素ごとに商品を検索できるようにしたい。
- 商品を試着して好きだったか、嫌いだったかを反映することで、視覚だけでないユーザーの好み(似合う・似合わない)を反映させられるようにしたい。