LANG SELRCT

コードを書く場所についてはこちら

2017年10月28日土曜日

LINE BOTで「リッチメニュー」を表示してみる

Google Apps ScriptでLINE BOTを作る過程で、いろいろと管理画面を触っていた時に
「リッチメニュー」を表示する方法を知ったので、今回はその方法について書こうと思います


上の画面のようにトーク画面にメニューを表示することができます
これを「リッチメニュー」というようです


LINE BOTをつくる方法はこちらの記事にまとめました

記事の中の「Auto-reply messages」を使えるように「enabled」にしておきます




「リッチメニュー」を使うために
まずはこちらの管理画面にアクセスします
https://admin-official.line.me/

アカウント一覧の中から、設定を変更したいタイトルを選択します


リッチコンテンツ作成をクリックします



新規作成をクリックします



設定はデフォルトのままで「デザインガイド」をクリックします



デザインガイドを見ると
全体は2500px ✕ 1686pxで
ひとつのエリアは833px ✕ 843pxのようです
(CとFは834px ✕ 843px)




というわけでガイドのサイズ通りの画像を作ってみます


実際に作った画像はこちら↓



アップロードをクリックして
作った画像を選択します

アップロードした画像の6つのエリアに
それぞれ応答メッセージを設定します

まずは左上の「入力」エリアにキーワードを設定してみます
(キーワードを設定する方法はこちら

「キーワード選択」をクリックします




設定するキーワードの「選択」ボタンをクリックします



設定されるとこうなります


次に上段の中央のエリアにURLを設定してみます
以下の例ではGoogle検索のURLを設定しています




次に右上のエリアにテキストを設定してみます
タップしたら こんにちは と返します




同じように下の3つのエリアも任意で設定をします


保存する前に以下の設定をします

表示設定:反映する
表示期間:任意の期間を設定
タイトル:任意タイトルを設定
メニュー初期表示:表示する



設定が終わったら保存します


保存後、トーク画面を開くと設定した画像が表示されます


それぞれのエリアを押すと設定した反応が返ってきます


FYI すでにこういう記事がありました↓
https://developers.line.me/ja/docs/messaging-api/using-rich-menus/
http://manual-at.line.me/archives/1020056348.html