ホットクック公式レシピを呼び出すLINEbotを作った　#withmake

## ホットクックとは
[ホットクック](https://jp.sharp/hotcook/)は、シャープから販売されている電気無水鍋です。
他社からも電気圧力鍋などの製品は販売されていますが、ホットクックの特徴は釜の内部にかき混ぜ棒の付いた「まぜ技ユニット」です。
「まぜ技ユニット」のおかげで基本トータルで調理作業をお任せできるのが強みです。

https://jp.sharp/hotcook/change/

## なぜホットクックのLINEbotを作ろうと思ったか
私は2人の小学生母で仕事もしているので、毎日の家事は時間との勝負です。
[ホットクック](https://jp.sharp/hotcook/)は自動調理なので、他の料理と違ってずっと鍋やフライパンの前に付きっきりで調理しなくて良い点が特徴です。
外出前に材料を切って入れるだけで帰宅後は料理が勝手に出来上がっているというこの便利さは、もう手放せません。
ホットクックは<strong>令和の母三種の神器</strong>と言われているようですが、本当にその通りだと思います。



1点難点だと感じているのが、<strong>自動調理メニューが覚えにくい</strong>ことです。
ホットクックを買った時に付いてきた公式レシピ本は美味しいので、私はキッチンの横に置いて参考にしています。
レシピに応じた調理メニュー番号が割り振られていますが、ホットクック本体の液晶にはレシピ名が出ず「この番号何の料理？」とレシピを探す時間が惜しいので、直感的に探せるツールが欲しいと思い今回<strong>自分用のLINEbot</strong>作成に挑戦してみることにしました。

:::note info
我が家の機種はWi-Fi型ではない旧型のKN-HT24Bです。
Wi-fi型以降はホットクック本体の液晶画面にメニュー名が表示されるようになりました。またシャープのアプリ連携でスマホから調理メニューを送信し調理開始の操作ができるなど便利になっています。

:::

## 完成品

https://twitter.com/satsuki_nozomii/status/1517502078180261892

## 作り方

### レシピのAPIを探す

[シャープ公式レシピホームページ](https://cocoroplus.jp.sharp/kitchen/recipe/)では残念ながらAPIは公開されていませんでしたが、こちらの記事で公開しているnpmパッケージでLINEbotが作れないか検討しました。

https://blog.misosi.ru/2020/01/11/slack-hotcook-bot/

### スクレイピングを試す

私はプログラミング超初心者なので、「ノーコード」のmakeしか使えません。npmパッケージがどういうものか分からず調べていくうちに、<strong>レベルが高すぎる</strong>ことだけは理解できたので諦めました。

実力の範囲でどうにかレシピの情報を取得することができないか検索すると「スクレイピング」という技術を知りました。

初心者でもスクレイピングのできそうな[Octoparse](http://dataapi.octoparse.jp/help/)というブラウザを見つけ、インストールしました。スクレイピングの内容をAPIにして利用できるという良さそうな機能もありましたが、有料サービスでした。

無料サービスでは、スクレイピング結果をスプレッドシートかExelで保存できるようでした。しかし欲しい部分がうまくスクレイピングできずこちらも頓挫してしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2619726/eb333fb1-a30e-4d53-d48d-8991f6c12a9d.png)


### たろすけさんのスプレッドシートをお借りする

ホットクック界隈で有名な[たろすけさん](https://twitter.com/hotcooktarosuke)の「自動調理メニュー番号」スプレッドシートが配布されていたので、共有させていただきAPI化してみることにしました。

https://www.youtube.com/watch?v=CEioBSCeF1U&list=PLvLvgEjwvhL0agDLmtcz3QZHNkktnRfIj

### スプレッドシートをSSSAPIでAPIにする

#### 使ったツール
[SSSAPI](https://sssapi.app/)

makeではSSSAPIのURLに検索ワードを入れて、対象の行のみを取り出す方法でLINEbotを返したいので、JSON形式で「行数をIDとして追加」にチェックを入れてスプレッドシートをAPIにしました。

![SSSAPIの画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2619726/9d75eee6-8e1e-442c-2252-c75fdd8051a4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2619726/7f1db4dc-5b8e-6aa2-ecdf-c9f11c548d7a.png)

## 「[make](https://www.make.com/en)」と「LINE」を使ってBotを作る


LINE Divelopersに登録しLINE公式アカウントを作成、LINE Official Account Managerでbotにするための設定をした後、[make](https://www.make.com/en) のシナリオを作ります。

makeのシナリオ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2619726/9a50161f-175e-5690-c3c6-edc500b92661.png)

httpの設定
![HTTPの中身.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2619726/2f47e5ef-c49d-9fde-7e44-eba12b1e7512.png)


メニュー番号のあるなしで、LINEのsend a push Massageを分岐させました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2619726/f35508e8-26c8-7dfc-b2ff-32047120bfc5.png)

## 完成してみて

1~50番までの調理メニュー番号に対応するレシピが返ってくるLINEbotが完成しました。

[SSSAPI](https://sssapi.app/)のAPI化無料サービスがスプレッドシート50行までということで、50品目のみの仕様になりました。

もっと便利に検索するには、食材を入れてメニュー提案してくれるだとか、料理名の一部からでもレシピ名が返ってきてくるようになると便利だなぁと思います。
今後もプログラミング勉強して、アップデートしていきたいです！