LINEリッチメニュー切り替えを試してみた

LINEリッチメニューの切り替えを、既存のサービスを題材に試してみました。

LINE Developersより引用

リッチメニュー切り替え:完成デモ

※ 全画面表示で再生ください。

リッチメニュー切り替え:設計

題材として、LINEスキマニを使わさせていただきます。LINEスキマニは、「数時間だけ」や「明日すぐに」働きたい人のためのLINE公式仕事探しサービスです。

まずは、既存のリッチメニューを確認します。

サービスの特徴、リッチメニューから、「探す」「働く」「お役立ち情報(はじめての方向け情報)」が必要と考えました。ですので、この3つの切り替えタブをもつリッチメニューを作成します。

リッチメニュー切り替え:設定方法

公式ドキュメントに沿って、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.png

2. リッチメニュー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.png

3. リッチメニュー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.png

4. デフォルトリッチメニューを設定する

デフォルトに表示されるリッチメニューを、はじめての方へのリッチメニュー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から設定できているか確認しましょう。

さいごに

公式ドキュメント通りコマンドを実行して、簡単にリッチメニューの切り替えを試すことができました。画像を作成して、コマンドのリッチメニューの領域設定するところが、一番時間がかかりました。

リッチメニューアクションで、メッセージを指定したテキストに対して適切な返答できるように設定するのが、次の課題で、試してみようと思います。