KitchenNote

URL

testアカウントは下記に記載があります

アプリURL(https://kitchen-note-732a61d9545e.herokuapp.com/)

背景・概要

「冷蔵庫の中に何があったっけ？」このような疑問はもうおしまいです。 KitcheNoteはシンプルながらも、効果的な機能で日常の小さな悩みを解決します。 レシピの管理から賞味・消費期限などの在庫情報まで、このアプリは毎日の食事準備を簡単に効率的にします。

献立を考える際も、KitcheNoteがあればスマートに計画を立てられます。 ボタン1つで瞬時に買い物リストが生成され、アイテムにチェックを入れるだけで在庫が自動更新されます。

KitcheNoteはただのレシピ管理アプリではありません。 このアプリは、料理をより楽しく、生活をより効率的にするあなたの新しいキッチンパートナーです。

アプリケーションのイメージ

KitchenNote-Demo.mp4

機能一覧

トップ画面	アカウント登録画面
URLを読み込ませる毎にトップページの画像が変わる機能を実装しました。	メール認証を用いたアカウント登録を実装しました。

ログイン画面	パスワードリセット画面
メールアドレスとパスワードを用いた認証機能を実装しました。	メールアドレスを用いてパスワードを再設定できる機能を実装しました。

ダッシュボード	レシピ一覧画面
APIとWebスクレイピングを用いて楽天レシピの人気ランキングを表示する機能を実装しました。楽天レシピは毎日12時に更新されます。	この画面から登録したレシピを一覧形式で見ることができます。また、献立に追加するボタンでは、レシピIDをURLパラメータとして献立作成画面に渡します。

レシピ作成画面	レシピ詳細画面
材料項目と手順項目は増減させることが可能です。その際は、材料番号や手順番号が自動で変更されます。	レシピの手順を見ることができます。

レシピ編集画面	在庫情報一覧画面
初期表示は登録情報ですが、バリデーションが機能した時は項目に入っていた値が再度格納されるようになっています。	このページで在庫の一覧情報を確認することができます。期限が切れると赤字で表示されるようになっています。

新規在庫作成画面	在庫情報編集画面
この画面で新規在庫を作成することができます。登録日は自動で作成されます。	材料IDと在庫IDを対応づけるため材料名は編集できないようにしています。

献立一覧画面	献立作成画面
各献立は曜日によってソートされます。また、表示される献立は今日から１週間です。買い物リスト作成ボタンによって表示されている材料を買い物リストに追加することができます。	人数によってレシピに必要な材料の量が線形変換されます。日付は本日以降のみ選択できるようになっています。

献立編集画面	買い物リストへ追加
レシピIDと献立IDを対応付けさせる必要があるためレシピは編集できないようにしました。	この画面で新規に買い物リストへ追加することもできます。追加する材料はオートコンプリート機能により、登録されている材料からしか選べない仕様になっています。

買い物リスト	買い物情報編集画面
買い物リストにチェックがつけられると、Ajax通信により買い物情報が在庫情報に登録されます。	買い物リストの編集ができます。買い物IDと材料IDを対応づかせるため、材料名は編集できないようにしています。

使用技術

以下はアプリ開発に使った技術になります。

フロントエンド

• HTML/CSS
  • Tailwind CSS：レスポンシブなデザイン作成
• JavaScript
  • jQuery：ユーザーインタラクション, Ajax通信

バックエンド

• PHP（8.0.30）
  • Laravel（9.52.15）：MVCアーキテクチャの構築
  • Guzzle（7.8.0）：Webスクレイピング
  • Breeze（v1.19.2）：認証機能

データベース

• MariaDB（10.2.38）：開発時に使用
• PostgresSQL：デプロイ時に使用

その他のツール・技術

• Gmail：メール認証時に送信するためのメールアドレス
• AWS
  • Amazon EC2：テストサーバー
  • AWS Cloud9：Cloud IDE
• Git（2.40.1）
  • GitHub：バージョン管理
• Xserver：Herokuの外部ストレージ, 画像を保存しURL化
• Heroku：デプロイ時に使用したクラウド・アプリケーション・プラットフォーム
  • Heroku Scheduler：楽天レシピの情報を毎日更新するためのタスクスケジューラー
• API
  • 楽天レシピカテゴリ別ランキングAPI

テストアカウント

user name : test1

user email : test1@email.com

password : testaccount