New Watson Assistant と LINE をつなぐ Part 3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/96b1e4e7-f85e-6cea-4ccc-3fa9cb659257.png)

[前回の記事](https://qiita.com/yanagih/items/804bb3d26cc7146ce7a7)では、シンプルなテキストが表示されただけで、選択肢のボタンがありませんでした。
やはり、LINE ボットですので、選択肢のボタンも表示して欲しいですね。
そこで今回は、New Watson Assistant の選択肢のボタン表示を LINE ボットでも対応してみます。

([以前の記事](https://qiita.com/yanagih/items/4ab4bbf5077f90ef73bf)からの抜粋)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6276b68b-113d-5c3d-be27-429843d27219.png)

ポイントは 3 つです。

1. New Watson Assistant からの出力 (**JSON形式**)を **debug ノード**で確認する。
1. 選択肢ボタンの場所 (**JSON上の構造**) を確認する。
1. 使用したい **LINE メーセージの形式に合わせて、JSON 形式のメッセージを出力**する。

それでは、順番に見ていきます。

# New Watson Assistant からの出力 (**JSON形式**)を **debug ノード**で確認する。
**debug ノード** を方眼紙の上にドラッグしてください。そして、**assitant V2 ノード**と線で繋ぎます。
終わりましたら、忘れずに**デプロイ**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0b1fa4a5-fbad-1457-1460-6c9b1329ec18.png)
**debug ノード** をダブルクリックし、[msgオブジェクト全体] を選択しますs。**完了**とデプロイ**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0cfe1aeb-4d61-1c41-a5be-f7371e90eb07.png)

### 選択肢ボタンの場所 (**JSON上の構造**) を確認する。
LINE アプリから、「ピザの注文」と入力してみてください。
メッセージ欄の **debug アイコン**をクリックすると、**debug ノード**が受け取ったメッセージが表示されます。
表示されたら、**msg オブジェクト** を全て展開してみてください。特に**矢印**の部分に注目します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/715cd3be-eb42-bce2-f9d5-3ca802b36678.png)
[前回(https://qiita.com/yanagih/items/804bb3d26cc7146ce7a7)は、① のテキストだけを抜き出して出力していたため、選択肢のボタンが表示されませんでした。

この部分です。(抜粋します)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/269e95a9-fee7-7bad-0c5f-d65e4b28ba2c.png)

それでは、選択肢のボタンはどのように出力されていたかというと、実は ② の部分になります。
要するに、② の部分を LINE のテンプレート形式で出力すれば良いわけです。

# LINE がサポートするリッチコンテンツに対応させる

LINE がサポートする表示形式を調べてみます。
[公式サイト](https://developers.line.biz/ja/reference/messaging-api/#flex-message)に詳しく書かれています。
私が以前使ったことがある、LINE BOT Designer の開発はもう終了していて、今後は **Flex Message** が主流になっていきそうで、これまでより[一段と表現力が上がっている](https://developers.line.biz/flex-simulator/)ことがわかります。
とはいえ、今回はここまでの表現力を必要とはしておりませんので、従来からサポートされている**ボタン・テンプレート**を使用します。
ボタン・テンプレートの構造イメージはこんな感じです。

```JSON:ボタン・テンプレートの構造(ピザの種類を選択させる例)
{
    "type": "template",
    "altText": "this is a buttons template",
    "template": {
        "type": "buttons",
        "title": "ピザの注文",
        "text": "ピザの種類を教えて",
        "actions": [
            {
                "type": "message",
                "label": "マルゲリータ",
                "text": "マルゲリータ"
            },
            {
                "type": "message",
                "label": "シーフード",
                "text": "シーフード"
            },
            {
                "type": "message",
                "label": "ペパロニ",
                "text": "ペパロニ"
            }
        ]
    }
}
```
New Watson Assistant が出力する選択肢ボタンの構造(**② の構造**)から、情報を抜き出して、ボタン・テンプレートを構成し、出力してやれば良いことがわかります。

(再度抜粋)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f7588a5d-bcdb-b6c7-a601-0c8f782ed65e.png)


# それでは実装

**function ノード**をドラッグします。使わない **change ノード** にデータが流れないように、線を削除してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2bc600cd-43e8-1ab3-b8d9-77325f90c3c5.png)

### Javascriptを使い、使用したい **LINE メーセージの形式に合わせて、JSON 形式のメッセージを出力**する。
**function ノード** をダブルクリックします。こちらのコードをコピペしてください。(ちょっとコードの量が多いように見えますが、まだまだ、**low code** ですね) 

```javascript: javascript: 選択肢ボタンに対応するためのコード
if (msg.payload.output.generic[0] && msg.payload.output.generic[1]) {
    let actions = [];
    for (const elem of msg.payload.output.generic[1].options) {
        const button = {
            "type": "message",
            "label": elem.label,
            "text": elem.value.input.text
        };
        actions.push(button);
    }
    msg.payload = {
        "type": "template",
        "altText": "this is a buttons template",
        "template": {
            "type": "buttons",
            "title": "ピザの注文",
            "text": msg.payload.output.generic[0].text,
            "actions": actions
        }
    };
} else {
    msg.payload = {
        "type": "text",
        "text": msg.payload.output.generic[0].text
    };
}

return msg;
```
※ エラー処理等、最低限必要な内容のコードであることをご了承ください。

(コピペ後のイメージ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/b977911a-3989-6020-3f28-a7f9ae70c143.png)

(ノードのイメージ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/57c085ef-dd99-83c4-0468-794a93d07f9b.png)

必要な作業は以上です。

LINE アプリから試してみましょう。こんな感じで表示されることを確認してください。
ずいぶん LINE アプリのようになりましたね :grinning:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/3d037204-38c4-951b-c925-08b596c61102.png)

