今夜の献立に困っている？キーワードでレシピを提案するLINE botを作ってみた

こんにちは。
料理好きだからスーパーで仕事、コードとか見たらすぐ頭が痛くなるのにDXに関わっている部門で働くスーパーマーケット社員でーす。

質問です。以下のようなシチュエーションを出会ったことがありますでしょうか：

- スーパーで買い物時、｢これ今日特売だ！でも何を作れるでしょ･･･｣
- 冷蔵庫を開いた時、｢あれ！いつからこんなものあったけ？なんとか作りましょう！が･･･｣
- ･･･

その場で **｢もしLINEにキーワードを送ってレシピができたらいいなー｣** と思ったことがありませんか？
自分はよくありました。なので今回は、そんなレシピを提案するLINE botを作ってみて、過程を記録したいと思います。

## 使用ツール
- Line Developer アカウント
- Make（旧: Integromat）
- Rakuten Rapid API

## 完成品

https://twitter.com/Ex2kSU5kdtINw9K/status/1530423215558098944?s=20&t=2LETHu7xH7uKRydq31uG8Q

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/4affb912-49ba-ab42-55fa-690719af9865.png)

## 事前準備

- **アカウント開設と連携の準備**

  - LINE Developer アカウント作成、bot用公式アカウント開設
  参考：[1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)

  - ｢make｣アカウント作成
  参考：[Make（旧: Integromat）のアカウント登録 (zenn.dev)](https://zenn.dev/protoout/articles/12-integromat-signup)(サイト外)

  - ｢make｣と｢LINE bot｣連携
  参考：[IntegromatでLINEBot連携 (zenn.dev)](https://zenn.dev/inoue2002/articles/3067c574b3a605)(サイト外)

- **｢make｣でLINE botの返事シナリオを作成**

  - bot返事の仕組みを整え
　`ユーザーがキーワード送信 → APIから情報取得する → ユーザーへ返信` のようなベーシックフローです。
![ユーザーがキーワード送信 → APIから情報取得する → ユーザーへ返信.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/6cc03834-5d40-3b98-3b3f-220f21bd5dc0.png)

## レシピAPIへリクエスト
今回使用したAPIは、Rapid APIで発見した[Recipe by API-Ninjas](https://rapidapi.com/apininjas/api/recipe-by-api-ninjas/)(サイト外)です！
>その他、[楽天レシピ系API](https://webservice.rakuten.co.jp/explorer/api/Recipe/CategoryList)(サイト外)~~、「スパイスブログ」~~ などのレシピ系APIもあります
> 参考：[API Bank グルメ･レシピ系](https://www.apibank.jp/ApiBank/api?category_no=38)(サイト外)
※5/29追記:[スパイスブログのAPI提供は終了いたしました（2020年1月）](https://www.ai-land.co.jp/press/p-recipeblog/394/#:~:text=%E2%80%BB%E3%82%B9%E3%83%91%E3%82%A4%E3%82%B9%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AEAPI%E6%8F%90%E4%BE%9B%E3%81%AF%E7%B5%82%E4%BA%86%E3%81%84%E3%81%9F%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%882020%E5%B9%B41%E6%9C%88%EF%BC%89)(サイト外)


一回リクエストで10個のレシピを提供します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/f6cc8532-8fbb-c9df-6e12-c8ee626b2487.png)

## レシピを返信するシナリオを作成

::: note warn
ここからは、一定な配列の知識が必要。
初心者はこちらへ参照⇛[プログラミングの「配列」とは？変数との違いや具体的な使い方をわかりやすく解説](https://web-camp.io/magazine/archives/62260)(サイト外)
:::

### JSONモジュールで内容解析
HTTPリクエストしたDATAは`JSON`ので、そのままユーザーへ送信するのは行けません。`Parse JSON`モジュールで詳細内容を解析します。
![JSONモジュールの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/b6da15f3-4f1a-1812-21ee-1d81f8f94941.png)

::: note
【実行結果】
今回のAPIレクエストした`Data`は`Long String`です。解析できますが、`Collection`10個になりました。色々調べましたが、なかなか説明案が出てこない･･･ ~~素人が大変ですよ･･･~~ 
※5/31追記：公式の説明([Make Help Center/Tools/JSON](https://www.make.com/en/help/tools/json#collection-vs--array)）が参考になるかもしれない
![Long Stringなので、解析したら、10個のレシピが入っています。.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/aab30abd-9d60-12c0-177d-91b011e0fd05.png)
:::

### ランダムにレシピを返信
「`Bundle`は何？なぜ毎回同じメニューしか返信してこないの？どうすれば他の`Bundle`の内容が出てくるの？」とかなり悩みましたが、

>もし配列になさせて、配列の指定された要素を取り出せばできるかもしれない

と考え、色々のところに触りました。ついに解決しました。

  - **配列へ転換**
まずは`Parse JSON`に取得した各`Collection`が`Array aggregator`モジュールで配列にします。
![各レシピをのタイトル、材料、作り方を組み立て、10個レシピの配列を組み合わせ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/3cf0d4bb-54f8-38a3-e829-ed913bc8da3d.png)

::: note 

**【実行結果】**
![文本→配列  転換の模様.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/029d35a2-d217-c340-e773-85f4fe373b88.png)
:::

  - **乱数を生成**
変数`Number`を設定します。この数字は、配列の要素を指定するに使用します。
  ![乱数を生成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/6197a739-8f5e-cd8c-5e42-6e37a2649411.png)

  - **返信内容を組み合わせ**
返信したい内容を組み合わせます。生成した乱数`Number`は`Array[` と`]：text`の間に入れると、配列の要素を指定します（どちらのレシピを返信します）。
![配列の○個目のレシピを返信.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/d2ab85be-a905-5ddb-8b83-620b39f3ad07.png)

### エラー発生した場合も忘れず
結果が出なかった時、返信の分岐を設置します。
![単語がない時、エラーメッセージを返信の分岐も忘れず!.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/69ffd517-9ac8-963e-5efb-afe9e9b3503b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/4d1a24d2-19c3-3222-b6b4-0d0186a2e0e9.png)

### 完成シナリオ全体
![完成シナリオ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2669194/8b25b8a6-6d5f-8a3b-bcf5-c1d095a88cfb.png)


## 結語
今回使用するAPIは、残念ですが、英語しか対応できない。
前文紹介した楽天レシピAPIなどは日本語OKですが、`アプリKey`が必要、ハードルが高いので、今回はちょっと挑戦できず･･･

もう一個は、多分知的財産保護のため、簡易的に検索･使用のは、無理かなー

## もし…
もうちょっと時間がある場合、色々をアップデートして試したいです！

  - 日本語単語を送信して、翻訳APIで英語に、結果も英語から日本語に翻訳したら。。。
  - 楽天レシピ系を直接利用
  - タイトルの前に関連eomjiもあれば･･･
  - 栄養素分析まで取り組めば･･･
  
## 参考記事
https://qiita.com/ishioka-nozomi/items/1b0720759b0f02c6e5b9

https://qiita.com/Ziyasumin01/items/2867dab21a0b8b520d0f

https://qiita.com/n-tanimoto/items/947e74716e11fb8554ad

https://qiita.com/long66tail/items/00ba2e3912933331ecec

https://qiita.com/konitech913/items/7ffa7907a6c03c8909fc

https://qiita.com/anzuuuuu/items/be4e4845c21ac3334695