AI IBM Cloud LINE チャットボット プログラミング

無料で作る LINE & Watsonチャットボット開発 -おしゃれなメッセージを返信しよう-

line Watson bot

商品について、単にテキストで¥200円とかでは、味気ないし、ユーザーに優しくありません。

そこで、Flex Messageを活用して、リッチなUIにしていきたいと思います。

前回、作ったチャットボットをベースに修正します。

ひつじ工房
 
無料で作る LINE & Watsonチャットボット開発
http://hituji-ws.com/ai/line-watson-chatbot/
LINEとWatson Assistantを連携し、LINEにチャットボット実装できるようになっていました。1年ちょっと前に調べた時には、なかったのか、LINEは日本だけ使われているから、情報が少なかっただけなのかはわかりませんが、早速実装

会話フローを変更するのは、Watson Assistant側ですが、LINEの返信メッセージを
リッチにするには、NodeRedを修正します。

スポンサーリンク

Flex Message開発時の参照リンク

Message APIリファレンス

developers.line.biz
 
LINE Developers
https://developers.line.biz/ja/docs/messaging-api/flex-message-elements/

FlexMessage Simulator

ある程度サンプルがあるので、近いサンプルをもとに、ここで編集することで、
プレビューが見れます。あとはコピペするだけです。

developers.line.biz
 
Flex Message Simulator
https://developers.line.biz/console/fx/

商品画像、価格と商品説明を表示

getAssistantMsgという箇所で、Watson Assistantからメッセージを受け取って、LINEに返信するデータを作成していますので、ここを編集します。

前回の状態

"message":[ここの中身がLINEで表示したい内容] 

var post_request = {
    "headers": {
        "content-type": "application/json; charset=UTF-8",
        "Authorization": " Bearer " + "{%LINE アクセストークン%}"
    },
    "payload": {
        "replyToken": flow.get("replyToken"),
        "messages": [
            {
                "type": "text",
                "text": msg.payload.output.text[0]
            }
        ]
    }
};

return post_request;

変更後

変更後は下記のようにします。

Watsonのエンティティが「ゆず酎ハイ」の時にFlexMessageが表示されるようにしています。

var outMessage = msg.payload.output.text[0];
var code = '%LINE アクセストークン%';
var post_request = '';


//FlexMessageを表示したい時
if (msg.payload.entities[0].value=='ゆず酎ハイ') {
  var sentmsg = %Flex MessageのJSON%;
  //ある条件の時
  post_request = {
      "headers": {
          "content-type": "application/json; charset=UTF-8",
          "Authorization": " Bearer " + "{" + code + "}"
      },
      "payload": {
          "replyToken": flow.get("replyToken"),
          "messages": [{
              "type": "flex",
              "altText": "#",
              "contents": sentmsg
          }]
      }
  };
}else{
  //通常返信
  post_request = {
      "headers": {
          "content-type": "application/json; charset=UTF-8",
          "Authorization": " Bearer " + "{" + code + "}"
      },
      "payload": {
          "replyToken": flow.get("replyToken"),
          "messages": [
              {
                  "type": "text",
                  "text": outMessage
              }
          ]
      }
  };
}

return post_request;

%Flex MessageのJSON%のところを下記とかに変更します。

画像のURLはhttpsにしないとエラーが出ます。

{
  "type": "bubble",
  "hero": {
    "type": "image",
    "url": "https://****画像URL",
    "size": "full",
    "aspectRatio": "3:2",
    "aspectMode": "cover"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "text",
        "text": "¥280",
        "size": "xl",
        "weight": "bold"
      },
      {
        "type": "text",
        "text": "ゆず果汁の豊潤な香りと酸味がひきたち、まろやかでコクのある味わいが楽しめます",
        "wrap": true,
        "color": "#aaaaaa",
        "size": "xs"
      }
    ]
  }
}

これで、こんな感じで返事が返ってきます。

ここにいっぱい条件をかくとコードが煩雑になるので、
工夫する必要がありそうです。

WatsonAssistantから、FlexMessage使うかとか、どのメッセージ使うかなど返して、
それに応じて、メッセージを切り替えるのが良さそうです。

出店リストの表示

商品や料理方法など複数回答を行いたい場合、リスト表示にするのも良いですが、

個人的にはカルーセルという横にスライドしてみるのが好きです。

FlexMessageSimulatorだとShoppingの例になっているものです。

コードは下記参照いただいても良いですし、Simulatorのサンプルを使っても良いかと思います。

{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "hero": {
        "type": "image",
        "size": "full",
        "aspectRatio": "5:4",
        "aspectMode": "cover",
        "url": "https://***"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "text",
            "text": "ゆず胡椒鍋",
            "wrap": true,
            "weight": "bold",
            "size": "xl"
          },
          {
            "type": "text",
            "text": "温かい、金沢ゆず胡椒鍋を100円/杯で提供しています。ぜひ、ご賞味いただき、温まってください。",
            "wrap": true,
            "color": "#aaaaaa",
            "size": "xs"
          }
        ]
      }
    },{
      "type": "bubble",
      "hero": {
        "type": "image",
        "size": "full",
        "aspectRatio": "5:4",
        "aspectMode": "cover",
        "url": "https://***"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "text",
            "text": "ジビエ",
            "wrap": true,
            "weight": "bold",
            "size": "xl"
          },
          {
            "type": "text",
            "text": "お肉の味がしっかり、丸焼きのジビエです。",
            "wrap": true,
            "color": "#aaaaaa",
            "size": "xs"
          }
        ]
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "flex": 1,
            "gravity": "center",
            "action": {
              "type": "uri",
              "label": "See more",
              "uri": "https://kanazawayuzu.com/events.html"
            }
          }
        ]
      }
    }
  ]
}

最後に

FlexMessageを使うと、おしゃれなチャットボットに生まれ変わります。

いろいろ用意してくれている、LINEに感謝！

他にもあるので、試してみようかと思います。

ただ、返信メッセージは良くなったけど、問い合わせでいちいち文字は入力したくありません。

リッチメニューにしたいところですが、有料ユーザーのみなので、質問に対して回答できない場合に、FlexMessageで工夫したいと思います。

-AI, IBM Cloud, LINE, チャットボット, プログラミング
-, ,