LoginSignup
31
27

More than 3 years have passed since last update.

LINE Botでリッチメニューを表示する

Last updated at Posted at 2019-12-02

目的

自称LINE Bot芸人としてのノウハウまとめその①として。

リッチメニューとは

LINEでは公式API等を利用して、簡単にチャットボットを構築することができるようになっています。
今回は、チャットボットとのインタフェースとして有用なリッチメニューとその作り方を紹介します。

参考ですが、挙動はこんな感じです。
image.png

下の「メニュー」を開くとこんな感じの画面が開いて...
image.png

メニューのどれかをタップすると、予め登録しておいたメッセージを自分の代わりにBotに送信してくれる仕組みです。
image.png

本来はユーザが手動でメッセージを打たなければいけないところですが、
この部分の操作が定型化・簡略化されるところが利点です。

つくりかた

今回は、Botは用意してあるものとします。

LINE Official Account Managerにログイン

https://manager.line.biz/accountにアクセスし、自分のLINEアカウントを使ってログインします。

こんな感じでチャネルの一覧が出てきてくれるので、目当てのチャネルクリックします。
image.png

リッチメニューのデザインを決める

左側のサイドバーから、リッチメニューを選び、右側の緑色の「作成」ボタンをクリックします。

image.png

まずは設定前半。
image.png

タイトルは適当で構いません。
表示期間も決められるようですが、今回はテストなので短めにしておきます。
メニューバーのテキストは、実際には以下の画像の「メニュー」と書いてあるところに表示されるものです。
image.png

「デフォルト表示」は、このBotと会話を開始するタイミングで自動的にリッチメニューが表示されるかどうか、です。

さて、次に設定後半です。
「コンテンツ設定」の「テンプレートを選択」を選ぶと、こんなメニューが立ち上がります。
image.png

この後、メニューにはめ込む画像をアップロードするのですが
実はメニューにはサイズ制限があります。
今回はとりあえず適当なものを選んでおきます。

選んだら、本来であればメニュー用のデザインとして画像をアップロードします。
そうなんです。ここがクセモノで、画像なので実際にはボタンなんかではありません。
でも大丈夫です。
「画像をアップロード」ではなく、「画像を作成」をクリックすることでシミュレートしながら作ることができるんです!

というわけで、今回は「画像を作成」をクリックしてみます。
image.png

左側のエミュレータのような画面の、該当する部分をクリックした状態であれば
その部分に関する画面が作れます。

image.png

適用ボタンをクリックすればデザインは完成です。

各メニューが押されたときの挙動を決める

実はこの挙動を決める所、色々なことができるようになっていますが、今回は「テキスト」を選択したいと思います。

image.png

こんな感じで、A(ほげほげ)とB(ふがふが)それぞれに対する挙動を決めます。

最後に保存をクリックすれば完了です。

動作確認

早速Botとのチャット画面を開いてみると、ちゃんと更新されています。

image.png

「ほげほげ」をタップすれば「おはよう」のメッセージが送信されます。
image.png

「ふがふが」も大丈夫そうです。
image.png

何に使う?

このようにリッチメニューを用意してあげることで、ユーザの操作を誘導することができます。
特に、使い方がわかりにくいBotに対してはメニューを用意してあげると良いでしょう。
フレンド登録時のメッセージで使い方を教えてあげる方法もありますけど、
チャットログは流れちゃいますからね。いちいち上まで戻って使い方を確認するのは面倒です。
その点、メニューはかなり便利でしょう。

まとめ

31
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
27