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

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

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

参考ですが、挙動はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/0b340244-c92a-57dc-2422-591df8c51a84.png)

下の「メニュー」を開くとこんな感じの画面が開いて...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/cd9edd37-f4cb-a1dd-ea8a-367c9f3c532a.png)

メニューのどれかをタップすると、予め登録しておいたメッセージを自分の代わりにBotに送信してくれる仕組みです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/2ad102ad-bd08-7e52-a37e-cbf38c364117.png)

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

#つくりかた
今回は、Botは用意してあるものとします。

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


こんな感じでチャネルの一覧が出てきてくれるので、目当てのチャネルクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/c711162f-7514-4fad-ec32-e7518934b532.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/3d664712-cce6-a891-a8ba-75cc0bf0d2d7.png)



まずは設定前半。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/99455c7d-a6f6-35a0-c81a-8892de2cfbcb.png)


タイトルは適当で構いません。
表示期間も決められるようですが、今回はテストなので短めにしておきます。
メニューバーのテキストは、実際には以下の画像の「メニュー」と書いてあるところに表示されるものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/cd9edd37-f4cb-a1dd-ea8a-367c9f3c532a.png)

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

さて、次に設定後半です。
「コンテンツ設定」の「テンプレートを選択」を選ぶと、こんなメニューが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/06be2475-c2f5-8b7c-5c8a-348a7a00fec2.png)

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

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

というわけで、今回は「画像を作成」をクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/8cf54e17-0eca-e8ea-418e-50e762c65643.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/512f46ca-9082-7e58-b957-18bb0c3e5277.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/ba85259b-f9e1-9c5a-b52e-e967c5736617.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/9324ca9a-24be-f516-134a-89b88456c0d5.png)

「ほげほげ」をタップすれば「おはよう」のメッセージが送信されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/a53b68f7-f777-5211-fc20-23c51d1987b4.png)

「ふがふが」も大丈夫そうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495652/dbd583f6-ab4b-8cdc-fc7e-9113eb2bcdbe.png)

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

#まとめ
* LINEリッチメニューは<a>https://manager.line.biz/account</a>から作るべし！