GASでFlex Messageを適用する方法

GASでLINEBOTのFlex Messageを適用したい。

Google Apps Script(GAS)で、バスの時刻表のLINEBOTを作っています。
バスの時刻（結果）表示をする際に、見栄えを良くするためにFlex Messageを使用したいのですが、
エラーコードもはかずにリプライを返してくれません。

動いていた時のソースコード

GoogleAppsScript
1UrlFetchApp.fetch(url, {
2    'headers': {
3      'Content-Type': 'application/json; charset=UTF-8',
4      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
5    },
6    'method': 'post',
7    'payload': JSON.stringify({
8      'replyToken': replyToken,
9      'messages': [{
10        'type': 'text',
11        'text': message,
12      }],
13    }),
14  });
15  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);

変数messageには、該当するバス停の時刻表のテキストデータが入っています。

動かなくなったソースコード

GoogleAppsScript
1  UrlFetchApp.fetch(url, {
2    'headers': {
3      'Content-Type': 'application/json; charset=UTF-8',
4      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
5    },
6    'method': 'post',
7    'payload': JSON.stringify({
8      'replyToken': replyToken,
9      'messages': 
10      {
11        "type": "bubble",
12        "styles": {
13          "footer": {
14            "separator": true
15          }
16        },
17        "body": {
18          "type": "box",
19          "layout": "vertical",
20          "contents": [
21            {
22              "type": "text",
23              "text": "バス停名",
24              "weight": "bold",
25              "size": "xxl",
26              "margin": "md"
27            },
28            {
29              "type": "separator",
30              "margin": "xxl"
31            },
32            {
33              "type": "box",
34              "layout": "vertical",
35              "margin": "xxl",
36              "spacing": "sm",
37              "contents": [
38                {
39                  "type": "box",
40                  "layout": "horizontal",
41                  "contents": [
42                    {
43                      "type": "text",
44                      "text": "出発時間",
45                      "size": "sm",
46                      "color": "#555555",
47                      "flex": 0
48                    },
49                    {
50                      "type": "text",
51                      "text": "バス会社",
52                      "size": "sm",
53                      "color": "#111111",
54                      "align": "end"
55                    },
56                    {
57                      "type": "text",
58                      "text": "到着時間",
59                      "size": "sm",
60                      "color": "#111111",
61                      "align": "end"
62                    }
63                  ]
64                },
65                {
66                  "type": "separator",
67                  "margin": "xxl"
68                },
69                {
70                  "type": "box",
71                  "layout": "horizontal",
72                  "contents": [
73                    {
74                      "type": "text",
75                      "text": "ITEMS",
76                      "size": "sm",
77                      "color": "#555555"
78                    },
79                    {
80                      "type": "text",
81                      "text": "XXX",
82                      "size": "sm",
83                      "color": "#111111",
84                      "align": "end"
85                    },
86                    {
87                      "type": "text",
88                      "text": "3",
89                      "size": "sm",
90                      "color": "#111111",
91                      "align": "end"
92                    }
93                  ]
94                },
95                {
96                  "type": "box",
97                  "layout": "horizontal",
98                  "contents": [
99                    {
100                      "type": "text",
101                      "text": "TOTAL",
102                      "size": "sm",
103                      "color": "#555555"
104                    },
105                    {
106                      "type": "text",
107                      "text": "XXX",
108                      "size": "sm",
109                      "color": "#111111",
110                      "align": "end"
111                    },
112                    {
113                      "type": "text",
114                      "text": "$7.31",
115                      "size": "sm",
116                      "color": "#111111",
117                      "align": "end"
118                    }
119                  ]
120                },
121                {
122                  "type": "box",
123                  "layout": "horizontal",
124                  "contents": [
125                    {
126                      "type": "text",
127                      "text": "CASH",
128                      "size": "sm",
129                      "color": "#555555"
130                    },
131                    {
132                      "type": "text",
133                      "text": "XXX",
134                      "size": "sm",
135                      "color": "#111111",
136                      "align": "end"
137                    },
138                    {
139                      "type": "text",
140                      "text": "$7.31",
141                      "size": "sm",
142                      "color": "#111111",
143                      "align": "end"
144                    }
145                  ]
146                },
147                {
148                  "type": "box",
149                  "layout": "horizontal",
150                  "contents": [
151                    {
152                      "type": "text",
153                      "text": "CASH",
154                      "size": "sm",
155                      "color": "#555555"
156                    },
157                    {
158                      "type": "text",
159                      "text": "XXX",
160                      "size": "sm",
161                      "color": "#111111",
162                      "align": "end"
163                    },
164                    {
165                      "type": "text",
166                      "text": "$7.31",
167                      "size": "sm",
168                      "color": "#111111",
169                      "align": "end"
170                    }
171                  ]
172                },
173                {
174                  "type": "box",
175                  "layout": "horizontal",
176                  "contents": [
177                    {
178                      "type": "text",
179                      "text": "CASH",
180                      "size": "sm",
181                      "color": "#555555"
182                    },
183                    {
184                      "type": "text",
185                      "text": "XXX",
186                      "size": "sm",
187                      "color": "#111111",
188                      "align": "end"
189                    },
190                    {
191                      "type": "text",
192                      "text": "$7.31",
193                      "size": "sm",
194                      "color": "#111111",
195                      "align": "end"
196                    }
197                  ]
198                }
199              ]
200            },
201            {
202              "type": "separator",
203              "margin": "xxl"
204            }
205          ]
206        }
207      }
208      ,
209    }),
210  });
211  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
212

質問

Flex Messageシュミュレータで作ったものを、そのままMessagesの後につけるのではダメなのでしょうか。
シュミュレータで出てきたものをどこに貼り付けるのかを教えていただきたいです。

行動規範の内容に同意します

回答1件

自己解決

GoogleAppsScript
1      'messages': [{
2        'type': 'flex',　//ここの宣言が必要でした
3        'altText': 'this is a flex message',
4        'contents':{
5          "type": "bubble",
6          "styles": {
7            "footer": {
8              "separator": true
9            }
10          },
11以下同文

ダメだったところ

ただメッセージに入れるのではなく、
typeとaltTextを指定することで、flex messageだと言うことを宣言しなければなりませんでした。
altTextは小さい画面で表示させるメッセージのようなものでした。

参考URL

https://logmi.jp/tech/articles/319894

投稿2019/03/03 06:04

編集2019/03/03 06:06

minminzemin

総合スコア21

papinianus

2019/03/04 03:21

対応しない間に自己解決なさってました。すばらしいです。ご検討のとおり、返信として許されるメッセージの種類として「テキスト」以外に"flex"があるので、それを指定したうえで、そのコンテンツとして、バブルを指定する必要があります。シミュレータが、まさかtype="flex"の部分を省略したモノを出力するとは思わず、前回は不適切な回答になってしまいました。すみませんでした。