第15話 リッチメニューの導入
こんにちは！Kenです。
今回は、リッチメニューを導入していきたいと思います。
リッチメニューとは何か
今まで書いてきた処理は、「予約する」とか「予約確認」とか「予約キャンセル」とか、お客様のメッセージが起点となって始まりました。お客様は毎回文字を入力しなければならないので、面倒ですよね。
そこで、便利なのがリッチメニューです。
例えば、「予約する」というボタンをタップすると、「予約する」というメッセージがワンタッチで送ることができるようになります。
リッチメニューで使う画像を作る
画像サイズですが、LINE公式によると次のように書かれています。
推奨サイズは、1200x810らしいので、このサイズで作ることにします。
そしてこの領域を４分割し、一個あたりのボタンサイズは600x405とします。
では早速画像を作っていきましょう。
私のオススメはcanvaというサイトです。
■デザインを作成
■カスタムサイズ
■1200 x 810 px
■新しいデザインを作成
で真っ白なキャンバスが立ち上がると思います。
「素材」のところからデザインを選んで、「テキスト」で文字を書いたり出来ます。素材は有料のものも多いですが、無料のものもあるので私は無料で仕上げました。それがこのようなイラストです。
えーっと、デザインセンスに関しては、突っ込まないでください。（自覚してます笑）。
では右上の↓ダウンロードボタンから、ダウンロードしましょう。
形式はPNG、保存場所はどこでも構いません。
ポイントカード機能
ポイントカードボタンがありますが、これは何？と思われたかと思います。ボタン枠が１枠余ったので、LINE公式の機能を試しに使ってみます笑
簡単に言えば、来店のたびにもらえるポイントカードをLINEの中でやり取りできるという機能です。来店のたびに、ポイント追加のQRコードを読み込んでもらうと、ポイントが追加されます。
正確にはショップカードの名称で呼ばれてますので、以下を参照してください。
まずは公式アカウント管理画面へ移動します。
予約アプリの公式アカウントを選択します。
このような管理画面に入れますので、左のメニューの中からショップカードを選択します。
カード設定が出来ますので、好きなように設定してみてください。
私は例えば、２０ポイント貯めたらカット無料、初回来店でヘッドスパプレゼントみたいなショップカードを作りました。
下の方にショップカード作成するというボタンがありますので、それをクリックするとショップカードが確定します。
このような画面となり、ポイントカードボタンを押した際に、カード取得用URLへ飛ぶように設定します。なので、このURLはあとでコピペできるようにしておいてください。
また実際は、QRコードを印刷してもらって、お会計の際にお客様に読み込んでもらうという運用でしょう。
Postmanのダウンロード＆インストール
リッチメニューは先ほどのポイントカードの説明をしたアカウント管理画面から作成することがWEB上でできます。
しかし、定型的なことしかできないので、今回はLINEのAPIを使ったリッチメニューの作り方を学習したいと思います。
APIを使ったリッチメニュー作成はプログラムをコーディングするのではなく、LINEのサーバーに指定したLINE公式アカウントのリッチメニューの設定値を送ってあげるイメージです。
まぁ深い意味は考えずにAPIを叩くツールとして便利なPostmanをダウンロードしましょう。
以下のページを参考にインストールを完了させてください。
リッチメニューの作成
では、いよいよpostmanを使ってリッチメニューを作成していきましょう。
まずLINE DevelopersのMessaging API設定のところで、チャンネルアクセストークンをコピーします。
次にPostmanの設定です。
１の箇所は、POSTを選択し、URL入力欄に次のアドレスを入力します。
https://api.line.me/v2/bot/richmenu
２の箇所は、KEYのところはAuthorization、そのVALUEに
Bearer チャンネルアクセストークン
を入力します。チャンネルアクセストークンはコピーしたものをペースとしてください。Bearerとチャンネルアクセストークンの間は半角スペースです。
３の箇所は、KEYはContent-Type、VALUEはapplication/jsonを入力します。
次にタブをBodyに変えてます。
Bodyの中身にJSONを記述します。記述内容は以下です。
{
"size":{
"width":1200,
"height":810
},
"selected":true,
"name":"操作メニュー Open/Close",
"chatBarText":"↓ Open/Close ↓",
"areas":[
{
"bounds":{
"x":0,
"y":0,
"width":600,
"height":405
},
"action":{
"type":"message",
"text":"予約する"
}
},
{
"bounds":{
"x":600,
"y":0,
"width":６00,
"height":405
},
"action":{
"type":"message",
"text":"予約確認"
}
},
{
"bounds":{
"x":0,
"y":405,
"width":600,
"height":４０５
},
"action":{
"type":"message",
"text":"予約キャンセル"
}
},
{
"bounds":{
"x":600,
"y":405,
"width":600,
"height":405
},
"action":{
"type":"uri",
"uri":"https://line.me/R/ch/xxxxxxxxxxxxxx/297xxxxxx?us=LINE&um=Owner&uca=Share"
}
}
]
}"selected":trueを指定すると、初めからリッチメニューが開いた状態になります。
タップする領域の指定をx,y,width,heightでしてあげてます。x,yは領域の開始位置の座標を示します。座標は左上を(0,0)としています。予約するボタンの左上の座標は(0,0)であることがわかります。また、widthとheightはボタンの幅と高さとなります。
次のように覚えましょう。
■x, y → ボタン領域の左上の座標
■最も左上の座標を(0,0)とする
■width,height → ボタンの幅と高さ
actionはボタンをタップされた時の動作を示します。"message"は「予約する」などのメッセージを送るactionです。
"uri"は指定のURLへ飛ぶことを意味します。先ほどのショップカードのURLをこちらにコピペしましょう。
この記述が出来ましたら、右上のSendボタンをクリックしましょう。
POSTに成功すると、richMenuIDが返って来ることかと思います。そのIDを使って次のPOSTを行います。
POSTのURLのところは次のようなアドレスにします。
https://api-data.line.me/v2/bot/richmenu/richMenuId/contentrichMenuIDのところは先ほど返ってきたrichMenuIDを埋め込みます。
Authorizationは先ほどと変わりません。Bearer チャンネルアクセストークンです。
Content-Typeはimage/pngとしてください。
そしてBodyタブに切り替えます。
select fileのところで、canvaで作成したPNGファイルを選択します。
そしてSendをクリックして、下のように{ }が返って来れば成功です。
最後に、以下をPOSTします。
POSTのURLを以下のようにします。
https://api.line.me/v2/bot/user/all/richmenu/richMenuIdまた今回はAuthorizationのところの入力だけでOKです。
Sendしてみましょう。{ }が返って来れば成功です。
では、LINE公式アカウントのトークルームへ再入室してみましょう。
リッチメニューができるとそれらしいアプリに見えますよね。
では今回はこの辺で。
少しでも参考になりましたら「スキ」をいただけるとありがたいです。
最後までお読みいただき、ありがとうございました。
MENTA でLINEBOT開発サポートをしております。お気軽にご相談ください。
この記事が気に入ったらサポートをしてみませんか？