Link: https://tasty-life.site/
Github: https://github.com/YukiIshizaki0525/TastyLife
ポートフォリオを制作した背景
私自身一人暮らしで、日々自炊を行っていて、以下のことが課題と感じています。
- 作る料理がマンネリ化してしまい、モチベーションが下がり、自炊を突然やめてしまう
- 一人暮らしの自炊についての相談できる機会がない
- 冷蔵庫に保管している食材を管理できていないため、腐らせてしまったり余っているのに買ってしまう
上記課題を解決できる自炊のモチベーションアップや悩みが解決できるアプリケーション を作成しようと決意しました。
使用イメージ
全てのページが レスポンシブデザインとなっておりますが、
GIFはPCサイズとなっております。
レシピ投稿/タグ付け
- 材料と作り方はレシピによりそれぞれのため、非同期でフォームを追加削除できます
- レシピの完成イメージはあらかじめ確認したいため、画像プレビューされます
相談投稿
- 投稿する内容が掴みにくいため、投稿しやすい様にプレスホルダーに投稿内容サンプルを記載
食材登録
- 登録した食材の個数や賞味期限を確認できるため、無駄な買い足しや廃棄を防止できます。
タグ検索
- 気分に合わせてサッとレシピを決めたい時に有効です。
- タグの種類を限定し既定6つのタグから検索が可能です。
相談ソート
- 関心のある相談や回答数の多い相談を見つけるきっかけとなり、新しい発見により私生活にも活かせます。
ゲストログイン
- ゲストユーザーは多くの人が使うアカウントであるため、ゲストユーザーアカウントのみ編集削除ができない仕様になっており、退会処理もできない仕様になっています。
下記の投稿がとても参考になりました。
[簡単ログイン・ゲストログイン機能の実装方法](https://qiita.com/take18k_tech/items/35f9b5883f5be4c6e104) 
使用技術
フロントエンド
HTML/CSS/Sass/JavaScript(ES6)
バックエンド
Ruby 2.6.5/Rails 6.0.3
テスト基盤
RSpec 3.9/FactoryBot 4.10.0
データベース
MySQL 5.7
インフラ
Docker 20.10.7/Docker Compose 1.29.2
AWS(VPC, EC2, IAM, RDS, InternetGataway, SecurityGroup, Subnet, Route53, ALB, ACM, S3)
Nginx 1.15.8
AWS構成図
ER図
機能一覧
豊富な全34機能！
自炊でのモチベーションアップ、自炊ならではの悩み解決に貢献できます。
今後も、オリジナリティあふれる機能を増やしていきます。
工夫点
UI/UX
サイトのUI/UXが整っていないと、不信感が高まり、機能を実際に使ってもらえないと思ったため
色には統一感を持たせ、統一感のある見やすいデザインにしました。
私生活ではスマホでレシピ検索したり、レシピを見ながら料理することが多いため、
スマホでも違和感なく見れるようレスポンシブデザインにしました。
✔︎レスポンシブデザイン
✔︎ページタイトル、文字色、ボーダー等の色を統一
✔︎直感的な操作
✔︎多彩なアクションで動きのあるサイト
✔︎導線設計
機能面
私自身、自炊の相談がしにくい・食材が管理できないなどの課題があったため
それに対応できるよう相談投稿や食材管理機能を追加し、一般的なレシピサイトとの差別化を図りました。
レシピがすぐに決まらず、めんどくさくて作らなかった場面も多々あったので、
レシピをすぐ決めて、自炊継続できるようタグ検索、ワード検索機能を追加しました。
✔︎大手レシピサイトとの差別化
✔︎レシピをすぐ決めて、自炊継続できるようタグ検索、ワード検索
✔︎関心のある相談をソートして見れる
✔︎保管中の食材の管理無駄遣い防止
テスト
バリデーションや機能がうまく動作しているか自分で確認しきれないことが多く、コードに信頼性を持たせるため、単体テストと統合テストを多く実装しました。
ModelSpec結果
SystemSpec結果
✔︎コードに信頼性を持たせ、ユーザーに安心して使ってもらえるようにRSpecで十分なテストの実施
苦労した点
フロントエンド
レスポンシブデザインのため、scssファイルを多く管理するのが大変でした。
JavaScriptでイベント発火時にエラーは出ないが挙動がおかしい場面が多く修復するのに苦労し、1日悩んでわからないことも多く断念したものもあります。今後はVue.jsをガッツリ勉強して対応できるようにしたい
✔︎大量のscssファイルの管理
✔︎JavaScriptイベントのエラー修復
サーバーサイド
【レシピの材料及び作り方の非同期追加及び削除】の機能実装は苦労しました。Cocoon(Gem)を入れて当初実装していましたが、デザインが当たらなかったりなど、ブラックボックスに感じたので模索しながらGemを使わずに実装しました。下記のサイトが唯一あって助かりました。
create a nested form in rails from scratch
deviseのカスタマイズするのに苦労しました。特にメール認証ではgmailにメールが届かないことが多く挫折しかけました。メール文章もデフォルトのものがあたってしまい、メール文章をカスタマイズするのにも一苦労しました。
✔︎レシピの材料及び作り方の非同期追加及び削除機能の実装
✔︎deviseを使ったGmail認証関連
インフラ
ポートフォリオ作成初期にAWSとDockerを構築してから自動デプロイできるように努力しましたが、当初は敷居が高いと感じ、挫折しました。付け焼き刃では通用しないと思い、サイトや書籍を参考にチャレンジしたら、スムーズに構築することができました。何事も基礎がないとダメってことですね。
✔︎AWSとDockerの連携
今後の展望
自炊を行う知り合いに使ってもらっていて、ユーザーの貴重な意見を参考に日々改善を行っています。
今後、追加予定の機能及び変更点を5点ほど列挙します。
✔︎アプリケーション自体をVue.jsでSPA化
✔︎APIの導入
✔︎現在の食材管理状況を毎日18:00にメールで登録済みメールアドレスに配信
✔︎材料や作り方をドラッグ&ドロップして入れ替えられる仕様
✔︎作り方の画像プレビュー機能の追加
最後に
ポートフォリオ作成は転職活動のために作成するのではなく、自身やユーザーの課題解決のために、ポートフォリオ制作を行うことに注力したので、非常に達成感があります。
実際にユーザーの生の声を聞いて、ユーザーのことをより考えながら改善や機能実装をしようと開発を進めているため、以前よりも幸せに感じながら実装ができています。
転職後も新しい技術に触れることが多いと思うので、インプットした後に本ポートフォリオに取り入れて、アウトプットの場にも使いたいと思います。
ここまでご覧いただきましたありがとうございました！