LoginSignup
9
2

More than 3 years have passed since last update.

【LINEBot】Flexメッセージが送れない時に確認すること

Last updated at Posted at 2020-10-22

僕も一瞬戸惑ったし、友達が困っていたLINEBotの初心者落とし穴を共有します。

この記事の対象者

「LINEBotを触るようになり、textとか画像とか送れるようになったけど、自分で作ったFlexMessageが送信できない」と思っている方

筆者の環境

LINEBotDesigner:バージョン1.3.4 (1.3.4)

この記事で解決できるエラー文

スクリーンショット 2020-10-22 23.23.24.png

要するにMessageのtypeが text, image, video, audio, location, sticker, template, imagemap, flexしか送れないとのこと。

確認してほしいこと

スクリーンショット 2020-10-22 23.26.58.png

LINEBotDesignerFlexMessageシュミレーターで作ったFlexMessageのJSONはtypeがbubbleになっています。ですので送信できません。

解決策

LINEBotDesignerやFlexMessageシュミレーターで作ったFlexMessageの頭と後ろに文字を必要なものを付け足す


 {
  "type": "flex",
  "altText": "flexMessageです",
  "contents": {ここの部分に作ったMessageを書く}
}

これで無事送信できるようになると思います。一度お試しください。

使用例

{
  "type": "flex",
  "altText": "flexMessageです",
  "contents": {
  "type": "bubble",
  "direction": "rtl",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "簡単なFlexメッセージ",
        "align": "center",
        "contents": []
      }
    ]
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "ここは本文を書くところです",
        "align": "center",
        "contents": []
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "uri",
          "label": "これはボタンです",
          "uri": "https://linecorp.com"
        }
      }
    ]
  },
  "styles": {
    "header": {
      "backgroundColor": "#7CE4ADFF",
      "separator": false
    },
    "body": {
      "backgroundColor": "#FFACACFF",
      "separatorColor": "#FFFFFFFF"
    }
  }
}
}

カルーセルメッセージの場合

(追加更新2021/1/10)

{
      type: "flex",
      altText: "flexMessageです",
      contents: {
        type: "carousel",
        contents: [
          {type:'bubble' ....},
          {type: 'bubble' ... }
        ]
      }
}

カルーセルメッセージの場合は上のようにJSONを書いて、carouselの中のcontentsにカルーセルで表示したいメッセージを配列にしてくといい感じに送信できます。

おまけ

先ほど追加したaltTextってなんなのと聞かれることがたまにあります。ここの部分は自由に変えても大丈夫です。↓

IMG_6602.jpg

このようにLINEの通知だったり、トーク一覧に表示されるメッセージになります。

あとがき

先日のアップデートが来るまではこんなことしなくてよかったので意外とこける人多いかもと思ったので記事書いてみました。
誰かの力になれたら幸いです。

だれでもAWSでLINEBotが作れるようになる記事はこちら

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
2