Perl Hackers Hub

第44回 LINE Messaging APIで作るchatbot―LINE::Bot::APIとngrokでお手軽に!(3)

この記事を読むのに必要な時間:およそ 4 分

Template messageでリッチな操作体験を提供

ボタンや画像の配置などが定義されたデザインテンプレートを利用して,そこに任意の情報を詰め込んで送信できるTemplate messageというメッセージタイプがあります。ユーザーは,botから送信されたメッセージ中のボタンをタップするだけでbotとの対話を行えるので,使い勝手の良いbotを提供するためには利用したいメッセージタイプです。公式SDKでは,LINE::Bot::API::Builder::TemplateMessageを用いることで簡単にTemplate messageを送信できます。

Buttonsタイプで画像とボタンを組み合わせたUIを作る

図2のButtonsタイプでは,画像,タイトル,テキストを1つずつと,複数のボタンを送信できます。図2では「Open Browser」「Remind me」と記された箇所がボタンになっています。リスト6はButtonsタイプのメッセージを構築するコードになっており,(1)alt_messageにはTemplate message非対応端末で表示されるテキストを設定します。(2)add_message_actionメソッドはユーザーがボタンを押したときにtextの内容を自動的にチャットメッセージとしてユーザーが発言するボタンを表示します。(3)add_uri_actionメソッドはurlで指定したURLをブラウザで開くボタンを表示します。なお,LINE::Bot::API::Builder::TemplateMessageで作成したオブジェクトは$bot->reply_messageなどで直接送信ができないので,必ず(4)のとおりにLINE::Bot::API::Builder::SendMessageを使って送信オブジェクトを構築する必要があります。

図2 Buttonsタイプ

図2 Buttonsタイプ

リスト6 Buttonsタイプのメッセージ構築

my $buttons = LINE::Bot::API::Builder::TemplateMessage
->new_buttons(
  alt_text => 'this is a buttons template',    ―(1)
  image_url => 'https://example.com/bot/image.jpg',
  title => 'buttons',
  text => 'description',
)->add_message_action(    ―(2)
  label => 'message',
  text => 'message',
)->add_uri_action(    ―(3)
  label => 'uri',
  uri => 'http://example.com/',
);

my $messages = LINE::Bot::API::Builder::SendMessage
  ->new()    ―(4)
  ->add_template($buttons->build);
$bot->reply_message($reply_token, $messages->build);
Carouselタイプを使って複数個のテンプレートを横に並べる

図3のCarouselタイプは,基本的にはButtonsタイプのUIUser Interfaceを横に複数個並べたテンプレートになっています。リスト7(1)new_carouselメソッドでCarouselのビルダオブジェクトを作成し,LINE::Bot::API::Builder::TemplateMessage::Columnで作成したCarouselタイプのオブジェクトを(2)add_columnメソッドで登録していきます。

図3 Carouselタイプ

図3 Carouselタイプ

リスト7 Carouselタイプのメッセージ構築

my $carousel = LINE::Bot::API::Builder::TemplateMessage
->new_carousel(    ―(1)
  alt_text => 'this is a carousel template',
);
for my $i (1..5) {
  my $col = LINE::Bot::API::Builder::TemplateMessage::Column
  ->new(
    image_url => 'https://example.com/bot/item.jpg',
    title => "carousel $i",
    text => "description $i",
  )->add_message_action(
    label => 'message',
    text => 'message',
  );
  $carousel->add_column($col->build);    ―(2)
}

著者プロフィール

大沢和宏(おおさわかずひろ)

開発3センター サービス開発3室。翻訳Botなど,初期のBotサービス関連の開発を担当,その後LINE Taiwanのサービスを経て,現在はLINE LIVEのサーバ開発を行っている。

URL:https://github.com/yappo/