LINEのrich messagesについて - 【コードを書かずに10分でBOT開発】hachidoriの公式ブログ

こんにちは、hachidoriです。

f:id:hachidoribot:20160627205112j:plain

LINEとFacebookからBOTのプラットフォームが公開されて以降、Facebookが数回にわたりアップデートを公表したため、ついついFacebookの投稿が多くなりがちですが、今回はLINEについての記事を書こうと思います。

BOTに搭載される人口知能が自然言語処理を完全にこなし、ユーザの意図を100%汲み取ってくれるようになるまでは時間がかかりそうなので、補完する仕組みとしてボタンなど、一定の回答フォーマットを用意することは有効な手段だと思います。

LINE・Facebookではそれぞれボタンを用意するフォーマットがあります。

Facebook

Qiitaや個人ブログなどで何度も紹介されているため、今更感はありますがFacebookはボタンテンプレートとカードテンプレートを用意しています。

ボタンの数が制限されているなど小さな制約はありますが逆に、フォーマットが用意されているため開発は非常に単純です。

配置するボタン一つ一つにラベルと、タップされた時の挙動を記述するだけです。(参考:Messenger Platform - Documentation - Facebook for Developers)

・ボタンテンプレート

f:id:hachidoribot:20160630170442g:plain

"message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"button",
        "text":"What do you want to do next?",
        "buttons":[
          {
            "type":"web_url",
            "url":"https://petersapparel.parseapp.com",
            "title":"Show Website"
          },
          {
            "type":"postback",
            "title":"Start Chatting",
            "payload":"USER_DEFINED_PAYLOAD"
          }
        ]
      }
    }
  }

(引用:Messenger Platform - Documentation - Facebook for Developers)

・ジェネリックテンプレート

f:id:hachidoribot:20160630172127g:plain

"message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"generic",
        "elements":[
          {
            "title":"Welcome to Peter\'s Hats",
            "item_url":"https://petersfancybrownhats.com",
            "image_url":"https://petersfancybrownhats.com/company_image.png",
            "subtitle":"We\'ve got the right hat for everyone.",
            "buttons":[
              {
                "type":"web_url",
                "url":"https://petersfancybrownhats.com",
                "title":"View Website"
              },
              {
                "type":"postback",
                "title":"Start Chatting",
                "payload":"DEVELOPER_DEFINED_PAYLOAD"
              }              
            ]
          }
        ]
      }
    }
  }

(引用:Messenger Platform - Documentation - Facebook for Developers)

LINE

対してLINEですが、こちらはrich messagesを用意していますね。

rich messagesは任意の画像の任意の座標に対してタップしたときの挙動を定義するものです。

ですのでFacebookのようにgif画像でお見せすることはできないのですが・・・。

Facebookテンプレートとの違いはフリーフォーマットなため、どんなUIでも作成が可能です。1つの画像に20個のボタンを配置しちゃうとかもできますw

使いようによっては大変便利なものになる反面、フリーフォマットゆえの欠点もあります。

それは「作るのが面倒くさい」です。

実際のrich messagesのソースサンプルは以下の通りです。(参考:LINE developers)

{
  "canvas": {
    "width": 1040,
    "height": 1040,
    "initialScene": "scene1"
  },
  "images": {
    "image1": {
      "x": 0,
      "y": 0,
      "w": 1040,
      "h": 1040
    }
  },
  "actions": {
    "openHomepage": {
      "type": "web",
      "text": "Open our homepage.",
      "params": {
        "linkUri": "http://your.server.name/"
      }
    },
    "sayHello": {
      "type": "sendMessage",
      "text": "Say hello.",
      "params": {
        "text": "Hello, Brown!"
      }
    }
  },
  "scenes": {
    "scene1": {
      "draws": [
        {
          "image": "image1",
          "x": 0,
          "y": 0,
          "w": 1040,
          "h": 1040
        }
      ],
      "listeners": [
        {
          "type": "touch",
          "params": [0, 0, 1040, 350],
          "action": "openHomepage"
        },
        {
          "type": "touch",
          "params": [0, 350, 1040, 350],
          "action": "sayHello"
        }
      ]
    }
  }
}