LINEリッチメニューのテキストにFlex Messgeで返答してみた

前回作成したリッチメニューのメッセージアクションのテキストに対して、PythonでFlex Message返答を設定してみました。

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

完成デモ

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

Flex Message作成

Flex Messageは、レイアウトをカスタマイズできるメッセージです。Flex Message Simulator でレイアウトを確認しながら作成できます。サンプルもあるので、便利です!

前回同様、LINEスキマニを題材に、公式HPヘルプページのコンテンツをベースに作成してみました。Flex Message Simulatorで作成し、JSONコードをコピーして、以下、Pythonコードで使用します。

Pythonコード

公式のサンプルボットコードをベースに、@handler.add(MessageEvent, message=TextMessage)箇所を以下のように変更します。

@handler.add(MessageEvent, message=TextMessage)
def handle_text_message(event):
    text = event.message.text

    if text == '使い方':
        bubble_string = """
            {
              "type": "carousel",
              "contents": [
                {
                  "type": "bubble",
                  "body": {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "1. 仕事を選ぶ",
                        "weight": "bold",
                        "align": "center",
                        "size": "xl",
                        "offsetTop": "-5px"
                      },
                      {
                        "type": "image",
                        "url": "https://portal.line-sukimani.me/hubfs/pic_step.png",
                        "size": "full",
                        "aspectMode": "fit",
                        "aspectRatio": "1.6:1"
                      },
                      {
                        "type": "text",
                        "text": "あなたの経験やスキルが活かせる仕事を選べます。「数時間だけ」や「明日すぐに」などあなたのスキマ時間に合わせて探しましょう。",
                        "size": "xxs",
                        "wrap": true
                      }
                    ]
                  }
                },
                {
                  "type": "bubble",
                  "body": {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "2.即マッチング",
                        "size": "xl",
                        "weight": "bold",
                        "align": "center",
                        "offsetTop": "-5px"
                      },
                      {
                        "type": "image",
                        "url": "https://portal.line-sukimani.me/hubfs/pic_step_02.png",
                        "size": "full",
                        "aspectRatio": "1.6:1"
                      },
                      {
                        "type": "text",
                        "text": "LINEでプロフィールなどの情報を入力すれば、初回最短15分で応募完了です。企業との選考なしで求人案件とのマッチングが即完了します。",
                        "size": "xxs",
                        "wrap": true
                      }
                    ]
                  }
                },
                {
                  "type": "bubble",
                  "body": {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "3.給与を受け取る",
                        "size": "lg",
                        "weight": "bold",
                        "align": "center",
                        "offsetTop": "-5px"
                      },
                      {
                        "type": "image",
                        "url": "https://portal.line-sukimani.me/hubfs/pic_step_03.png",
                        "size": "full",
                        "aspectRatio": "1.6:1"
                      },
                      {
                        "type": "text",
                        "text": "給与はLINEスキマニ内に勤務後即時反映され、好きなときに口座から引き出せます。口座振込申請もいつでも手数料0円です。",
                        "size": "xxs",
                        "wrap": true
                      }
                    ]
                  }
                }
              ]
            }
        """
        message = FlexSendMessage(alt_text="面接なしですぐ働けて、すぐ給与受け取れます!", contents=json.loads(bubble_string))
        line_bot_api.reply_message(
            event.reply_token,
            message
        )
    elif text == '働き方ガイド':
        bubble_string = """
            {
              "type": "carousel",
              "contents": [
                {
                  "type": "bubble",
                  "body": {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "1. 出勤",
                        "weight": "bold",
                        "align": "center",
                        "size": "xl",
                        "offsetTop": "-5px"
                      },
                      {
                        "type": "image",
                        "url": "https://line-sukimani.zendesk.com/hc/article_attachments/4408163296015/___________320_-_LINE_Sukimani_App_-_Zeplin.png",
                        "size": "full",
                        "aspectMode": "fit",
                        "aspectRatio": "1.6:1"
                      },
                      {
                        "type": "text",
                        "text": "出勤簿から該当求人の「チェックイン」を押し、就業先のQRコードを読み取ります。",
                        "size": "xxs",
                        "wrap": true
                      }
                    ]
                  }
                },
                {
                  "type": "bubble",
                  "body": {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "2.退勤",
                        "size": "xl",
                        "weight": "bold",
                        "align": "center",
                        "offsetTop": "-5px"
                      },
                      {
                        "type": "image",
                        "url": "https://line-sukimani.zendesk.com/hc/article_attachments/4408163296015/___________320_-_LINE_Sukimani_App_-_Zeplin.png",
                        "size": "full",
                        "aspectRatio": "1.6:1"
                      },
                      {
                        "type": "text",
                        "text": "出勤簿から該当求人の「チェックアウト」を押し、就業先のQRコードを読み取ります。",
                        "size": "xxs",
                        "wrap": true
                      }
                    ]
                  }
                },
                {
                  "type": "bubble",
                  "body": {
                    "type": "box",
                    "layout": "vertical",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "3.給与受取",
                        "size": "lg",
                        "weight": "bold",
                        "align": "center",
                        "offsetTop": "-5px"
                      },
                      {
                        "type": "image",
                        "url": "https://line-sukimani.zendesk.com/hc/article_attachments/360006133836/________2021_02_10_13_34.png",
                        "size": "full",
                        "aspectRatio": "1.6:1"
                      },
                      {
                        "type": "text",
                        "text": "マイページから「振込申請」を押すと、ご登録の口座にすぐに振込まれます。",
                        "size": "xxs",
                        "wrap": true
                      }
                    ]
                  }
                }
              ]
            }
        """
        message = FlexSendMessage(alt_text="簡単に出退勤でき、給与すぐ受け取れます!", contents=json.loads(bubble_string))
        line_bot_api.reply_message(
            event.reply_token,
            message
        )
    else:
        line_bot_api.reply_message(
            event.reply_token, TextSendMessage(text=event.message.text))

ローカルで実行して、テストする場合は下記をご覧ください。

LINEサンプルボット(Python)をローカルで動かしてみた(2021年版)

さいごに

公式のサンプルコードを参照し、簡単にコード作成できました。リッチメッセージをタップしたときに、ファーストビューでコンテンツが切れないように、画像や文字の大きさを調整するのに、一番時間がかかりました。

次は、リッチメニューのよくある質問をタップしたときに、公式のLINEスキマニアカウントと同様に、シナリオメッセージで返答することを試してみたいと思います。