LINEリッチメニューの切り替えを、既存のサービスを題材に試してみました。
目次
リッチメニュー切り替え：完成デモ
※ 全画面表示で再生ください。
リッチメニュー切り替え：設計
題材として、LINEスキマニを使わさせていただきます。LINEスキマニは、「数時間だけ」や「明日すぐに」働きたい人のためのLINE公式仕事探しサービスです。
まずは、既存のリッチメニューを確認します。
サービスの特徴、リッチメニューから、「探す」「働く」「お役立ち情報（はじめての方向け情報）」が必要と考えました。ですので、この３つの切り替えタブをもつリッチメニューを作成します。
リッチメニュー切り替え：設定方法
公式ドキュメントに沿って、Shellコマンドを実行して、Messaging APIを介して設定していきます。Pythonや他の言語でも設定できそうでしたが、Shellコマンドが手軽に感じました。
ここでは、Messaging APIの設定、画像は準備済みの前提で、コマンドを記載します。画像はCanvaを使うと無料で、リッチメニュー用のテンプレートもあって便利です！
1. リッチメニューAを設定する
リッチメニューAは「仕事を探すメニュー」です。
まず、リッチメニューを作成するコマンドです。{channel access token}は、公式アカウントのMessaging APIのアクセストークンです。
curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"size": {
"width": 2500,
"height": 1035
},
"selected": false,
"name": "richmenu-a",
"chatBarText": "メニュー",
"areas": [
{
"bounds": {
"x": 834,
"y": 0,
"width": 833,
"height": 307
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-b",
"data": "richmenu-changed-to-b"
}
},
{
"bounds": {
"x": 1667,
"y": 0,
"width": 834,
"height": 307
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-c",
"data": "richmenu-changed-to-c"
}
},
{
"bounds": {
"x": 0,
"y": 308,
"width": 833,
"height": 728
},
"action": {
"type": "uri",
"uri": "https://sukimani.line.me/jobs"
}
},
{
"bounds": {
"x": 834,
"y": 308,
"width": 833,
"height": 728
},
"action": {
"type": "uri",
"uri": "https://sukimani.line.me/list?prefectureIds=8,9,10,11,12,13,14&occupationIds=42,43,44,45"
}
},
{
"bounds": {
"x": 1667,
"y": 307,
"width": 834,
"height": 728
},
"action": {
"type": "uri",
"uri": "https://sukimani.line.me/list?prefectureIds=8,9,10,11,12,13,14&isExperienceNotNeeded=true"
}
}
]
}'次に、画像を設定します。richmenu-d78e084e35513afd4799b763be5237aeは上記実行したときの、レスポンスのリッチメニューAのIDです。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-d78e084e35513afd4799b763be5237ae/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-a.png2. リッチメニューBを設定する
リッチメニューBは「店舗で働いて給料を受けとるまでのメニュー」です。余談ですが、ジョルダン乗換案内は、LINEミニアプリにあり、LINE上で使えて、友達シェアも簡単で便利です！
まず、リッチメニューを作成するコマンドです。
curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"size": {
"width": 2500,
"height": 1035
},
"selected": false,
"name": "richmenu-b",
"chatBarText": "メニュー",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 833,
"height": 307
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-a",
"data": "richmenu-changed-to-a"
}
},
{
"bounds": {
"x": 1667,
"y": 0,
"width": 834,
"height": 307
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-c",
"data": "richmenu-changed-to-c"
}
},
{
"bounds": {
"x": 0,
"y": 308,
"width": 833,
"height": 728
},
"action": {
"type": "uri",
"uri": "https://sukimani.line.me/user/scheduledJob"
}
},
{
"bounds": {
"x": 834,
"y": 308,
"width": 833,
"height": 728
},
"action": {
"type": "uri",
"uri": "https://sukimani.line.me/mypage"
}
},
{
"bounds": {
"x": 1667,
"y": 307,
"width": 834,
"height": 728
},
"action": {
"type": "uri",
"uri": "https://liff.line.me/1604465878-aONjlYPe"
}
}
]
}'次に、画像を設定します。richmenu-1b69c91384f3271d67733d3b0d230bc9は上記実行したときの、レスポンスのリッチメニューBのIDです。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-1b69c91384f3271d67733d3b0d230bc9/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-b.png3. リッチメニューCを設定する
リッチメニューCは「はじめての方向けやお役立ち情報を伝えるメニュー」です。
まず、リッチメニューを作成するコマンドです。
curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"size": {
"width": 2500,
"height": 1686
},
"selected": false,
"name": "richmenu-c",
"chatBarText": "メニュー",
"areas": [
{
"bounds": {
"x": 0,
"y": 674,
"width": 833,
"height": 292
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-a",
"data": "richmenu-changed-to-a"
}
},
{
"bounds": {
"x": 834,
"y": 674,
"width": 833,
"height": 292
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-b",
"data": "richmenu-changed-to-b"
}
},
{
"bounds": {
"x": 0,
"y": 966,
"width": 833,
"height": 721
},
"action": {
"type": "message",
"text": "使い方"
}
},
{
"bounds": {
"x": 834,
"y": 966,
"width": 833,
"height": 721
},
"action": {
"type": "message",
"text": "働き方ガイド"
}
},
{
"bounds": {
"x": 1667,
"y": 966,
"width": 834,
"height": 721
},
"action": {
"type": "uri",
"uri": "https://line-sukimani.zendesk.com/hc/ja/sections/360000454696-%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F"
}
}
]
}'次に、画像を設定します。richmenu-24bfbab54fdc7f4bc96e8738efe381f1は上記実行したときの、レスポンスのリッチメニューCのIDです。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-24bfbab54fdc7f4bc96e8738efe381f1/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-c.png4. デフォルトリッチメニューを設定する
デフォルトに表示されるリッチメニューを、はじめての方へのリッチメニューCを設定します。
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-24bfbab54fdc7f4bc96e8738efe381f1 \
-H 'Authorization: Bearer {channel access token}'5. リッチメニューエイリアスを設定する
リッチメニューエイリアスA（richmenu-alias-a）を設定します。
curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"richMenuAliasId": "richmenu-alias-a",
"richMenuId": "richmenu-d78e084e35513afd4799b763be5237ae"
}'リッチメニューエイリアスB（richmenu-alias-b）を設定します。
curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"richMenuAliasId": "richmenu-alias-b",
"richMenuId": "richmenu-1b69c91384f3271d67733d3b0d230bc9"
}'リッチメニューエイリアスC（richmenu-alias-c）を設定します。
curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"richMenuAliasId": "richmenu-alias-c",
"richMenuId": "richmenu-24bfbab54fdc7f4bc96e8738efe381f1"
}'以上で、設定は完了です。LINEから設定できているか確認しましょう。
リッチメニュー修正方法
リッチメニューを修正する場合は、新規作成し、エイリアスを更新します。「よくある質問」をURLリンクではなく、テキストアクションに変更するとします。
まず、リッチメニューを作成するコマンドです。
curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"size": {
"width": 2500,
"height": 1686
},
"selected": false,
"name": "richmenu-c",
"chatBarText": "メニュー",
"areas": [
{
"bounds": {
"x": 0,
"y": 674,
"width": 833,
"height": 292
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-a",
"data": "richmenu-changed-to-a"
}
},
{
"bounds": {
"x": 834,
"y": 674,
"width": 833,
"height": 292
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-b",
"data": "richmenu-changed-to-b"
}
},
{
"bounds": {
"x": 0,
"y": 966,
"width": 833,
"height": 721
},
"action": {
"type": "message",
"text": "使い方"
}
},
{
"bounds": {
"x": 834,
"y": 966,
"width": 833,
"height": 721
},
"action": {
"type": "message",
"text": "働き方ガイド"
}
},
{
"bounds": {
"x": 1667,
"y": 966,
"width": 834,
"height": 721
},
"action": {
"type": "message",
"text": "よくある質問"
}
}
]
}'次に、画像を設定します。richmenu-b616aa3e3cb6da7415a5120f281d6959は上記実行したときの、レスポンスのリッチメニューCのIDです。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-b616aa3e3cb6da7415a5120f281d6959/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-c.pngリッチメニューCのエイリアスrichmenu-alias-cを上記で作成したリッチメニューIDrichmenu-b616aa3e3cb6da7415a5120f281d6959に紐付けます。
curl -v -X POST https://api.line.me/v2/bot/richmenu/alias/richmenu-alias-c \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
"richMenuId": "richmenu-b616aa3e3cb6da7415a5120f281d6959"
}'まとめ
- 切り替える分のリッチメニューを作成する
- リッチメニューの構成要素は、領域、アクション、画像
- エリアスで、切り替えを設定
公式ドキュメント通りコマンドを実行して、簡単にリッチメニューの切り替えを試すことができました。画像を作成して、コマンドのリッチメニューの領域設定するところが、一番時間がかかりました。
