ちょっと話題の記事

「LINE Bot からの返答をよりリッチに」- Flex Messageを試してみた

この記事は、今月アップデートされた LINE Messaging API の Flex Message についてです。 実際に Flex Message を使用した LINE Bot を使いながら解説していきます。
2018.07.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、中村です。
先月になってしまいますが、 LINE の Messaging API にアップデートがありました!

【LINE】「Messaging API」の新しいメッセージタイプとして、 画像やボタンなどを自由にレイアウトが可能な「Flex Message」を公開

Flex Message は、 HTML 近い感覚でメッセージレイアウトできます。 これによりメッセージの UI/UX を改善し、よりよりユーザーコミュニケーションを可能にします。

Flex Message はiOS版およびAndroid版のLINE 6.7.0以降で対応しています。

今回は LINE Bot の一部を Flex Message にします。
JSONデータの生成は、LINE が用意している Flex Message Simulatorを使用してみます。
Bot 用の Lambda や API Gateway については、こちらを参照してください。

Flex Message を使ってみる

今回の LINE Bot は、商品の購入ができる機能を持っています。
LINE Bot との対話ストーリーはこのような形です。

商品の表示と決済用 QR コード表示に、 Flex Message を使用します。
本来は想定される言葉で反応するようにすべきですが、今回は対話ストーリーに記載しているワードのみにします。

それでは、 Flex Message Simulator を使って作成していきます。
+マークをクリックし、モーダルから Menu タイプを選択します。

プレビューで確認しながら、エディタで修正していきます。

送信するJSONデータのcontentsプロパティに貼り付けます。

{
    "type": "flex",
    "altText": "#",
    "contents": {
        "type": "bubble",
        "hero": {
            "type": "image",
            "url": "https://s3-ap-northeast-1.amazonaws.com/xxxxxxx/hamburger.jpg",
            "size": "full",
            "aspectRatio": "20:13",
            "aspectMode": "cover",
            "action": {
                "type": "uri",
                "uri": "https://classmethod.jp/"
            }
        },
        "body": {
            "type": "box",
            "layout": "vertical",
            "spacing": "md",
            "action": {
                "type": "uri",
                "uri": "https://classmethod.jp/"
            },
            "contents": [
            {
                "type": "text",
                "text": "Hamburger",
                "size": "xl",
                "weight": "bold"
            },
            {
                "type": "box",
                "layout": "vertical",
                "spacing": "sm",
                "contents": [
                {
                    "type": "box",
                    "layout": "baseline",
                    "contents": [
                    {
                        "type": "icon",
                        "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/restaurant_regular_32.png"
                    },
                    {
                        "type": "text",
                        "text": "$10.5",
                        "weight": "bold",
                        "margin": "sm",
                        "flex": 0
                    },
                    {
                        "type": "text",
                        "text": "400kcl",
                        "size": "sm",
                        "align": "end",
                        "color": "#aaaaaa"
                    }
                    ]
                }
                ]
            },
            {
                "type": "text",
                "text": "Sauce, Onions, Pickles, Lettuce & Cheese",
                "wrap": true,
                "color": "#aaaaaa",
                "size": "xxs"
            }
            ]
        },
        "footer": {
            "type": "box",
            "layout": "vertical",
            "contents": [
            {
                "type": "spacer",
                "size": "xxl"
            },
            {
                "type": "button",
                "style": "primary",
                "color": "#905c44",
                "action": {
                    "type": "message",
                    "label": "Order",
                    "text": "CM01_001"
                }
            }
            ]
        }
    }
}

次に、メニューを選択した時に、注文メニューと受け取りQRコードを表示させます。
先ほどと同じ要領で、 Ticket タイプを作成していきます。

{
    "type": "flex",
    "altText": "#",
    "contents": {
        "type": "bubble",
        "hero": {
            "type": "image",
            "url": "https://s3-ap-northeast-1.amazonaws.com/xxxxxxx/hamburger.jpg",
            "size": "full",
            "aspectRatio": "20:13",
            "aspectMode": "cover",
            "action": {
                "type": "uri",
                "label": "#",
                "uri": "https://classmethod.jp/"
            }
        },
        "body": {
            "type": "box",
            "layout": "vertical",
            "spacing": "md",
            "contents": [
            {
                "type": "text",
                "text": "Hamburger",
                "wrap": true,
                "weight": "bold",
                "gravity": "center",
                "size": "xl"
            },
            {
                "type": "box",
                "layout": "vertical",
                "margin": "xxl",
                "contents": [
                {
                    "type": "spacer",
                    "size": "lg"
                },
                {
                    "type": "image",
                    "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/linecorp_code_withborder.png",
                    "aspectMode": "cover",
                    "size": "xl"
                },
                {
                    "type": "text",
                    "text": "You can pick up your order by using this code instead of a ticket.",
                    "color": "#aaaaaa",
                    "wrap": true,
                    "margin": "xxl",
                    "size": "xs"
                }
                ]
            }
            ]
        }
    }
}

