【保存版】3分でできるmakeでLINE Botのローディングアニメーションを実装する方法

## LINE Botのローディングアニメーションとは

この記事にたどり着いたということは改めて説明する必要はないと思いますが、軽く説明します。

:::note info
3分で終わらせたい方は目次から「[★makeでの実装手順](https://qiita.com/vanchan2625/items/e6b88d31025838f19e5d#make%E3%81%A7%E3%81%AE%E5%AE%9F%E8%A3%85%E6%89%8B%E9%A0%86)」 の章まで読み飛ばしてください。
:::

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/feb49a6f-e58f-ed84-7a3d-8194458a7509.gif">

こんな風に処理中であることを視覚化するというユーザビリティ手法の一つです。

これがないとユーザーは処理がフリーズしているのか生きているのか分からなくて不安ですよね。

生成AIを取り入れたプロダクトが普及していますが、一方で処理に待ち時間がかかってしまうという課題もあります。
その課題による不安を軽減するうえでも、処理中であることを視覚化することは有効な手段ではないでしょうか。


## プッシュメッセージを使えばよいのでは？
たしかにプッシュメッセージを使用してローディングメッセージを表示し、処理中であることを視覚化することも可能です。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/c3118d1a-a2a6-479b-a942-7b4affae4947.gif">

ただ、プッシュメッセージと比較して以下3つのメリットがあります。
<dl>
  <dt>ローディングメッセージのメリット</dt>
  <dd>①制限なく利用することができる。<font color="red"><strong>無料プランだとプッシュメッセージは月間200通まで</strong></font> (2024年6月現在)</dd>
  <dd>②メッセージとして残らないので、トーク画面がスッキリする。</dd>
  <dd><em>③<font color="green">●</font><font color="blue">●</font><font color="purple">●</font>の玉が踊っているのがかわいい</em> <strong><font color="red">←ここ重要</font></strong></dd>

  <img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/5c063b68-20c1-2951-0619-2c6af6340e7d.jpeg">
</dl>

## ★makeでの実装手順
#### 対象の方
[LINE Developers](https://developers.line.biz/ja/)でLINE Botを作成し、難度問わず[make](https://www.make.com/en)で何かしらのプロダクトを作ったことがある方
***
### Ⅰ. makeでHTTPモジュールを用意
#### まずシナリオを開く
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/d246cb64-75ca-1d1d-c542-3c284caebfb8.png)

#### 空白のスペースで右クリックして`Add a module`を選択
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/280bdddf-ced4-8738-f665-930ebad21897.png">

#### HTTPモジュールの`Make a request`を選択
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/58e04a89-68e7-417b-a2fa-9a0764a7f04c.png">

#### エラーが出ますが一旦`Cancel`
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/31d4d278-2c9a-1024-1e48-f4b373566758.png">

#### LINEモジュールのWatch Eventsと任意のモジュールの間にHTTPモジュールを接続
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/f9894e75-a2bd-ba9a-8dc6-e1bc8c2867f4.png">

#### HTTPモジュールを左クリックする
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/fe57428b-7a48-f076-456a-091f3cb0707b.png">

#### Headersの下の`Add a header`を選択
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/592282cf-b123-9e0b-0747-8da5ba7c93ae.png">

**これで準備完了**

***
### Ⅱ. [リクエストの例](https://developers.line.biz/ja/docs/messaging-api/use-loading-indicator/)に従って各項目を埋めていく
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/8ff85461-7ad7-573f-6363-3e0e117026f1.jpeg">

<font color="red">**8箇所**</font>設定する項目があります。
上から埋めていきましょう。

```:①URL
https://api.line.me/v2/bot/chat/loading/start
```
```:②Method
POST を選択
```
```:③Headers → Item 1 → Name
Authorization
```
```:④Headers → Item 1 → Value
Bearer {}
```
:::note info
波かっこ **{}** の中に[LINE Developers](https://developers.line.biz/ja/)からご自身のチャネルアクセストークン（長期）をコピペしてください。
:::
:::note warn
Bearerと{}の間には半角スペースが必要です。
:::
:::note alert
SNS発信やWeb会議で画面共有する際は、チャネルアクセストークンは**絶対に**隠してください。
悪用される恐れがあります。

万が一流用した**可能性**がある場合、即刻LINE Botアカウントを削除し、新規で作り直してください。
:::
```:⑤Body type
RAW を選択
```
```:⑥Content type
JSON (application/json) を選択
```
```:⑦Request content
{
    "chatId": "",
    "loadingSeconds": 5
}
```
:::note info
"chatId":の  **""** の中身はご自身のmakeのLINEモジュールのWatch Eventsから
Events[] → Sourceとタブを開いていきUserIDを選択してください。
:::
:::note info
"loadingSeconds": の数値が**ローディングアニメーションの表示する秒数**になります。
以下の通りに設定することができます。

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/906c80b3-3c98-2bd7-a43a-427969766e48.jpeg">

ただし、設定秒数内にメッセージが届くとその時点でアニメーションの表示は消えます。
:::

<details><summary>一応Resquest contentのサンプル</summary>

```:Request content
{
    "chatId": "{{1.events[].source.userId}}",
    "loadingSeconds": 5
}
```
</details>

```:⑧Parse response
今回はYES/NOどちらでも構いません
私はYESにしました
```

### Ⅲ. 動作確認
makeでRun onceを選択して、LINE Botにメッセージを送ってみましょう。

https://x.com/vanchan2625/status/1798564317102801247

動きました。完成です。皆さんどうでしょうか。
***
### Ⅳ. 補足（動作しなかった場合のみ）
まず、ご使用のLINEのバージョンが以下を満たしているか確認してください。[LINEアプリのバージョンを確認する方法](https://appllio.com/line-confirm-latest-version#h38)

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/33e8ca07-979d-ab8e-5489-a5b5764af6cd.jpeg">

上記を満たしているのにも関わらず、アニメーションが表示されなかった場合は、HTTPモジュールの虫眼鏡マークからステータスを確認してみましょう。

正しくアニメーションが表示される場合は、ステータスコード`202`と空のJSONオブジェクト
```:JSON
{}
```
を返します。

<details open><summary>表示の例</summary>

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/be6a834c-8fbd-e874-459d-e66d19d38c8a.jpeg">
</details>

:::note warn
例えば、ステータスコード`400`を返している場合、以下のような要因が考えられます。
- [ ] 無効な秒数が指定されています。
- [ ] 無効なユーザーIDが指定されています。
- [ ] グループトークまたは複数人トークが指定されています。
:::
:::note warn
なお、以下のユーザーを表示先に指定してリクエストを行った場合、ステータスコード`202`が返りますが、実際にはローディングアニメーションは表示されません。
- [ ] LINE公式アカウントとのトーク画面を開いていないユーザー
- [ ] LINE公式アカウントを友だち追加していないユーザー
- [ ] LINE公式アカウントをブロックしているユーザー
- [ ] LINEアカウントを削除したユーザー
:::

それでも解決できない場合は、[Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#display-a-loading-indicator)の「ローディングのアニメーションを表示する」の項などを参照して見直してみてください。

## エピローグ
LINE Botのローディングアニメーションは2024/4/17に発表された、執筆時点では比較的新しい技術です。
一人で悩まず、この記事を見てサクッと実装していただければ幸いです。

ぜひご自身のプロダクト、ハッカソンなどに利用してみてください。

お気軽に[𝕏](https://x.com/vanchan2625)のフォローもお待ちしております☻
感想、フィードバックなどもお待ちしております🙌