Flex Messageがしんどいメモ

LINE Bot開発話です。

Node.jsのSDKだとFlex MessageのJSONをラップしつつさらにJSONでtype指定を行う感覚なので、シミュレータで生成されたJSONをどこからどこをコピペして使えるのかがいつも忘れます。

コピペ用テンプレ

こちらの記事を参考にしつつ

return client.replyMessage(event.replyToken, {
  type: "flex",
  altText: "this is a flex message",
  
  //contentsの中を入れ替える
  contents: {
  }
  
});

複数送るとき

return client.replyMessage(event.replyToken, [{
    type: 'text', //参考
    text: '1件目'
  },
  {
    type: "flex",
    altText: "this is a flex message",
    
    //contentsの中を入れ替える
	contents: {
	}
  }
]);

実際に入れ込むとこんな感じ

createFlex的なメソッド作ってますけど

return client.replyMessage(event.replyToken, {
    type: "flex",
    altText: "this is a flex message",
    
    //contensの中を差し替える
    //contensの中がシミュレータからのコピペJSON
    contents: {
        "type": "bubble",
        "hero": {
        "type": "image",
        "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png",
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover",
        "action": {
            "type": "uri",
            "uri": "http://linecorp.com/"
        }
        },
        "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {
            "type": "text",
            "text": "Brown Cafe",
            "weight": "bold",
            "size": "xl"
            },
            {
            "type": "box",
            "layout": "baseline",
            "margin": "md",
            "contents": [
                {
                "type": "icon",
                "size": "sm",
                "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                },
                {
                "type": "icon",
                "size": "sm",
                "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                },
                {
                "type": "icon",
                "size": "sm",
                "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                },
                {
                "type": "icon",
                "size": "sm",
                "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                },
                {
                "type": "icon",
                "size": "sm",
                "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
                },
                {
                "type": "text",
                "text": "4.0",
                "size": "sm",
                "color": "#999999",
                "margin": "md",
                "flex": 0
                }
            ]
            },
            {
            "type": "box",
            "layout": "vertical",
            "margin": "lg",
            "spacing": "sm",
            "contents": [
                {
                "type": "box",
                "layout": "baseline",
                "spacing": "sm",
                "contents": [
                    {
                    "type": "text",
                    "text": "Place",
                    "color": "#aaaaaa",
                    "size": "sm",
                    "flex": 1
                    },
                    {
                    "type": "text",
                    "text": "Miraina Tower, 4-1-6 Shinjuku, Tokyo",
                    "wrap": true,
                    "color": "#666666",
                    "size": "sm",
                    "flex": 5
                    }
                ]
                },
                {
                "type": "box",
                "layout": "baseline",
                "spacing": "sm",
                "contents": [
                    {
                    "type": "text",
                    "text": "Time",
                    "color": "#aaaaaa",
                    "size": "sm",
                    "flex": 1
                    },
                    {
                    "type": "text",
                    "text": "10:00 - 23:00",
                    "wrap": true,
                    "color": "#666666",
                    "size": "sm",
                    "flex": 5
                    }
                ]
                }
            ]
            }
        ]
        },
        "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
            {
            "type": "button",
            "style": "link",
            "height": "sm",
            "action": {
                "type": "uri",
                "label": "CALL",
                "uri": "https://linecorp.com"
            }
            },
            {
            "type": "button",
            "style": "link",
            "height": "sm",
            "action": {
                "type": "uri",
                "label": "WEBSITE",
                "uri": "https://linecorp.com"
            }
            },
            {
            "type": "spacer",
            "size": "sm"
            }
        ],
        "flex": 0
        }
    } //contensここまで コピペで持ってきたJSON
    
});

やっと表示できた、

エディタだと折り畳むけど...

いざコピペしようとすると中括弧地獄ですね。