【ビール女子麦子さん⑥】Watson AssistantとLINE Messaging APIでビールの雑学クイズ機能を作ってみた


1.はじめに

「ビール女子🍺麦子さん」シリーズ、6回目の投稿です。今回は、少し前にリリース済みの「ビールの雑学クイズ」の実装方法について書こうと思います。

機能としては以下のようなものです。 :grinning: :わたし  👧 :麦子

 :grinning: LINE上で「ビールのクイズを出して!」と麦子さんにお願いする。

 👧 ビールのクイズを出題する。回答の選択肢が記載されたボタンを表示する。

 :grinning: 回答ボタンを押す

 👧 正解か不正解を判定。解説を表示。

ちなみに、ビール女子麦子さんとは、以下のようなWatson AssistantとLINE Messaging APIでつくった、ビールに詳しいチャットボットです。よかったら遊んであげてください♪


2.作り方

使うのはいつもの3つとLINE Bot Designerです。

・WatsonAssistant

・Node-RED

・LineMessagingAPI

LINE Bot Designer  ←初利用!


(1)クイズをランダムに出題する仕組み

クイズをランダムに出題するために、クイズを出題するまでに2回Watsonに問い合わせをする仕組みにしました。

出題の仕組み.png

①ラインから「クイズを出して」とメッセージを送る。

②WatosonAssistantはクイズNoリストからランダムにクイズ番号を返す。

③そのクイズ番号でもう一度WatosonAssistantに問い合わせを行い、クイズ内容を取得する。

④クイズ内容をLineMessagingAPIで表示する。


(2)クイズ用のダイアログを出す仕組み

今回は、LINE Bot Designerを使います。

LINE Bot Designerをダウンロードし、インストールする。

1.png

②LINE Bot Designerのアイコンをダブルクリックして起動。

②プロジェクト設定で「OK」をクリック。

③メニューで「メッセージ」-「ボタン型テンプレートメッセージ」を選択。

④プロパティに表示したい内容を入力。

2.png

⑤LINE Bot Designerの右下にJSON形式で設定内容が表示されます。クイズのダイアログを出すためには、以下のように設定すればよいことが分かりました。

{

"type": "template",
"altText": "this is a buttons template",
"template": {
"type": "buttons",
"actions": [
{
"type": "message",
"label": "酵母",
"text": "酵母"
},
{
"type": "message",
"label": "大麦",
"text": "大麦"
},
{
"type": "message",
"label": "小麦",
"text": "小麦"
}
],
"title": "ビールの雑学クイズ",
"text": "●●とは、なーに?"
}
}


(3)回答を判定する仕組み

WatsonAssistantで、クイズの設問を親ノード、回答を子ノードとして設定します。

①親ノードでクイズを出題。

②クイズの回答を受け取ると、子ノードで正解/不正解を判定


3.実装

それでは実装していきましょう。


(1)WatsonAssistantの設定

①WatsonAssistantの「Intent」で「#ビールの雑学クイズ」を設定します。

3.png

②WatsonAssistantの「Entity」で「@ビールの雑学クイズ」を作成し、クイズ番号と回答選択肢を登録します。

6.png

②WatsonAssistantの「Dialog」で「#ビールの雑学クイズ」を受け取った場合に、ランダムにクイズ番号を返すように設定します。

4.png

③子ノードを作成し、「#ビールの雑学クイズ」の子ノードの反応条件を「#ビールの雑学クイズ」と「@ビールの雑学クイズ:ビールの雑学クイズ001(クイズ番号)」を設定します。反応内容の1行目にはタイトル、2行目にはクイズ内容、3行目~5行目には回答選択肢を設定します。

5.png

④さらに子ノード(孫ノード)を作成し、「@ビールの雑学クイズ」を受け取った場合に、回答内容に応じて正解/不正解の回答を返すように設定します。

7.png


(2)Node-REDの設定

実際の麦子さんは度重なる機能追加でかなり複雑化していますので、シンプルに説明するために【ビール女子麦子さん】 IBM WatsonとLINEでbotを作ってみたの時点のNode-REDへ追加するイメージで書きます。初期状態を以下の状態とします。なお、この初期状態のフローはLINE x Watson AIボット入門を参考にして作成しています。

初期状態.png

①Assistantノードの出口側に「クイズ判定」のSwitchノードを配置します。WatsonAssistantのmsg.payload.output.text[0]が「ビールの雑学クイズ」の文字列を含むとき1、それ以外の時に2につながるように設定します。(この時、WatsonAssistantから「ビールの雑学クイズ001」のようなクイズ番号が返ってきていることを想定しています)

8.png

②「ビールの雑学クイズ」の文字列を含む場合は、「Input文設定(クイズ)」のchangeノードに進むように設定。それ以外の場合は、「set payload.messages」に進むように設定。

9.png

③「Input文設定(クイズ)」のchangeノードでは、msg.payloadmsg.payload.output.text[0]を代入するように入力する。(これで、WatsonAssistantに「ビールの雑学クイズ001」のクイズ内容を問い合わせる)

④「assistant」と「クイズ判定」の間に、「回答の数分析」のSwitchノードを挿入する。ここで、msg.payload.output.text[1]is nullの時には1(クイズ判定)へ、それ以外の場合は2(クイズ用のOutput文設定)へ進むようにする。

<補足>

msg.payload.output.text[0]~msg.payload.output.text[4]には、WatsonAssistantからの回答が格納されます。1つなら[0]のみ、複数回答なら[1]~[4]に値が入ります。今回、クイズの設問の場合は以下のように複数回答になるように設定しているためmsg.payload.output.text[1]がnullではない場合にクイズとみなす判定をしています。

payload
格納内容

msg.payload.output.text[0]
タイトル

msg.payload.output.text[1]
クイズ内容

msg.payload.output.text[2]
回答選択肢1

msg.payload.output.text[3]
回答選択肢2

msg.payload.output.text[4]
回答選択肢3

10.png

⑤「回答の数分析」の2の出口と「set HTTP Headers」の間に「outputメッセージの設定(クイズ)」のChnageノードを配置する。

11.png

⑥値の代入にmsg.payload.messagesを入力し、対象の値には以下を設定する。

[

{
"type":'text',
"text":'ビールの雑学クイズだよ♪'
},
{
"type": "template",
"altText": "ビールのクイズだよ",
"template": {
"type": "buttons",
"actions": [
{
"type": "message",
"label": msg.payload.output.text[2],
"text": msg.payload.output.text[2]
},
{
"type": "message",
"label": msg.payload.output.text[3],
"text": msg.payload.output.text[3]
},
{
"type": "message",
"label": msg.payload.output.text[4],
"text": msg.payload.output.text[4]
}
],
"imageBackgroundColor": "#F0FFF0",
"text": msg.payload.output.text[1]
}
}
]

⑦ひ・・・ひどい。並べ方のセンスがなさすぎてすみません。ひとまず、これでデプロイしたら完成です。

12.png


4.できあがり

こんな感じになりました!Node-REDのフローがごちゃごちゃしてしまって気持ち悪いですが、何とか動きました。

じつは、このクイズ、弱点がありまして、2人以上が同時に利用すると正解の判定ができなくなってしまいます。麦子さんは1人分しか会話を覚えていられないのですね・・・:disappointed_relieved:

よかったら麦子さんと遊んであげてください。

ビール女子🍺麦子さん 

  ↓↓↓↓↓

友だち追加

※現在開発中につき、予告なくサービスを停止する可能性がある点をご了承ください。