【実装途中】URL迷子を救うLINEBotを作ってみんなで幸せになりたい

# 情報の洪水に溺れてしまう
はじめまして、プロトタイピングを教えるスクールで担任をしている「りっく」といいます。
新しい生徒さんが入り、プロトタイピングについて授業をしていくのですが、
生徒さんにとっては、初めて使うWebサービス、初めて聞く単語、初めて触る抽象的な概念など、とにかく情報量が多く、初回授業後に大混乱が発生します。
情報のポータルサイトを作り、MicrosoftのTeamsに都度情報を流すものの、圧倒的な情報量の前では、どんなにまとめても溺れそうになる現状があります。。。

# 作ったもの
そこで、スマホから簡単に確認できるLINEBotを使って情報をわかりやすく表示できないかとあれこれ考え、作ってみました。

## 機能
- ポータルサイトや授業資料のURLを教えてくれる機能
- その週の宿題で気をつけることを教えてくれる機能（実装中）
- その週のTODOをまとめて教えてくれる機能（実装中）
- ちょっとした単語の意味など、ChatGPTに聞ける機能 
- 使い方を教えてくれる機能

# 実装概要
withMakeとLINEBotを利用して作っています
![スクリーンショット 2023-08-12 0.11.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/b1ffa18d-01f7-6e8a-255b-64c8dd5073a7.png)

## Routerを使って処理を分岐させる

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/c367a13b-081e-4de4-134f-30f8d729e4d8.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/87aaf823-73dc-3fad-d332-c737f0457579.png)
![スクリーンショット 2023-08-12 0.57.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/9910b396-5b21-6110-960d-feb29bc07d05.png)

## 「○○」と入力したら「XX」とリプライメッセージを返す
「○○」と入力したら〜というのはRouterと線の設定で終わっているので返却内容を設定したらOK
![スクリーンショット 2023-08-12 0.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/25eaf4ad-b4c3-8e79-5fb8-ebd3a6adef8a.png)

## TODOを返却する
:::note warn
まだ実装途中で、リプライメッセージの組み立ては参考程度にしておいてください
:::

「「○○」と入力したら「XX」とリプライメッセージを返す」という設定を毎週チマチマと行えばいいのですが、非常に面倒なので、TODOの内容自体はスプレッドシートで設定し、それをAPIとして呼び出して使うようにしました。

スプレッドシートをAPIとして利用するには[SSSAPI](https://sssapi.app/)というサービスがおすすめです。
![スクリーンショット 2023-08-12 0.14.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/f6998061-07a3-6a34-7c0b-1837d3ca3d31.png)

ポイントはshowで、今表示したいのは1、もう終わった/次の授業のTODOは0と設定するようにします。
APIの呼出時にフィルターをかけ、showが1となっているものだけ取得するようにします

[SSSAPIの資料](https://sssapi.app/help/api_call/#%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0)によると、APIのURLに、

```
?filter__対象__条件指定=値
```

と値を追加してURLを組み立てるといいので、
「showが1と一致する(exact)」データだけ取得したい場合には以下のようになります

```
https://api.sssapi.app/<app_id>?filter__show__exact=1
```

![スクリーンショット 2023-08-12 0.14.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/21fb03d0-e964-015f-c33d-535e0aef67c5.png)

このようなデータを入手することになります
![スクリーンショット 2023-08-12 1.25.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/119140a4-9225-7d75-77fc-289df35693dd.png)

そのデータをJSONで分解し、今回はTODOが複数なので、その後の処理で扱えるように、配列という箱の中に詰め直します。（もっといい方法がありそうではあるので、ご存知の方教えてください）
![スクリーンショット 2023-08-12 1.19.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/d2e3215e-f486-4d75-e3c5-c1e0441edae3.png)

「Tool」 > 「Array aggregator」で以下のように設定します。
![スクリーンショット 2023-08-15 1.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/005212e9-f8c5-2d2a-0d96-a705f74db5bd.png)

アウトプットを確認すると、Array Aggregatorの機能によって、Bundle1,2に分かれていたデータが、Bundle1にまとめられで[{Todo: ~~~~~},{Todo: ~~~~~}]という形で入っているのが確認できますね
![スクリーンショット 2023-08-15 2.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/55065508-3b57-9ba2-6432-6fc2eb396f4a.png)

リプライメッセージモジュールの中で、返信する内容を組み立てます

:::note warn
以下のように実装中です。配列に対する機能の「map」を使って取り出せそうですが、ちょっと期待どおりの動作しないので参考程度にお願いします
:::

### mapを使ってTodoを純粋な配列に変換
ArrayAggregatorで配列にしても、中身はcollectionになってしまっているので、mapで配列それぞれのcollectionのtodoを取り出します

:::note
[{Todo: ~~~~~},{Todo: ~~~~~}]
が
[~~~~~,~~~~~]
という形になります
:::

### mapを使って取り出した配列をjoinで繋げる
:::note
join([配列]; 区切り文字)という形式で設定します
:::
![スクリーンショット 2023-08-15 1.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/5f42ef36-b571-028a-293d-acbe6de3a255.png)

![スクリーンショット 2023-08-15 1.56.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/4233ec01-7135-1bd9-ed81-e40f64dfb158.png)

Run Onceだと返信されるけど、スケジュールONで動かすと返信されない。。。調査中です。。。

![スクリーンショット 2023-08-15 2.11.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/e2eb189b-1862-280d-93f6-2e11c65dfc32.png)

# 参考記事
https://qiita.com/Ryo947/items/a0b3e12a065d09c43bd0
参考記事ではAPIから取得したデータに対して、ランダムに一つを取り出してリプライに利用しています。