はじめに
こんにちは。ryosuke(@ryousuke_mogurA)と申します。現在プログラミングスクール RUNTEQ にて、Ruby on Rails を学習しています。
前回MVPリリースしたアプリを本リリースしたので新たな記事を書くことにしました。
技術的な部分での誤りやサービスについての感想などありましたら、コメント等で教えていただけると助かります。
警告
現在はサービス停止しています。
目次
1.作成したサービスの紹介
2.作成した経緯
3.技術スタック
４.こだわったポイント
5.画面紹介
6.ER図
7.実装機能
8.今後の展開
9.反省点
10.感想
サービスの紹介
サービスURL（レスポンシブ対応済み）
Web アプリ「PantryChefNotifier」は「食材の在庫リスト」の作成ができるアプリです。
ユーザーはLINEを使用したログインかメールによるログインを選ぶことができます。
食材を登録することで、その食材の消費・賞味期限が近づいたらメール・LINEで通知を受け取れます。
作成した経緯
以前購入した食材を忘れて重複購入し、冷蔵庫が食材で溢れてしまったり、消費期限を過ぎて廃棄することが多かったりと無駄な出費が続いていました。また、冷凍保存した食材の鮮度や消費期限を把握できず、品質に不安を感じながら料理をすることもあり、適したレシピを探すのが面倒で料理のモチベーションも低下していました。
「食材の管理 レシピ アプリ」で調べると食材の消費・賞味期限を管理できるアプリやレシピを検索できるアプリは多々あったのですが消費・賞味期限の管理ができて消費・賞味期限が近い食材を使用したレシピを自動で通知してくれるアプリはヒットしませんでした。
そこで食材の管理とレシピ検索を行うことができ、なおかつ自動で通知してくれるサービスが欲しいと思い立ち、このサービスを作成しました。
技術スタック
| カテゴリー | 技術スタック |
|---|---|
| Frontend | Rails 7.1.3.2 (Hotwire/Turbo/Stimulus), TailwindCSS, DaisyUI |
| Backend | Rails 7.1.3.2 (Hotwire/Turbo/Stimulus) |
| Database | PostgreSQL |
| Environment | Docker / docker-compose |
| Infrastructure | http://render.com/ |
| API | Line Messaging API, Rakuten_web_service API |
こだわったポイント
1. Lineでの操作
ユーザーがLINE上でほとんどの機能を利用できるようにすることで、利便性とアクセス性を大幅に向上させています。
具体例) 食材登録機能
| LINEからの登録 | LINEからの登録2 |
|---|---|
 |
 |
2. OAuth認証によるLineログイン機能
手間なくサービスを使用していただけるようにLINEアカウントによるログイン機能を導入しました。
3. Lineプッシュ通知とメール通知
登録した食材の消費期限の2日前から毎朝8時に期限が近い食材とその食材を使用したレシピの通知が入ります。
| LINE通知 | メール通知 |
|---|---|
 |
 |
4.モーダルを使用した編集機能
登録した食品の編集を行う際に従来のページ遷移を伴う方法ではなく、モーダルウィンドウを使用することでユーザー体験を向上させました。
画面紹介
| トップ画面 | ログイン画面 |
|---|---|
 |
 |
| ユーザー登録画面 | 食材一覧画面 |
|---|---|
 |
 |
| 食材の登録画面 | 食材の詳細 |
|---|---|
 |
 |
| 食材の編集（詳細ページ上） | 食材の削除機能 |
|---|---|
|
 |
| レシピ検索ページ | マイページ |
|---|---|
 |
 |
Line上の画面
| メニュー画面 | 食材の登録 | 食材の登録(2) |
|---|---|---|
 |
|
 |
| 食材の登録(3) | 食材リスト | 消費期限が2日以内の食材の取得 |
|---|---|---|
|
 |
 |
| 食材の削除 | レシピ検索 | 入力情報のリセット |
|---|---|---|
 |
 |
 |
ER図
実装機能
- 認証系
- 新規登録
- ログイン/LINEログイン
- ログアウト
- パスワードリセット
- 管理者機能
- マイページ
- 食材機能
- 食材の登録・編集・削除
- ソート機能
- ページネーション
- カテゴリー機能
- LINE機能
- 食材の登録
- 食材の削除
- 食材リストの取得
- 消費期限リストの取得
- レシピ検索
- 通知機能(LINE・メール)
- 消費期限が２日以内の食材のリスト
- 消費期限が２日以内の食材を使用したレシピ
- レシピ検索機能
- お気に入り追加
- お気に入り削除
- その他
- お問い合わせ
- マイページ機能（ユーザー情報・お気に入りレシピの表示・カテゴリーグラフ機能）
今後の展開
今後、サービス面・技術面で、以下のとおり追加・修正を行う予定です。
サービス面
- Googleログイン機能
- 買い物リスト機能
技術面
- テストコードの追加
- CI/CDの実装
反省点
設計・検討不足
全体的に検討不足だった点です。
作成するものが具体的に決まり、データベースの設計や画面遷移図などをして開発に取り掛かりましたが、あまり深く考えず設計を行ってしまったため、何度も手戻りが発生する場面もありました。
また開発当初は初めて使用する技術のキャッチアップを実装しながら行っていたため、開発スケジュールの遅れや実装イメージと差異がでてしまうことがありました。
以上の経験を踏まえて設計の重要性と詳細な検討の必要性を痛感しました。事前の入念な準備があればコードの修正や変更にも柔軟に対応できます。しかし、今回のように入念な準備を怠ると開発が進むにつれて修正が難しくなり開発が止まってしまうことがわかりました。
感想
ここまで読んでいただきありがとうございます。
技術的な内容は別途記事にしていきたいと思います。
今回、初めて個人サービスを開発・リリースすることができました。
設計からインフラまで一連の流れを経験し、ユーザーを意識した開発など様々なことを学ぶことができました。
まだ改善できる点ややるべきことが残っていますが、ひとまず形になったことを嬉しく思います。
今後も引き続き更新していきますので、ぜひ使っていただけると幸いです。
最後までお読みいただきありがとうございました！
X もやっていますのでもしよろしければフォローお願いします！