【Web制作学習】自分用の「献立・レシピ管理アプリ」を作ることにしました

# 【Web制作学習】自分用の「献立・レシピ管理アプリ」を作ることにしました

今日は、以前から「あったら便利だな」と思っていた、**自分専用のレシピ・献立管理アプリ**について、必要な機能や画面構成を考えました。

普段レシピを探すときは、CookpadやYouTube、料理サイトなど、いろいろなサービスを利用します。

ただ、

「この料理また作りたい！」

「前に作ったレシピ、どこで見たんだっけ？」

「今週の献立をまとめて決めたい」

ということがよくあります。

そこで、気に入ったレシピだけを自分用にまとめて、さらに**1週間の献立まで作成できるWebアプリ**を作ってみることにしました。

---

## 今回作りたいアプリ

今回考えているのは、レシピそのものを掲載するサイトではなく、

**お気に入りレシピを管理する＋1週間の献立を作成する**

ための自分専用アプリです。

CookpadやYouTubeなどの元レシピはURLを登録して、必要なときに元サイトへ移動できるようにします。

まずは機能を増やしすぎず、Ver.1では、

* レシピ一覧

* レシピ追加

* レシピ詳細

* 今週の献立作成

この4つを中心に作ることにしました。

買い物リストなどもあると便利ですが、まずは基本機能が完成してから追加する予定です。

---

## レシピに登録する内容

レシピを登録するときは、次の情報を保存できるようにします。

### ・料理名

「鶏の照り焼き」「麻婆豆腐」など、料理の名前を入力。

### ・カテゴリー

主菜、副菜、汁物、ご飯・麺などをプルダウンから選べるようにします。

### ・元サイト名

CookpadやYouTubeなど、どこで見つけたレシピなのかを登録。

### ・元レシピURL

元のレシピページへ移動するためのURL。

### ・自分の写真

実際に料理を作ったときの写真をアップロードできるようにします。

### ・材料

使用する材料を入力。

レシピ一覧では全部を表示すると長くなるので、ニュース記事一覧のように**20文字程度で省略表示**する予定です。

### ・メモ

「次回は少し薄味にする」「玉ねぎ多めがおいしかった」など、自分用のメモを残せるようにします。

---

## レシピ一覧はサムネイル付きに

最初に表示される画面は「Myレシピ一覧」です。

料理ごとにカードを作り、

**料理名＋材料の一部＋写真**

を表示する予定です。

写真があることで、「これ作りたい！」と視覚的にも探しやすくなります。

カテゴリーから絞り込みできるようにすることも考えています。

---

## レシピ詳細画面

一覧から料理を選択すると、詳細画面へ移動します。

ここでは、

* 料理名

* 写真

* 材料

* メモ

* 元サイト名

* 元レシピを見るボタン

などを表示します。

元レシピの内容をそのまま転載するのではなく、**元サイトへアクセスするためのリンクを保存する形**にする予定です。

---

## 一番作りたい「今週の献立」

今回のアプリで特に作りたいのが、**1週間の献立作成機能**です。

最初は「7日分の夜ご飯を決める機能」を考えていました。

ただ、よく考えてみると、平日は夜ご飯だけでも、土日祝日は昼ご飯も必要になります。

そこで、

**7日 × 朝・昼・夜＝最大21食**

まで献立を登録できる仕組みにすることにしました。

---

## まず○×で必要な食事を決める

毎日3食すべて献立を作る必要はないので、最初に、

| 曜日 | 朝 | 昼 | 夜 |

| -- | - | - | - |

| 月 | × | × | ○ |

| 火 | × | × | ○ |

| 水 | × | × | ○ |

| 木 | × | × | ○ |

| 金 | × | × | ○ |

| 土 | × | ○ | ○ |

| 日 | × | ○ | ○ |

というように、**献立を作りたいところだけ○にする**仕組みにします。

平日は夜だけ、土日は昼と夜、という使い方もできますし、その週の予定に合わせて自由に変更できます。

---

## ○を付けたところに料理を当てはめる

献立を作る場所が決まったら、

「＋料理を選ぶ」

を押して、自分のレシピ一覧から料理を選択します。

例えば、

「月曜日・夜」

に「鶏の照り焼き」を設定する、といった形です。

通常のレシピ一覧と似た画面を使い、

**「この料理を選ぶ」**

ボタンから献立へ登録できるようにします。

---

## 完成した献立は写真付きで表示

すべての料理を決めた後は、

**サムネイル＋料理名**

で1週間の献立を確認できるようにしたいと考えています。

写真付きなら、文字だけで見るよりも一週間の料理がイメージしやすくなります。

さらに、

**料理カードをタップ → レシピ詳細画面へ移動**

できるようにします。

「材料を確認したい」と思ったときに、そのまま詳細を見ることができます。

---

## 献立を変更する機能も付けたい

一度決めた料理でも、

「やっぱり今日は別のものが食べたい」

ということもあります。

そこで料理カードには「変更」ボタンも付けます。

* カード本体をタップ → レシピ詳細

* 「変更」をタップ → 別の料理に差し替え

という操作にする予定です。

変更を押した場合も、新しい画面を作るのではなく、料理を選ぶときに使ったレシピ一覧画面を再利用します。

こうすることで、操作も分かりやすく、プログラムもシンプルにできそうです。

---

## 今回はPHPとMySQLにも挑戦

まず画面の見た目については、普段のWebサイト制作と同じようにHTMLとCSSで作成します。

ただし今回は、普通のホームページとは少し違います。

入力したレシピを保存したり、登録した料理を一覧に表示したりする必要があるため、

**PHP＋MySQL**

を使って作成していく予定です。

開発環境にはMAMPを使用します。

まずはローカル環境で作成し、完成したらサーバーへアップして、スマートフォンから外出先でも使えるようにすることが目標です。

---

## まとめ

今日はまだプログラムをたくさん書いたわけではありませんが、

**「何を作るのか」

「どんな機能が必要なのか」

「画面同士をどうつなげるのか」**

を考えることができました。

Web制作というと、これまではホームページを作ることが中心でしたが、今回はユーザーがデータを登録したり、登録した情報を使って献立を作ったりする**Webアプリ制作**になります。

まずはレシピ一覧画面からHTML・CSSで形を作り、その後PHPやMySQLと連携していく予定です。

実際に自分が使いたいと思えるものを作りながら、PHPやデータベースについても少しずつ理解を深めていきたいと思います。