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

1．はじめに

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

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

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

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

　　回答ボタンを押す

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

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

つくってみたー！！中身はWatson Assistant(Watson Conversation)です。会話のスキル作るの楽しい！！
これからビールの知識を増やして立派なビール女子に育てます😃 pic.twitter.com/nZfuqH4IfC

— はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) April 20, 2019

２．作り方

使うのはいつもの３つとLINE Bot Designerです。
・WatsonAssistant
・Node-RED
・LineMessagingAPI
・LINE Bot Designer 　←初利用！

（１）クイズをランダムに出題する仕組み

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

①ラインから「クイズを出して」とメッセージを送る。
②WatosonAssistantはクイズNoリストからランダムにクイズ番号を返す。
③そのクイズ番号でもう一度WatosonAssistantに問い合わせを行い、クイズ内容を取得する。
④クイズ内容をLineMessagingAPIで表示する。

（２）クイズ用のダイアログを出す仕組み

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

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

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

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

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

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

⑤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": "●●とは、なーに？"
  }
}

（３）回答を判定する仕組み

WatsonAssistantで、クイズの設問を親ノード、回答を子ノードとして設定します。
①親ノードでクイズを出題。
②クイズの回答を受け取ると、子ノードで正解/不正解を判定

３．実装

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

（１）WatsonAssistantの設定

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

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

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

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

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

（２）Node-REDの設定

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

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

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

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

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

＜補足＞
msg.payload.output.text[0]~msg.payload.output.text[4]には、WatsonAssistantからの回答が格納されます。１つなら[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]	回答選択肢１
msg.payload.output.text[3]	回答選択肢２
msg.payload.output.text[4]	回答選択肢３

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

⑥値の代入に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]
       }
   }
]

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

４．できあがり

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

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

ビール女子麦子さんに、ビールのクイズ機能をつけました。まだ2問しか登録してないけど😓これも、随時増やしていこうと思います。誰か問題一緒に考えてくれないかなぁ〜なんて... pic.twitter.com/n3o6tzU37u

— はぁこ🌸ビール女子麦子開発中 (@paco_itengineer) May 12, 2019

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

ビール女子🍺麦子さん　
　　↓↓↓↓↓

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