Q&A

日時選択アクションを含むflex messageが送信できない

前提・実現したいこと

pythonのflaskを使用してURLの様なflex messageを送信したいです https://i.imgur.com/gVfHWT5.png

発生している問題・エラーメッセージ

linebot.exceptions.LineBotApiError: LineBotApiError: status_code=400, request_id=1d8ad848-bb65-40c7-92e1-cb59d29d8950, error_response={"details": [{"message": "cannot contain null elements", "property": "/footer/contents/2/contents"}, {"message": "cannot contain null elements", "property": "/footer/contents/2/contents/1/contents"}], "message": "A message (messages[0])\u00a0in the request body is invalid"}, headers={'Server': 'openresty', 'Date': 'Mon, 30 Aug 2021 11:31:22 GMT', 'Content-Type': 'application/json', 'Content-Length': '260', 'Connection': 'keep-alive', 'cache-control': 'no-cache, no-store, max-age=0, must-revalidate', 'expires': '0', 'pragma': 'no-cache', 'x-content-type-options': 'nosniff', 'x-frame-options': 'DENY', 'x-line-request-id': '1d8ad848-bb65-40c7-92e1-cb59d29d8950', 'x-xss-protection': '1; mode=block'} 127.0.0.1 - - [30/Aug/2021 20:31:22] "POST /callback HTTP/1.1" 500 -

これがエラーメッセージです。

該当のソースコード

{
  "type": "bubble",
  "direction": "ltr",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "9月",
        "weight": "bold",
        "size": "xl",
        "color": "#FFFFFF",
        "align": "start",
        "contents": []
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "text",
        "text": "下のボタンを押すとカレンダーが表示されます",
        "size": "xs",
        "color": "#FFFFFF",
        "wrap": true,
        "contents": []
      },
      {
        "type": "button",
        "action": {
          "type": "datetimepicker",
          "label": "日付を選択",
          "data": "action=setdate",
          "mode": "date",
          "initial": "2021-09-02",
          "max": "2021-09-30",
          "min": "2021-09-01"
        },
        "color": "#FFFFFFFF"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "spacer",
            "size": "sm"
          },
          {
            "type": "box",
            "layout": "horizontal",
            "spacing": "xl",
            "contents": [
              {
                "type": "spacer",
                "size": "lg"
              },
              {
                "type": "button",
                "action": {
                  "type": "uri",
                  "label": "取り消し",
                  "uri": "https://linecorp.com"
                },
                "color": "#606769",
                "height": "sm",
                "style": "primary"
              },
              {
                "type": "button",
                "action": {
                  "type": "uri",
                  "label": "確認",
                  "uri": "https://linecorp.com"
                },
                "color": "#FF6255",
                "height": "sm",
                "style": "primary"
              },
              {
                "type": "spacer",
                "size": "lg"
              }
            ]
          }
        ]
      }
    ]
  },
  "styles": {
    "body": {
      "backgroundColor": "#57B8E2"
    },
    "footer": {
      "backgroundColor": "#57B8E2"
    }
  }
}

これがjsonです。 jsonの内容を変えると送信できたので、その他の部分には問題はないと思いますが、一応テキストメッセージを受け取ったときに上記のflex messageを応答メッセージとして送信する関数なども貼っておきます。

@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']

    # get request body as text
    body = request.get_data(as_text=True)
    app.logger.info("Request body: " + body)

    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        print("Invalid signature. Please check your channel access token/channel secret.")
        abort(400)

    return 'OK'


@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    with open('sample_calendar_2.json', 'r') as file:
        text = json.load(file)
    line_bot_api.reply_message(
        event.reply_token,
        FlexSendMessage(alt_text='hello', contents=text))

試したこと

エラ〜メッセージを読んだり、vscodeのデバッグ機能を使ってjsonをpythonの辞書に変換したときに不具合が起きていないか調べたりもしましたが、さっぱりです。

補足情報(FW/ツールのバージョンなど)

python3.8.5 flaskは最新版です。

  • 0
  • 1
  • 421
  • twitter facebook

flex messageを手作業で作るときは一度に作成せず、部分的に作成して、動く状態を維持したまま拡張するのがいいかと思います。 例えば、footer部の最初のテキストだけでも送信できるか試し、徐々に日付やボタンを追加すると原因が特定しやすいかなと思います。 簡単なものならsimulatorで作成できるので、これで試しつつ作成してみるのもいいかもしれないかなと思います! https://developers.line.biz/flex-simulator/

  • 0
本当によろしいですか? question.vm