# いかがでしたでしょうか？

意外と簡単だった！、難しかった？ でしょうか。

今回のポイントを振り返ります。

1. [New Watson Assistant からの出力 (**JSON形式**)を **debug ノード**で確認する。](https://qiita.com/yanagih/items/a38e418a58317f1fd3bf#new-watson-assistant-%E3%81%8B%E3%82%89%E3%81%AE%E5%87%BA%E5%8A%9B-json%E5%BD%A2%E5%BC%8F%E3%82%92-debug-%E3%83%8E%E3%83%BC%E3%83%89%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B)
1. [選択肢ボタンの場所 (**JSON上の構造**) を確認する。](https://qiita.com/yanagih/items/a38e418a58317f1fd3bf#%E9%81%B8%E6%8A%9E%E8%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E5%A0%B4%E6%89%80-json%E4%B8%8A%E3%81%AE%E6%A7%8B%E9%80%A0-%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B)
1. [Javascriptを使い、使用したい **LINE メーセージの形式に合わせて、JSON 形式のメッセージを出力**する。](https://qiita.com/yanagih/items/a38e418a58317f1fd3bf#javascript%E3%82%92%E4%BD%BF%E3%81%84%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%81%84-line-%E3%83%A1%E3%83%BC%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E5%BD%A2%E5%BC%8F%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A6json-%E5%BD%A2%E5%BC%8F%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B)

:::note info
Node-RED が提供する function ノードで使える言語は Javascript のみです。他の環境で実装する場合は、その環境がサポートする言語を使用してください。
:::

使用したい LINE メッセージの形式が変わっても、対応のさせ方は基本的に同じです。
興味のある方は [LINE 公式サイト](https://developers.line.biz/ja/reference/messaging-api/#flex-message)を見ながらチャレンジしてみてください。

# 前回の記事 / 前々回の記事

https://qiita.com/yanagih/items/691229a7623649540b76

https://qiita.com/yanagih/items/804bb3d26cc7146ce7a7

# 参考情報

### 参照したリファレンス

https://nodered.jp/docs/user-guide/writing-functions

https://developers.line.biz/ja/reference/messaging-api/#flex-message

https://developers.line.biz/ja/services/bot-designer/


### 参考にしたコード / 記事

https://github.com/n0bisuke/node-red-contrib-line-messaging-api/blob/main/nodes/reply/reply.js

https://qiita.com/n0bisuke/items/9c4e2d365cd6f5a45514

https://dev.classmethod.jp/articles/line-bot-designer-bot-template/


### 関連する Qiita Advent Calendar 2022 の記事

https://qiita.com/yanagih/items/691229a7623649540b76

https://qiita.com/yanagih/items/804bb3d26cc7146ce7a7