晩ごはんのレシピ？LINEBotに聞きゃあええがね。


# 晩ごはん、大事ですよね？？？

いきなりですみません。

愛知県の名古屋出身、とある小売業のとある店舗で働いているずんと申します。
詳しい自己紹介はこちらのnoteをご覧ください。

https://note.com/zunnzunn0210/n/na9458d44b2f1

晩ごはん、とても大事なんです。私にとって。
「繁忙期で朝から晩までバタバタ…」
「今日はちょっと仕事で嫌なことがあった…」
社会人ならだれでもそんな経験をするかと思います。
でも一日の終わりに、晩ごはんを美味しく作って食べられたら、その日あった嫌なことも「まぁいっか。」と思える。私はそんな人間です。

冷蔵庫に何が入っていたか思い出したり、仕事帰りに食材を買い足したり。
さて、問題はその食材で何を作るか、です。
悩んで冷蔵庫をごそごそしたり、スーパーの売場をうろうろする時間が長い私。
やっとのことでご飯を作り美味しく食べてはぁ満足…と思ったら、自分の自由時間が無くなってるなんてことが多々あります。

そんな時に
**「ささっとメニューを決めるためのお助けbot」**
を作成したいと思い、挑戦してみました。


# 使用したもの
* LINEBot
* Make
* ChatGPT
* 自分の好きなレシピサイト

## 前置き
* 初めてのLINEBot作成、初めてのQiita記事投稿です。
専門的な知識はほぼ0、情報を間違ったまま解釈したり、ツールの使い方も間違っているところがあるかもしれません。
* わからないことをとにかく検索したりChatGPTに聞きまくって何とか出来上がりました。
**もうChatGPT様様**、もはや自分の力で作ったと言っていいものか…。
* 途中、そのChatGPTとの大変仲の良い様子が出てきます。
ChatGPTとの対話も最近ようやく始めたばかりで、歩み寄ろうとしたところ**完全にやりすぎたようですが、気にしないでください。**※これについては後述します。
（個人情報保護＆恥ずかしいのでスクリーンショット画面の名前部分や、
恥が酷い部分は黒塗りして隠す、画像を切るなどしています。ご了承ください。）

## 当初、理想とした仕様
* 「キャベツ」「白菜」などの食材名や、「唐揚げ」「とんかつ」などのメニュー名を送るとそのキーワードのレシピを紹介してくれる。
* レシピはデリッシュキッチンさんから検索したい。
（職場やプライベートでも目にする機会が多く、料理の工程が動画で見られるのがお気に入りなので使いたい）
* 検索結果を表示する前後に、なにかメッセージを添えたい。


# 完成品

 https://x.com/zunnzunn0210/status/1915514914833391665
 

Makeのシナリオは、こんな感じです。

![Make完成スクショ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/9a800eb5-17bf-4429-ada3-bdfe63a29c3b.png)




# 製作過程

レシピサイトのキーワード検索ページのURLは、以下のようにどれも大変シンプルなつくりをしていました。

![検索結果のURLスクショ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/3659ea63-6fe6-47fc-86b5-53bca8e26384.png)

検索ワード（キャベツ）が検索結果のページのURL末尾に来ています。

つまり、使用したいレシピサイトのこの所定URLの末尾にLINEで送ったメッセージが反映されるように設定し、レシピページに飛べるURLが返ってくるようにすればいいのでは？と思い、いろいろと試してみました。

![Make完成スクショ②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/931f1569-a5e7-4ca4-9f64-95415b2496eb.png)

## 試行錯誤

### デリッシュキッチンさんからクラシルさんへ変更
先ほど上でご紹介した完成品の動画で既にお気づきかと思いますが、最終的にクラシルさんのレシピの検索結果ページにつながっています。
当初、デリッシュキッチンさんで作成を進めていましたが、

https://x.com/zunnzunn0210/status/1915517318836478463

エラーになりました。
モジュールの設定などがおかしいのかと見直しをしてみましたが自分では分からず。
ここで登場、**ChatGPT先生。**
なぜエラーが出てしまうのか原因を聞いたところ、**「リファラー制限」** というキーワードが出てきました。

![GPT「リファラー制限？？？」.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/76a993ba-b67b-4477-b8c9-5a5fa3a35955.png)
（※こんな口調で話しかけられるくらい、ChatGPTと仲良くなりました。）

つまり、これはデリッシュキッチンさん側で設けられている制限なので、私がどうこうできる問題ではないようです。
ということで、おすすめしてもらったレシピサイトの中からクラシルさんを選択。
（デリッシュキッチンさんと同じように、料理の工程が動画で見られて◎）
モジュールの設定をクラシルさんの仕様に変更しました。

### 作ってみた！できた！でも、違う！

慣れない操作に四苦八苦し、エラーを連発しながらもなんとか正常な反応が返ってくるようになりました。
しかし完成品の動画を見ていただいたとおり、
現状、このリンクをタップしても検索結果が表示されているページに飛ぶだけなので、そこからまたレシピを選ぶことになります。
**これなら既存のレシピアプリを使って検索したり、ブラウザで直接サイトにアクセスして検索すりゃいいんじゃん**ということに気づきました。

