読者です 読者をやめる 読者になる 読者になる

Rubellum fly light

ほぼPHP日記

LINE BOTでリッチメニューと新メッセージタイプのカルーセルタイプを使ってみる

LINE DEVELOPER DAYで知った「リッチメニュー」と新しいメッセージタイプ「カルーセル」を試したかったので、LINE BOTを作成してみた。

いわゆるチャットBOTで最初に作るものといえば、出退勤BOTか近隣レストラン検索かと思うので、今回は近隣レストラン検索を行うことにしました。

(BOT自体は未公開です)

利用例

f:id:rubellum:20161107121034p:plain

図1:池袋でラーメンを探すの巻

 

最初に位置情報を送ってもらい、次に検索キーワード(例:ラーメン)と送ると、ぐるなびの検索結果が返ってきます(お店の精度は……泣)

「ラーメン」とメッセージを送ったあとの、「画像+タイトル+説明」の部分がカルーセルタイプです。

 

カルーセルタイプ以外にも、Yes or Noの「Confirm Type」や「Button Type」があります。

LINE、chatbotの開発・普及に向けて新たな展開を発表 | LINE Business Center

 

カルーセルタイプはスワイプで横に移動でき、今回は3件分の結果を横並びで見ることができます。

 

リッチメニュー

最下部の「検索メニュー」というところが「リッチメニュー」と呼ばれるもので、ここをタップするとシュッとメニューが表示されます。メニュー名は管理画面から設定できます。

 

f:id:rubellum:20161107120021p:plain

図2:アイコン(イラスト)のせいでリッチに見えないリッチメニュー

 

ラーメン検索、とんかつ検索となっているところがボタンになっており、このボタンを押すと「ラーメン」や「とんかつ」といった特定のメッセージを送信することができます。

そのため、ユーザーにいちいちメッセージを入力してもらわなくても、ボタンひとつで定型のメッセージを送ってもらうことができます。

 

↓のようにきちんとグリッドで表示するとリッチになります。

image.itmedia.co.jp

 

リッチメニュー自体は、LINE@の管理画面から設定することができます(左メニューのリッチコンテンツ作成)。

今回のケースでは、左半分・右半分で2つのボタンが設定されていますが、さまざまな形式で表示方法を設定することができます。

下記は画像を分割するタイプの種類です。他にも「アイコン+テキスト」による表示形式も選択できます。

 

f:id:rubellum:20161107145806p:plain

 

リッチメニューはUIの第一印象がとてもよかったので、LINEやチャットBOTという用途に限らず、アプリに組み込んで何かするサードパーティ向けのUIとして広く使えるのではないかと思いました。

(その検証のため、わざわざこのBOTを作ったのでした)

開発環境メモ

サーバー:Vultr ( ← なぜか東京リージョンを持っている海外のVPS )

OS:Ubuntu 14.04

言語:PHP 7(Slim Framework 3)

レストラン検索API:ぐるなび http://api.gnavi.co.jp/api/

 ソース:https://github.com/rubellum/hirudoki ごちゃごちゃしてます。

 

LAMP環境です。

SSLが必要なので、新たにドメインを取りつつ、Let's Encryptで証明書を取得。

今回初めてLet's Encryptを使用してみましたが、certbotの使い方がいまいちわからず、正直なところBOT作成よりも手こずりました。

certbotのコマンド実行時、Apacheを立ち上げていたよくなかったらしく、停止して上記の手順を踏んだらうまく行きました。

certbotが証明書生成のための確認用サーバーとやりとりするときにapacheとポートが被って自身のhttpサーバーを立ち上げられないとかそんなところじゃないかと予想してますが、正直なところ原因不明です。

参考)

How To Secure Apache with Let's Encrypt on Ubuntu 14.04 | DigitalOcean

最後に

LINE BOTを作成してみました。

世間はチャットBOTが流行る流行ると言っていますが、意外にみんなアイデアが思いつかなくて悩ましい感じがしてますね。

LINE DEVELOPER DAYでもらったBeaconも試さないとナ…。