これで、対話フローに必要なもののうち Flex Message に関わる部分が完了しました。
最後に全体のつなぎの部分を実装していきます。

var channelAccessToken = 'XXXXXXXXXXX';
var response = { statusCode: 200 };
const line = require('@line/bot-sdk');
const client = new line.Client({channelAccessToken: channelAccessToken});

exports.handler = async (event) => {
    console.log(JSON.stringify(event));
    let body = JSON.parse(event.body);
    if (body.events[0].message.text == 'メニューを教えて') {
        var message = {
            "type": "flex",
            "altText": "#",
            "contents": {
              "type": "bubble",
              "hero": {
                "type": "image",
                "url": "https://s3-ap-northeast-1.amazonaws.com/xxxxxxx/hamburger.jpg",
                "size": "full",
                "aspectRatio": "20:13",
                "aspectMode": "cover",
                "action": {
                  "type": "uri",
                  "uri": "https://classmethod.jp/"
                }
              },
              "body": {
                "type": "box",
                "layout": "vertical",
                "spacing": "md",
                "action": {
                  "type": "uri",
                  "uri": "https://classmethod.jp/"
                },
                "contents": [
                  {
                    "type": "text",
                    "text": "Hamburger",
                    "size": "xl",
                    "weight": "bold"
                  },
                  {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "box",
                        "layout": "baseline",
                        "contents": [
                          {
                            "type": "icon",
                            "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/restaurant_regular_32.png"
                          },
                          {
                            "type": "text",
                            "text": "$10.5",
                            "weight": "bold",
                            "margin": "sm",
                            "flex": 0
                          },
                          {
                            "type": "text",
                            "text": "400kcl",
                            "size": "sm",
                            "align": "end",
                            "color": "#aaaaaa"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "text",
                    "text": "Sauce, Onions, Pickles, Lettuce & Cheese",
                    "wrap": true,
                    "color": "#aaaaaa",
                    "size": "xxs"
                  }
                ]
              },
              "footer": {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "spacer",
                    "size": "xxl"
                  },
                  {
                    "type": "button",
                    "style": "primary",
                    "color": "#905c44",
                    "action": {
                      "type": "message",
                      "label": "Order",
                      "text": "CM01_001"
                    }
                  }
                ]
              }
            }
        }
      } else if (body.events[0].message.text == 'CM01_001') { // hamburger
        var message = {
          "type": "flex",
          "altText": "#",
          "contents": {
              "type": "bubble",
              "hero": {
                  "type": "image",
                  "url": "https://s3-ap-northeast-1.amazonaws.com/xxxxxxx/hamburger.jpg",
                  "size": "full",
                  "aspectRatio": "20:13",
                  "aspectMode": "cover",
                  "action": {
                      "type": "uri",
                      "label": "#",
                      "uri": "https://classmethod.jp/"
                  }
              },
              "body": {
                  "type": "box",
                  "layout": "vertical",
                  "spacing": "md",
                  "contents": [
                  {
                      "type": "text",
                      "text": "Hamburger",
                      "wrap": true,
                      "weight": "bold",
                      "gravity": "center",
                      "size": "xl"
                  },
                  {
                      "type": "box",
                      "layout": "vertical",
                      "margin": "xxl",
                      "contents": [
                      {
                          "type": "spacer",
                          "size": "lg"
                      },
                      {
                          "type": "image",
                          "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/linecorp_code_withborder.png",
                          "aspectMode": "cover",
                          "size": "xl"
                      },
                      {
                          "type": "text",
                          "text": "You can pick up your order by using this code instead of a ticket.",
                          "color": "#aaaaaa",
                          "wrap": true,
                          "margin": "xxl",
                          "size": "xs"
                      }
                      ]
                  }
                  ]
              }
          }
      };
    } else {
        var message = {
            'type': 'text',
            'text': 'こんにちは。\n\nメニューを知りたい場合は、「メニューを教えて」と送信してください。'
        };
    }
    await client.replyMessage(body.events[0].replyToken, message);
    return response;
};

テスト

実際に対話フロー通りにできているかテストしてみます。

まとめ

いかがでしたでしょうか。
より自由になったメッセージで企業とユーザーのコミュニケーションの幅が広がっていくでしょう。
今後 Flex Message オブジェクトの細かい部分を解説していきます。