CodeZine(コードジン)

特集ページ一覧

LINE Bot SDKが持つ主要機能の実装方法

日本一わかりやすいLINE Bot開発講座 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/01/10 14:00
目次

テンプレートメッセージの送信

 次に、テンプレートメッセージを送信してみましょう。テンプレートには3種類あり、これまでのようなコンテンツを送信するだけでなく、ユーザーが押すことができるボタンを付与し、押された時のアクションを定義することができます。

テンプレートの例
テンプレートの例

Buttonsテンプレートの送信

 Buttonsテンプレートは、画像、タイトル、テキスト、アクションの配列で構成されています。このうち画像とタイトルは省略可能です。省略した時は引数にnullを指定します。

 index.phpの最後?>より前に以下のコードを追記してください。

function replyButtonsTemplate($bot, $replyToken, $alternativeText, $imageUrl, $title, $text, ...$actions) {
  $actionArray = array();
  foreach($actions as $value) {
    array_push($actionArray, $value);
  }
  $builder = new \LINE\LINEBot\MessageBuilder\TemplateMessageBuilder(
    $alternativeText,
    new \LINE\LINEBot\MessageBuilder\TemplateBuilder\ButtonTemplateBuilder ($title, $text, $imageUrl, $actionArray)
  );
  $response = $bot->replyMessage($replyToken, $builder);
  if (!$response->isSucceeded()) {
    error_log('Failed!'. $response->getHTTPStatus . ' ' . $response->getRawBody());
  }
}

 ?>

 引数alternativeTextは、トーク一覧に表示されるテキストです。LINEアプリのバージョンが古くテンプレートメッセージの受信が不可な場合はユーザーにはこのテキストしか見えません。

 バージョンが6.7未満の場合はテンプレートメッセージが表示できないので、ユーザーに友だち追加時のメッセージなどでアップデートを促しましょう。

replyMultiMessage($bot, $event->getReplyToken(),
    new \LINE\LINEBot\MessageBuilder\TextMessageBuilder("TextMessage"),
    new \LINE\LINEBot\MessageBuilder\ImageMessageBuilder("https://" . $_SERVER["HTTP_HOST"] . "/imgs/original.jpg", "https://" . $_SERVER["HTTP_HOST"] . "/imgs/preview.jpg"),
    new \LINE\LINEBot\MessageBuilder\LocationMessageBuilder("LINE", "東京都渋谷区渋谷2-21-1 ヒカリエ27階", 35.659025, 139.703473),
    new \LINE\LINEBot\MessageBuilder\StickerMessageBuilder(1, 1)
  );

replyButtonsTemplate($bot,
    $event->getReplyToken(),
    "お天気お知らせ - 今日は天気予報は晴れです",
    "https://" . $_SERVER["HTTP_HOST"] . "/imgs/template.jpg",
    "お天気お知らせ",
    "今日は天気予報は晴れです",
    new LINE\LINEBot\TemplateActionBuilder\MessageTemplateActionBuilder (
      "明日の天気", "tomorrow"),
    new LINE\LINEBot\TemplateActionBuilder\PostbackTemplateActionBuilder (
      "週末の天気", "weekend"),
    new LINE\LINEBot\TemplateActionBuilder\UriTemplateActionBuilder (
      "Webで見る", "http://google.jp")
    );

function replyTextMessage($bot, $replyToken, $text) {

 また、テンプレート用の画像を新たに追加する必要があるので、記事に添付されているサンプルファイル内に含まれるtemplate.jpgをimgsフォルダにコピーします。

 画像は縦横比1:1.51である必要があります。今回は縦500px、横755pxで作成してあります。

画像をimgsフォルダにコピー
画像をimgsフォルダにコピー

 いったんデプロイして確認してみましょう。適当に呼びかけると、BotからButtonsテンプレートが送られます。ボタンをタップするとアクションが発動されます。

Buttonsテンプレート
Buttonsテンプレート

 3つのボタンがあり、それぞれ違うタイプのテンプレートアクションを設定しています。テンプレートアクションはそれぞれラベルとテキストを引数にインスタンス化しますが、それぞれ動作が異なり、

  • MessageTemplateActionBuilder:ユーザーに発言させるアクション(表示あり)
  • PostbackTemplateActionBuilder:ユーザーからBotに文字列を送信するアクション(表示なし)
  • UriTemplateActionBuilder:URLを開かせるアクション

となっています。

 MessageTemplateActionBuilderがキーボードでテキストを入力し送信したのと同じ動作を発動させるのに対して、PostbackTemplateActionBuilderは違う形でひも付けられたテキストをユーザーからBotに送信します。

 以下のようにコードを変更してみましょう。

foreach ($events as $event) {

  if ($event instanceof \LINE\LINEBot\Event\PostbackEvent) {
    replyTextMessage($bot, $event->getReplyToken(), "Postback受信「" . $event->getPostbackData() . "」");
    continue;
  }

  if (!($event instanceof \LINE\LINEBot\Event\MessageEvent)) {
    error_log('Non message event has come');
    continue;
  }

 これまではMessageEventのみ処理を行っていましたが、その前にPostbackEventかどうかをチェックし、そうならひも付けられたテキストを取得し送り返す処理となります。

 これでデプロイすると、「週末の天気」をタップされた時に発動するPostbackEventを検知し、ひも付けられたテキストを取得することができます。

Postbackイベントと内容の取得
Postbackイベントと内容の取得

 こちらはMessageTemplateActionと違い、トークには現れません。状況に応じて使い分けましょう。

 なお、Buttonsテンプレートに追加できるボタンは4つまでとなっています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:日本一わかりやすいLINE Bot開発講座

著者プロフィール

  • 立花 翔(タチバナ ショウ)

     LINE株式会社テクニカルエバンジェリスト   個人アプリケーションデベロッパーとして世界中で1000万近くのユーザーと接点を持った経験を元に、デベロッパーのLINEのAPIを利用したビジネスの成功をお手伝いさせて頂いております。 各種APIを始めとするプラットフォームとしてのLINEを啓蒙し、...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5