2018年の7月末に発表されたLINE Messaging APIの新機能「クイックリプライ」について最近知りまして、気になったので簡単なモックを作ってみました。
クイックリプライのメリット
- 選択肢を最大13個まで表示できる(ボタンテンプレートでは4個までしか表示できなかった)
- カメラ・カメラロールの立ち上げ・位置情報送信をボタンに設定できる(メニューからユーザーに操作させる必要がない)
個人的にこの2つのメリットがかなり大きいと思っています。
試してみた
実際にモックを作ってみましたので、動作を確認してみたいと思います。
表示について
クイックリプライの表示は下記のようなものになります。モックではリッチメニューの左下のボタンを押下してクイックリプライを出現させるようにしています。選択肢エリアは横にスクロールできます。
メッセージ送信
ボタン押下でメッセージ送信ができます。チャットボット側でどんなメッセージが送られたかもハンドリングできます。下記では「Message Send」というボタンを押下してメッセージ送受信を試していますが、ポストバックアクションを受け取ることもできます。
日時送信
日時を送信させることができます。モックでは「Datetime Send」というボタンを押下して日付と時間ともに指定させていますが、日付だけ、時間だけを指定させるようにすることも可能です。予約管理用のチャットボットなどでは重宝しそうな機能ですね。
カメラ立ち上げ
クイックリプライでしか実現できない機能その1です。「Camera Start」というボタンを押下するとカメラが立ち上がり、撮影した画像をそのまま送信することができます。またカメラロールからも写真選択・画像送信させることも可能です。
※おそらく画像のアップロード上限に引っかかっており画像アップできませんでした・・・時間を置いて更新予定です。
位置情報送信
クイックリプライでしか実現できない機能その2です。「Location Send」というボタンを押下することで現在位置を送信させることができます。
ソースコード
クイックリプライのメッセージボディを作成する部分はほとんどJSONベタ打ちです。要素を可変にできるようにブラッシュアップしたいですね。またモック全体から要点部分だけ抜き出して書いているので、このままコピペで動くかはわかりません・・・(多分大丈夫・・・？)
<?php
class LineFunctions {
private function replyMessage($message, $channel_access_token) {
$header = array(
"Content-Type: application/json",
'Authorization: Bearer ' . $channel_access_token,
);
$context = stream_context_create(array(
"http" => array(
"method" => "POST",
"header" => implode("\r\n", $header),
"content" => json_encode($message),
"ignore_errors" => true,
),
));
$response = file_get_contents('https://api.line.me/v2/bot/message/reply', false, $context);
if (strpos($http_response_header[0], '200') === false) {
http_response_code(500);
}
return $response;
}
function replyMessageText($reply_token, $send_messages, $channel_access_token){
$reply_message = array(
'replyToken' => $reply_token,
'messages' => $send_messages
);
return $this->replyMessage($reply_message, $channel_access_token);
}
function createQuickReplyBodyProto(){
$send_messages = array(
'type' => 'text',
'text' => '選択してください。',
'quickReply' => array(
'items' => array(
array(
'type' => 'action',
'action' => array(
'type' => 'postback',
'label' => 'Data Send',
'data' => 'PostBackData',
'displayText' => 'ポストバックデータを送ります。',
)
),
array(
'type' => 'action',
'action' => array(
'type' => 'message',
'label' => 'Message Send',
'text' => 'テキストを送信します。',
)
),
array(
'type' => 'action',
'action' => array(
'type' => 'datetimepicker',
'label' => 'Datetime Send',
'data' => 'DateTimeData',
'mode' => 'datetime',
'initial' => '2018-12-19t00:00',
'max' => '2020-12-31t23:59',
'min' => '2015-01-01t00:00',
)
),
array(
'type' => 'action',
'action' => array(
'type' => 'camera',
'label' => 'Camera Start',
)
),
array(
'type' => 'action',
'action' => array(
'type' => 'cameraRoll',
'label' => 'CameraRoll Start',
)
),
array(
'type' => 'action',
'action' => array(
'type' => 'location',
'label' => 'Location Send',
)
),
)
)
);
return $send_messages;
}
}
$line = new LineFunctions();
//クイックリプライのメッセージボディ作成
$send_messages = $line->createQuickReplyBodyProto();
//メッセージ送信
$send_response = $line->replyMessageText('[reply_tokenを指定してください]', $send_messages, QUICKREPLY_CHANNEL_ACCESS_TOKEN);
まとめ
クイックリプライはチャットボットの体験がより直感的になる機能で、よりユーザーファーストになっている気がします。早く使いこなしてチャットボット開発に取り入れたいですね。