この記事はこの記事の続きです
[LINE Bot] LIFFとリッチメニューでも管理画面が作りたい! 1 -グループ管理-

リッチメニューを作る

さて、前回はグループへの招待・退会で管理メンバーの追加・削除をできるようにしました。
その際にリッチメニューをユーザ用と管理者用に切り替えます。
今回はそのリッチメニューを作ります。

今回はユーザー用を 3 x 1 (1200 x 405)
管理者用を 3 x 2 (1200 x 810) のメニューを作ります。
動作確認のため、上の段はユーザと同じものにします

Line Messaging APIでリッチメニューを作る

Line Account Managerで作成したリッチメニューは残念ながらAPIでは使えません。
画像を準備し、APIで作成する必要があります。
画像はpngかjpgで1MB以内です。

pythonで適当に書いたので、ライブラリをインストールします。

pip install line-bot-sdk
pip install pyyaml
pip install boto3

botのシークレットキーなどは、serverless.ymlで環境変数として読み込んでいるymlをそのまま読み込みます。

conf/line-dev.yml

CHANNEL_SECRET: "シークレット"
CHANNEL_TOKEN: "トークン"
ADMIN_GROUP_ID: "前回作成した管理部屋のグループID"

ソースコード

お作法としては

デフォルトのリッチメニューを解除する
全てのリッチメニューを削除する
ユーザ用リッチメニューを作成する
管理者用のリッチメニューを作成する
のようになります。
既存のリッチメニューを削除しておかないと、1000件までの上限にそのうち引っかかります。

richmenu.py

# !/usr/bin/env python3

import sys
import requests
import yaml
import boto3
from linebot import (
    LineBotApi
)
from linebot.models import (
    RichMenu, RichMenuArea, RichMenuSize, RichMenuBounds,
    PostbackAction, URIAction,
)


def main():

    with open('conf/line-'+env+'.yml') as file:
        yml = yaml.safe_load(file)

    admin_group_id = yml['ADMIN_GROUP_ID']
    access_token = yml['CHANNEL_TOKEN']

    // botを作成する
    line_bot_api = LineBotApi(access_token)

    // デフォルトのリッチメニューを解除する
    cancel_richmenu(line_bot_api)
    line_bot_api.cancel_default_rich_menu()

    // 既存のリッチメニューを削除する
    delete_richmenu(line_bot_api)

    // ユーザ用メニューを作成する
    id = create_user_richmenu(line_bot_api)
    upload_user_richmenu_image(line_bot_api)

    // 全てのユーザにユーザ用メニューをデフォルトに設定する
    line_bot_api.set_default_rich_menu(id)

    // 管理者用メニューを作成する
    id = create_staff_richmenu(line_bot_api)
    upload_staff_richmenu_image(line_bot_api, id)

    // 管理者に管理者用リッチメニューを設定する
    set_staff_richmenu(line_bot_api, id )

// 全てのリッチメニューを削除する
def delete_richmenu(line_bot_api):
    print("delete user richmenu")
    menu_list = line_bot_api.get_rich_menu_list()

    for richmenu in menu_list:
        print("delete user richmenu "+richmenu.rich_menu_id)
        line_bot_api.delete_rich_menu(richmenu.rich_menu_id)

// ユーザ用リッチメニュー
def create_user_richmenu(line_bot_api, chara_name):
    print("create user richmenu")
    user_menu = RichMenu(
        size=RichMenuSize(width=1200, height=405),
        selected=True,
        name="minarai-chan user menu",
        chat_bar_text="お店情報・ご注文",
        areas=[
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=0,
                    y=0,
                    width=400,
                    height=405,
                ),
                action=PostbackAction(
                    label='何ができるの?',
                    displayText='何ができるの?',
                    data="how_to_use",
                ),
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=400,
                    y=0,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='shop',
                    uri='ユーザ向けLIFFのURL',
                ),
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=800,
                    y=0,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='order',
                    uri='ユーザ向けLIFFのURL',
                ),
            ),
        ]
    )
    id = line_bot_api.create_rich_menu(rich_menu=user_menu)
    print("user richmenu id = "+id)
    return id

def upload_user_richmenu_image(line_bot_api, id):
    print("update user richmenu "+ id)
    with open('script/image/richmenu/user.png', 'rb') as f:
        line_bot_api.set_rich_menu_image(id, 'image/png', f)

# 3 x 2 のリッチメニュー。上3段はユーザ用と同じ
def create_staff_richmenu(line_bot_api, chara_name):
    print("create staff richmenu")
    user_menu = RichMenu(
        size=RichMenuSize(width=1200, height=810),
        selected=False,
        name="minarai-chan user menu",
        chat_bar_text="管理メニュー",
        areas=[
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=0,
                    y=0,
                    width=400,
                    height=405,
                ),
                action=PostbackAction(
                    label='何ができるの?',
                    displayText='何ができるの?',
                    data="how_to_use",
                ),
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=400,
                    y=0,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='shop',
                    uri='ユーザ向けLIFFのURL',
                ),
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=800,
                    y=0,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='order',
                    uri='ユーザ向けLIFFのURL',
                ),
            ),
            # 下の段
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=0,
                    y=405,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='staff_nanika',
                    uri='LIFFのURL',
                ),
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=400,
                    y=405,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='staff_hoge',
                    uri='LIFFのURL',
                ),
            ),
            RichMenuArea(
                bounds=RichMenuBounds(
                    x=800,
                    y=405,
                    width=400,
                    height=405,
                ),
                action=URIAction(
                    label='staff_order',
                    uri='LIFFのURL',
                ),
            ),
        ]
    )
    id = line_bot_api.create_rich_menu(rich_menu=admin_menu)
    print("admin richmenu id = "+id)
    return id

# 管理者用画像アップロード
def upload_staff_richmenu_image(line_bot_api, id):
    print("update staff richmenu "+ id)
    with open('script/image/richmenu/admin.png', 'rb') as f:
        line_bot_api.set_rich_menu_image(id, 'image/png', f)

# 管理者用のリッチメニュー
def set_staff_richmenu(line_bot_api, id):
    // DBから管理者のユーザIDを取得しておく
    ...

    line_bot_api.link_rich_menu_to_user('管理者のユーザID', id)
    return

リッチメニューを切り替える

管理部屋に招待・退会した時のイベント処理は前回書きましたが、
そこにリッチメニューの切り替え処理を書きます。

リッチメニューのIDは環境変数にしています。

line/user.go

func (r *Line) LinkRichMenu(users []string) {
    // Line Messaging API リッチメニューを複数ユーザに紐付ける
	_ = r.bot.BulkLinkRichMenu(r.richMenuID, users...)
}

func (r *Line) UnlinkRichMenu(users []string) {
    // Line Messaging API リッチメニューを複数ユーザから解除する
	_, _ = r.bot.BulkUnlinkRichMenu(users...).Do()
}

これで、リッチメニューの切り替えは完了です!

次回、LIFFとAPIで管理者認証を行う。

LIFFからアクセストークンを取得し、サーバー側でユーザIDに変換し、管理者であるかどうかを認証します。
[LINE Bot] LIFFとリッチメニューでも管理画面が作りたい! 3 -認証編-