Q&A
実現したいこと
下記のトーク画面を実装しようと考えています。
前提
GASからLINE botでメッセージを送信しよう考えています。
発生している問題・エラーメッセージ
下記のコードの6行目以降が、Flex Message Simulatorから生成して貼り付けたものなります。 carouselの使い方が間違えている気がしました。しかし、何を間違いているのか特定できませんでした。 原因を特定していただけると助かります。
JavaScript
1const postData = { 2 "to": replyToken, 3 "messages": [{ 4 "type": "template", 5 "altText": "this is a carousel template", 6 "template": { 7 "type": "carousel", 8 "contents": [ 9 { 10 "type": "bubble", 11 "size": "nano", 12 "direction": "ltr", 13 "header": { 14 "type": "box", 15 "layout": "vertical", 16 "contents": [ 17 { 18 "type": "text", 19 "text": "インプット教材", 20 "color": "#ffffff", 21 "align": "start", 22 "size": "xs", 23 "gravity": "center", 24 "weight": "bold", 25 "action": { 26 "type": "postback", 27 "label": "action", 28 "data": "インプットはさらっと！" 29 } 30 }, 31 { 32 "type": "text", 33 "text": "70%", 34 "color": "#ffffff", 35 "align": "start", 36 "size": "xs", 37 "gravity": "center", 38 "margin": "lg", 39 "weight": "bold" 40 }, 41 { 42 "type": "box", 43 "layout": "vertical", 44 "contents": [ 45 { 46 "type": "box", 47 "layout": "vertical", 48 "contents": [ 49 { 50 "type": "filler" 51 } 52 ], 53 "width": "70%", 54 "backgroundColor": "#0066FF", 55 "height": "6px" 56 } 57 ], 58 "backgroundColor": "#FFFFFF", 59 "height": "6px", 60 "margin": "sm" 61 } 62 ], 63 "backgroundColor": "#33CCFF", 64 "paddingTop": "19px", 65 "paddingAll": "12px", 66 "paddingBottom": "16px" 67 }, 68 "body": { 69 "type": "box", 70 "layout": "vertical", 71 "contents": [ 72 { 73 "type": "box", 74 "layout": "vertical", 75 "contents": [ 76 { 77 "type": "text", 78 "text": "進捗：34/48", 79 "size": "sm", 80 "wrap": true 81 }, 82 { 83 "type": "text", 84 "text": "順調だね！", 85 "size": "sm" 86 } 87 ], 88 "flex": 1, 89 "alignItems": "flex-start", 90 "justifyContent": "center" 91 } 92 ], 93 "spacing": "md", 94 "paddingAll": "12px" 95 }, 96 "action": { 97 "type": "postback", 98 "label": "action", 99 "data": "hello" 100 }, 101 "styles": { 102 "footer": { 103 "separator": false 104 } 105 } 106 }, 107 { 108 "type": "bubble", 109 "size": "nano", 110 "direction": "ltr", 111 "header": { 112 "type": "box", 113 "layout": "vertical", 114 "contents": [ 115 { 116 "type": "text", 117 "color": "#ffffff", 118 "align": "start", 119 "size": "xs", 120 "gravity": "center", 121 "text": "ミニドリル", 122 "weight": "bold", 123 "action": { 124 "type": "postback", 125 "label": "action", 126 "data": "hello" 127 } 128 }, 129 { 130 "type": "text", 131 "text": "30%", 132 "color": "#ffffff", 133 "align": "start", 134 "size": "xs", 135 "gravity": "center", 136 "margin": "lg", 137 "weight": "bold" 138 }, 139 { 140 "type": "box", 141 "layout": "vertical", 142 "contents": [ 143 { 144 "type": "box", 145 "layout": "vertical", 146 "contents": [ 147 { 148 "type": "filler" 149 } 150 ], 151 "width": "30%", 152 "backgroundColor": "#CC0000", 153 "height": "6px" 154 } 155 ], 156 "height": "6px", 157 "margin": "sm", 158 "backgroundColor": "#FFFFFF" 159 } 160 ], 161 "backgroundColor": "#FF6B6E", 162 "paddingTop": "19px", 163 "paddingAll": "12px", 164 "paddingBottom": "16px" 165 }, 166 "body": { 167 "type": "box", 168 "layout": "vertical", 169 "contents": [ 170 { 171 "type": "box", 172 "layout": "vertical", 173 "contents": [ 174 { 175 "type": "text", 176 "text": "進捗：23/48", 177 "size": "sm", 178 "wrap": true 179 }, 180 { 181 "type": "text", 182 "text": "遅れ：4", 183 "size": "sm" 184 }, 185 { 186 "type": "text", 187 "text": "頑張ろう！", 188 "size": "sm" 189 } 190 ], 191 "flex": 1, 192 "justifyContent": "center", 193 "alignItems": "flex-start" 194 } 195 ], 196 "spacing": "md", 197 "paddingAll": "12px" 198 }, 199 "action": { 200 "type": "postback", 201 "label": "action", 202 "data": "hello" 203 }, 204 "styles": { 205 "footer": { 206 "separator": false 207 } 208 } 209 }, 210 { 211 "type": "bubble", 212 "size": "nano", 213 "direction": "ltr", 214 "header": { 215 "type": "box", 216 "layout": "vertical", 217 "contents": [ 218 { 219 "type": "text", 220 "text": "課題", 221 "color": "#ffffff", 222 "align": "start", 223 "size": "md", 224 "gravity": "center", 225 "weight": "bold", 226 "action": { 227 "type": "postback", 228 "label": "action", 229 "data": "hello" 230 } 231 }, 232 { 233 "type": "text", 234 "text": "100%", 235 "color": "#ffffff", 236 "align": "start", 237 "size": "xs", 238 "gravity": "center", 239 "margin": "lg", 240 "weight": "bold" 241 }, 242 { 243 "type": "box", 244 "layout": "vertical", 245 "contents": [ 246 { 247 "type": "box", 248 "layout": "vertical", 249 "contents": [ 250 { 251 "type": "filler" 252 } 253 ], 254 "width": "100%", 255 "backgroundColor": "#0066FF", 256 "height": "6px" 257 } 258 ], 259 "backgroundColor": "#FFFFFF", 260 "height": "6px", 261 "margin": "sm" 262 } 263 ], 264 "backgroundColor": "#33CCFF", 265 "paddingTop": "19px", 266 "paddingAll": "12px", 267 "paddingBottom": "16px" 268 }, 269 "body": { 270 "type": "box", 271 "layout": "vertical", 272 "contents": [ 273 { 274 "type": "box", 275 "layout": "vertical", 276 "contents": [ 277 { 278 "type": "text", 279 "text": "進捗：50/50", 280 "size": "sm", 281 "wrap": true 282 }, 283 { 284 "type": "text", 285 "text": "順調だね！", 286 "size": "sm" 287 } 288 ], 289 "flex": 1, 290 "justifyContent": "center", 291 "alignItems": "flex-start" 292 } 293 ], 294 "spacing": "md", 295 "paddingAll": "12px" 296 }, 297 "action": { 298 "type": "postback", 299 "label": "action", 300 "data": "hello" 301 }, 302 "styles": { 303 "footer": { 304 "separator": false 305 } 306 } 307 } 308 ] 309 } 310 } 311 ] 312 };
試したこと
他の型で実装すると、しっかり実際のLINEに反映されたので、アクセス周りなどの問題は一切ありません。
回答1件
0
ベストアンサー
正解かどうかは分かりませんが私がcarouselメッセージを送っているコードは
GAS
1 "messages": [{ 2 "type": "template", 3 "altText": "this is a carousel template", 4 "template": { 5 "type": "carousel", 6 "contents": [ 7
の部分が
GAS
1 "messages": [{ 2 "type": "flex", 3 "altText": "説明", 4 "contents": { 5 "type": "carousel", 6 "contents": [ 7
といった感じでtypeとしてflexメッセージを指定する形になっています。
投稿2023/02/21 22:17
総合スコア10544
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/02/22 00:19