LINE Messaging APIでクイックリプライを実装してみました。

f:id:zeals-engineer:20190102171537j:plain

こんにちは！！！

ZEALS CTO島田です。

2018年7月30日、LINE Messaging APIにクイックリプライが追加されました。

LINEのMessaging API公開から2年数ヶ月、、遂にきました。

BOTらしいUXなので好きなんですよねーー、、嬉しいです！

早速、実装してみました。

クイックリプライの背景色がグレーなのが少し見にくいかもしれませんね。

に対応しているそうです。

Messengerのクイックリプライでは実現できていないカメラアクション、カメラロールアクションが実装されているのが印象的でした。

尚、Messengerのクイックリプライではユーザーがfacebookへ登録しているメールアドレス、電話番号を取得することができます。

JSONのちがい

LINEのJSONはこんな感じです。(サンプルソース引用)


　{
  "type": "text", // ①
  "text": "Select your favorite food category or send me your location!",
  "quickReply": { // ②
    "items": [
      {
        "type": "action", // ③
        "imageUrl": "https://example.com/sushi.png",
        "action": {
          "type": "message",
          "label": "Sushi",
          "text": "Sushi"
        }
      },
      {
        "type": "action",
        "imageUrl": "https://example.com/tempura.png",
        "action": {
          "type": "message",
          "label": "Tempura",
          "text": "Tempura"
        }
      },
      {
        "type": "action", // ④
        "action": {
          "type": "location",
          "label": "Send location"
        }
      }
    ]
  }
}

Messenger APIでのquick replyのJSONは


{
  "recipient":{
    "id":""
  },
  "message":{
    "text": "Here is a quick reply!",
    "quick_replies":[
      {
        "content_type":"text",
        "title":"Search",
        "payload":"",
        "image_url":"http://example.com/img/red.png"
      },
      {
        "content_type":"location"
      }
    ]
  }
}

ネストは違いますが要素には大差ないですね。

UXは格段に向上するかと思われますので弊社でも積極的に導入していきたいと思います！