【家事時短】10分で作れる！ChatGPTシェフによる献立提案アプリ！ #Make

## 今日の夕飯何作ろう？
**夕飯のメニューを考える。それは誰しもに等しく訪れる毎日のタスクです。**
1日10分でも毎日となるとそれなりの時間になりますし、結局同じメニューになりがち・・・

![スクリーンショット 2023-12-03 151228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/6adf7e65-c6b5-17ff-342b-4000bfe1d041.png)

ここはもうAIに任せてしまっても良くないでしょうか！！
**その方が時短にもなるし、夕飯のバリエーションも増えるし、一石二鳥！！**
という事でITの力を借りて家庭の課題を解消させてみようと思います！

**日々のお仕事が忙しい方**や**ご飯のメニューを考えるのが苦手な方**に使ってもらえるアプリを目指します！！

:::note info
**【実装目標】
・ ChatGPTで考えたメニューをLINEで通知する
・ いくつかの食材候補からランダムで選択した食材を使う料理を提案する
・ 毎日定刻（帰宅時間の17時頃）にメニューを通知する**
:::

## 作ったものはこちら！

![1IMG_E0811.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/281e2f7a-9666-150c-1200-355674ce4892.jpeg)


間違えました！これはChatGPTに提案されて作ったチキンテリヤキ丼です！

**本当に作ったものはこちらです！**
スケジュールした時間になるとChatGPTが夕飯のメニューを提案してLINEで通知してくれます！

![スクリーンショット 2023-12-03 152248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/a7240688-4770-fefb-3e2e-e7c0bb2d2e73.png)

**他のレシピAPIとは異なる点として、ChatGPTであれば一度に複数のメニュー候補を出してくれますし、どんな食材であってもメニューの候補を出してくれる点が強みとなります！！**

構成イメージは以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/dd307287-a884-8a62-8a72-3a184482080e.png)


# 用意するモノ
今回使用したは以下の通りです。
・Make（Webhooks / OpenAI（ChatGPT）/ LINE）
・GoogleAppsScript

## 作り方を紹介！

### ①Makeの作成
#### 1. Webhookの設定
● まずはMakeのシナリオから、[Webhook]部分の実装説明となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/9173d000-b09f-3122-7d65-ba7181d92654.png)

● [Webhook]のトリガーを選択して、[Custom webhook]を追加します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/ec229de7-329f-bb17-440b-eb2ed6438bf4.png)

● [Add]ボタンから[Create a webhook]を表示し、設定は変更せずにSaveを選択します。

![スクリーンショット 2023-12-02 220745.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/3e3e0325-e2bf-8ca9-5738-665590c971a5.png)

● webhookのURLが発行されるため、[Copy address to clipboard]を選択してURLを保存します。
保存が完了したら[OK]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/78d17fdc-3877-3150-dd26-1f1668fa7290.png)


#### 2. OPENAIの設定
● 次に[OpenAI]部分の実装説明となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/6d3ac3d5-c0de-26e7-87bf-549439515733.png)

● 事前準備として、ChatGPTにログインして、APIキーとOrganization IDを取得します。
**※ChatGPTの登録が未了の場合は登録作業から実施してください※**

https://platform.openai.com/docs/overview

**■APIキー**
● 画面左の[API keys]を選択後、[+ Create new secret key]を選択してAPIキーを取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/f15fcb31-2fd2-2024-950e-40ac6c46c8cb.png)

**■Organization ID**
● 画面左の[Settings]-[Organization]を選択後、Organization IDの値を取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/b9626015-a992-5af6-7a9d-3ae10ec3b3b1.png)


● Makeより、[OpenAI]のトリガーから[Create a Completion]を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/d61451c9-5d3f-7ae6-63e5-480c3a47294d.png)

● connectionの[Add]を選択し、事前に取得したAPIキーとOrganization IDを入力して[Save]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/57198249-ca1c-ced2-3b20-7d23b6344720.png)

● その他項目は以下の画面の通りに設定します。（[Messages]の箇所は、利用環境に合わせて変更してください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/941fa36d-765e-9056-54bc-b7fdccad54ea.png)


#### 3. LINEの設定
● 次に[LINE]部分の実装説明となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/4961a43b-7c64-0a0d-25a3-3e737d136dfe.png)

● Makeより、[LINE]のトリガーから[Send a Notification]を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/c8225b2c-e42a-7870-7d2e-f1ece745e284.png)


● connectionの[Add]を選択し、変更はせずに[Save]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/108e0ac6-de61-b392-606d-0366948ac3b2.png)


● 別ウインドウでLINEの認証を求められるため、任意の方法でログオンします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/29a4ce49-2ac6-af9a-6af8-c600592d1e23.png)

● 任意の通知を送信するトークルームを選択して、同意して連携するを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/917ba19c-51a1-ec95-911e-35b0682f1f42.png)

● [Message]の箇所を画面の通りに設定して[OK]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/bac8e618-24a8-4ed2-7973-3090e829a539.png)


#### 4. スケジュール設定

● Makeのシナリオ画面左下より、[SCHEDULING]を[ON]に設定して、[immediately as date arrives]に設定します。**（データが届いたら即時実行される設定です）**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/36149100-66fd-fac8-c98c-a754baf02af5.png)



### ②GoogleAppsScriptの作成
#### 1. コーディング
● GoogleAppsScriptのコードは以下の通りです。
webhookURLは上記手順で保存したURLを張り付けてください。

```JavaScript:script.gs
  //今日の夕飯BOT
function foodmenu() {

  //makeのwebhookのURL設定
  const url = "https://hook.eu2.make.com/xxxxxxxxxxxxxxxxxxxxxxxxxx";

  //アクティブなシートを取得
  const sheet = SpreadsheetApp.getActiveSheet();

  //夕飯のメインとなる食材を指定
  const food = ["牛肉","豚肉","鶏肉","魚","野菜"];

  //食材をランダムで選択
  const sendfood = food[Math.floor(Math.random()*food.length)];
  console.log(sendfood);

  //makeのwebhookを実行
  UrlFetchApp.fetch(url + encodeURIComponent(sendfood));
    
}
```


#### 2. スケジュール設定
● GoogleAppsScriptの画面左より、[トリガー]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/46db49cd-4bf5-bafd-351b-1def999a17b1.png)

● トリガーの追加を選択して、以下の通り設定を行います。
[時間ベースのトリガーのタイプを選択]と[時刻を選択]は利用環境に合わせて変更してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3567275/3bcab381-aaca-5c5d-9e3d-47dbccac08d0.png)

:::note info
**【補足事項】**
今回はWebhookをトリガーにしましたが、LINEのメッセージ送信をトリガーにすることで、自身が指定した食材からメニューの候補を考えるようにアレンジする事も可能です！
:::


## 作ってみた感想
**MakeとGoogleAppsScriptのスケジューリング機能が非常に便利！！**
**そしてChatGPTのご飯提案が面白い！！** ビーフストロガノフなど、そんなん作れんわ！って提案もあったりしますw

一方で以下のような課題も見つかりました。

:::note warn
**・ 毎回提案のレベルが異なる**
　　　- 調理手順を含んだり含まなかったり
　　　- 主菜以外、副菜や汁物まで提案してくれたりしなかったり
**・ 同じメニューの提案をする確率が高い**
:::

ただ、**毎日メニューを複数候補で提案してくれる点はありがたく、これ作ってみたいな！明日何提案してくれるかな！という楽しみができました！料理のレパートリーが増える点もGOOD！**

10分程度で作れるため、毎日のレシピに悩んでいる方がいればぜひ使ってみてください！！