あのレシピなんだっけ、、、？の時間を無くしたい！

# さがす時間ってもったいない！
こんにちは。子供5歳、共働きの3人家族です:family_mmb:
家族はみな「手作り料理がいい」「出来るだけ化学調味料は使わない」「遊びも学びもそれなりにする」「出来るだけ子供と一緒の時間をつくる」「子供は夜8時には寝る」、、、とかこだわりのあるメンバー。
そんな中で料理をするから、、、本当に時間が無い訳ですよ:confounded:

# 時短で結果もよきものを:star:
そんな中日頃の生活の中であった、「あの野菜がある、あれで何つくろ、、」「前に作って美味しかったあのレシピ、どんなだっけ、、？」で、１つのレシピ探すのにスマホであれでもない、これでもないと10分以上かかるやつ。
しまいには作った結果、なんか違う、、、前のほうが美味しかった、、、:sob:
そうならないように、簡単に検索できるものを！と思い、作りました。


# 出来上がったもの
**私の力作！見てください！！！**

https://twitter.com/Akke_rube/status/1721364821202092489?t=jVBngqCfxTCDy5MHCnURSA&s=19


# 使ったもの✍
Make
⇒　https://www.make.com/en
SSSAPI
⇒　https://sssapi.app/
Google スプレッドシート
⇒　https://docs.google.com/spreadsheets/u/0/

# 実装イメージ！
料理する素材、もしくはメニューを入力する
↓
自分のお気に入りのレシピが返ってくる

:::note info
こんなときに、、、
　・時短でメニュー決めから料理まですませたい時
 　・このレシピ良い～！っていうものがある時
※新しいレシピで作るのも好きなので、そこは使い分けします。
:::

# MAKEシナリオ作成！

**作ったMAKEシナリオ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/9a3cac7b-f93f-5c33-9bfc-23cb73bc0393.png)

主な手順はこうです。

　**・google sheets 作成**
 　　　　　　↓
  　**・SSSAPIに取り込み**
   　　　　　　↓
  　**・各モジュール組み込み**
   　　　　　　↓
  　**・各モジュール設定**

<dt>・google sheets 作成<dt>
<dd>A列に素材、もしくはレシピを記入<dd>
<dd>B列にそのレシピのURLを記入<dd>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/6032dd65-1ee8-be2b-caca-e9e32b8f740f.png)

今回は主に白ごはん.comさま、クラシルさま、DELISH KITCHENさまのレシピを参考にさせていただきました。
いつも大変お世話になっております:relaxed:

**・白ごはん.com**

https://www.sirogohan.com/

**・クラシル**

https://www.kurashiru.com/

**・DELISH KITCHEN**

https://delishkitchen.tv/

<dt>・SSSAPIに取り込み<dt>
<dd>SSSAPIに作成したgoogle sheetsを取り込みAPIを取得<dd>
  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/fdeec659-65f0-a23b-b904-9d742f66b42d.png)

<dt>・各モジュール組み込み<dt>
<dd>SSSAPI用のHTTP、それを読み込むJSON、そして条件によって変える返答メッセージとなっています。<dd>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/9a3cac7b-f93f-5c33-9bfc-23cb73bc0393.png)

<dt>①HTTP<dt>
<dd>SSSAPIのURLを設定します<dd>

ここでつまづきます、、、詳しくは後ほどの**つまづきポイントその1**で！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/4bad70e3-d30d-f539-373c-97cd2f09ab14.png)

<dt>②分岐　その1<dt>
<dd>google sheets A列に記載があるキーワードの場合、こちらを通ります。<dd>

ここでまたつまづきます、、、詳しくは後ほどの**つまづきポイントその2**で！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/1a766d1c-92ff-6ea3-0375-84237e898b52.png)

<dt>③返答メッセージ　その1<dt>
<dd>google sheets A列に記載があったもののB列のテキスト（レシピのURL）を返します。<dd>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/5e7e1846-9379-9761-7168-8345b934d4c1.png)

<dt>④分岐　その2<dt>
<dd>google sheets A列に記載が無いキーワードの場合、こちらを通ります。<dd>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/01361ddf-d847-97ce-0a4c-5e66d28571c4.png)

<dt>⑤返答メッセージ　その2<dt>
<dd>google sheetsに記載していないものの場合、「そのレシピはありません」と返答します<dd>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/28ba325b-36f5-a498-7178-a0f78b8a6b79.png)

:::note warn
**つまづきポイントその１**
最初は何をうっても同じ返答がきていました、、、
そこでHTTPのURLの最後に　`` encodeURL(``![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/d0f114de-aa42-0061-8f7c-d10056156b64.png)`` )``
を入れてみたところ正常に動きました！
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/e7983bee-f95b-1396-c6e9-ec3eb98ae792.png)

:::note warn
**つまづきポイントその２**
分岐が正常に動かず、、、！
存在しない単語を入力しても何もかえってきません。
そこで最後のLINEの中身を確認すると、素材ありと素材なしの場合でStatus code の数値が違い、それぞれ200と404！それをフィルターに設定し、無事動きました！
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572038/91dc0fdc-fe61-caea-33ec-1f0ed3a0e8c1.png)

# 初めて作ってみて、、、

メニューや素材を打ち込むとレシピが返ってくるようになってきました！
動くようになった時の感動ったらないです:joy::joy::joy:

本当に本当にここまでくるのに長かった、、、
ここにはつまづきポイント２つしか書いていませんが、他にもたくさんあり、なかなか前に進まずくじけそうになっていました:sweat:
失敗しながら学んでいくのですね。
それにしても皆さんの記事に本当に助けられました、、、詳細を丁寧に説明していただいているのでわかりやすいです、感謝！！！


# 反省・改善

今回は１つのキーに対して１つのレシピしか返していませんが、２つ３つ返せるようにできればなと考えています。たまねぎ、玉ねぎ、など、いくつかの候補にも対応できるとより実用的になるなと思っています。

SSSAPIはFREEプランだと50行までとのこと。
なのでもっと内容量が多いものだと別の方法かなと思いました。


これで悩む時間を減らしてぐーたらするぞー！って違うか。
家族の時間と、たまには自分の時間もつくるのですよ(^▽^)/。


# あとからわかったこと【11/13追記】

実は今回、SSSAPIを使いながら「google sheets moduleを使うのとどっちがいいんだろう、、、」と思っていました。
そこでgithubの質問コーナーで聞いてみたところ即返答が！

・基本的にSSSAPIで実施したいことはgoogle sheets moduleで実施できる。
・MAKEを利用する上ではあまりSSSAPIを利用する意味はないのかもしれない。
・ただMAKE以外のサービスや実装方法ではMAKEのmoduleは使えないのでSSSAPIなど他の実装方法が必要となる。

とのことです。
こちらでも大変勉強になりました、感謝です☺

最後まで読んでいただきありがとうございました！