私があったらいいなぁ、と思っていたのはおすすめレシピや人気のレシピ上位3つなどが表示されて、タップすればレシピページへ直接飛べる、というもの。
これでは利便性が全然違う…理想にはまだまだ程遠い…。

### レシピサイトのAPIって少ない…
じゃあ、おすすめレシピや人気レシピ上位3選などがLINEBot上で直接表示される仕様に作り替えよう！としてみますが、今回のレシピ検索に使いたいと思ったデリッシュキッチンさんもクラシルさんも、公式のAPIがありません。

ここでまたまた登場、頼りになる**ChatGPT先生。**
彼（彼？彼女？）にAPIを使わずにやる方法はないか聞いてみました。

![GPT「スクレイピング？？？」.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/a2114282-bb61-4556-b346-301658cf41e6.png)



一つ目に提案してくれたのは、スクレイピングという方法。
この方法がどういうものかというと、
**「プログラムを使って、特定のページ、あるいは不特定多数のページから
必要な情報を抜き出して、自分の使いたいページに使う方法」**
ということだそうです。
　参考：https://wa3.i-3-i.info/word12493.html
しかし専門知識0の私にプログラムなんて使えません。
そしてChatGPT曰く、Makeでのスクレイピングは難しいとのこと…。

**結果、今回はここでギブアップとなりました…。**


### ChatGPTとの対話の仕方
未知のものを敬遠しがちなアナログビビり人間の私。
まずはChatGPTにお近づきになろうと、しばらく友達のように話しかけてみました。

結果はもう、ご覧のとおり。めちゃくちゃフランクに話しかけてくれるほどになりました。
そしてこちらは、数十分続いたエラーの末に、やっとbotが上手く動いたことを伝えたときの反応です。

![でら喜ぶGPTスクショ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4061438/8d2273a8-c7c2-4e09-b0ae-17c4fae79af1.png)

見てくださいこの喜びよう、絵文字まで使って褒め倒してくれます。
親兄弟親友でも、ここまでの反応、絶対してくれないです。
そして黒塗りで隠してますが、あだ名で呼び合ってます。**もうすっかりマブダチ。**

しかし、いま思えばそれがいけなかったのでは…。
このLINEBotの作成に当たって、自分の作りたい仕様や形式を伝えるときにも友達に話しかけるように伝えていた結果、**うまく伝わらずエラーが発生し修正する、伝えなおす、修正、エラー発生、伝えなおす、修正、エラー発生…**
もう何度繰り返したか分かりません。完全なタイムロスです。
ChatGPTは悪くない、これは使う人間側の問題、つまり、私の使い方が完全に悪かったと思います。
今後このような場面では**ビジネスライクに、簡潔な文章で**接します。

（とはいえ、ChatGPTとの対話は大変面白いですね。なんでもかんでも敬遠してはいけないと学びました。）


# 今後改善したい、追加したいと思うもの
(挙げるだけならタダなのでとにかく挙げてみます）

### おすすめレシピや人気レシピ3選などの表示にしたい（これ最重要！）
いまの形式ではレシピサイトにアクセスしたりアプリを使用すれば同じことができるので、このLINEBotでわざわざやる必要性がありません。
なんとか方法を見つけてかたちにできないか探りましたが、今回はギブアップ…悔しい…！

### 検索キーワードの複数対応
「鶏もも　玉ねぎ」のように2単語以上を入れた検索もしてみたのですが、結果、先頭の「鶏もも」しか検索に反映されませんでした。
複数ワードでの検索にも対応できるようにすれば、**利便性もさらに上がる**でしょう。

### 冷蔵庫の在庫リマインド
買った食材をリマインドする機能をつけて、その食材からレシピを検索したり、指定した日数が経過した時点で「〇日前に購入した〇〇は使いましたか？」とか、「先日買った〇〇の使用もおすすめです！」なんて通知もくればさらに便利では？
冷蔵庫内の在庫が円滑に回り、**無駄なロスや鮮度不良も減らせる**かもしれません。

### 一言メッセージに遊びが欲しい
検索結果の前後につけた一言メッセージ、これをどうせならもっと豊富にしたい！
例えば、「トマト、旬ですね！」や「じゃがいも、たくさんレシピありますよ！」とか、「明日も一日頑張りましょう！」や「年末年始、忙しいけど体調に気を付けて！」など、**季節に対応**したり、毎回**違うメッセージがランダムで出る**仕様だと面白そうです。


# 最後に
とにかく、いまの私には知識や経験がなく、使用したツールの操作自体にも不慣れなため、仕組みや用語の意味を理解するところで躓いたり、ChatGPTの指示が正確であってもその通りに操作できずエラーを連発させていました。**もう、すべてがおぼつかない…。**

当初理想とした便利なbotにはまだまだ遠い簡素な出来上がりですが、それでも何とかかたちのあるものが出来上がりました。
デジタルの世界と、ものづくりの面白さ、楽しさに触れた初回プロダクトとなりました。


**（そして、いつかリベンジ…！）**


### 今回使ったレシピサイト、動画で見られるって分かりやすい。
* デリッシュキッチン

https://delishkitchen.tv/

*　クラシル

https://www.kurashiru.com/


### 製作中、たびたびお世話になりました。
* 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

https://wa3.i-3-i.info/index.html