GoogleAppsScriptでLine Messaging APIのpostbackアクションを受け取りたい。

プログラムの内容

お世話になります。
Google Apps ScriptでLineBotを作っています。

下記のコードを書きました。
ユーザからのチャットがあった場合にコードの下の図のようなFlexMessageを返します。

LINEメッセージの図

GASソースコード

javascript
1
2CNANNEL_ACCESS_TOKEN = "チャネルアクセストークン"
3
4function doPost(e) {
5
6  // WebHookで受信した応答用Token
7  var replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
8  // ユーザーのメッセージを取得
9  var userMessage = JSON.parse(e.postData.contents).events[0].message.text;
10  // 応答メッセージ用のAPI URL
11  var url = 'https://api.line.me/v2/bot/message/reply';
12  var json = JSON.parse(e.postData.contents);
13
14  if ('postback' == json.events[0].type){
15
16    sendMessage(url,replytoken, JSON);
17
18  }else{
19    UrlFetchApp.fetch(url, {
20      'headers': {
21        'Content-Type': 'application/json; image/jpeg; charset=UTF-8',
22        'Authorization': 'Bearer ' + CNANNEL_ACCESS_TOKEN,
23      },
24      'method': 'post',
25      'payload': JSON.stringify({
26        'replyToken': replyToken,
27        'messages': [
28          {
29            "type": "flex",
30            "altText": "Flex Message",
31            "contents": {
32              "type": "bubble",
33              "header": 
34              {
35                "type": "box",
36                "layout": "vertical",
37                "backgroundColor": "#227F46",
38                "contents": [
39                  {
40                    "type": "text",
41                    "text": "おえかきくいず",
42                    "color": "#FFFFFF",
43                    "size": "md",
44                    "margin": "xs",
45                    "style": "normal",
46                    "decoration": "none",
47                    "position": "relative",
48                    "align": "center",
49                    "gravity": "center",
50                    "wrap": false
51                  }
52                ]
53              },
54              "hero": 
55              {
56                "type": "image",
57                "size": "full",
58                "aspectRatio": "20:13",
59                "aspectMode": "fit",
60                "url":  "画像url",
61                "action": {
62                  "type": "uri",
63                  "label": "Action",
64                  "uri": "画像url"
65                },
66              },
67              "body": {
68                "type": "box",
69                "layout":  "vertical"　,　//"horizontal", //
70                "spacing": "md",
71                "action": {
72                  "type": "uri",
73                  "label": "Action",
74                  "uri": "https://linecorp.com"
75                },
76                
77                "contents": [
78                  {
79                    "type": "text",
80                    "text": "この絵は何の絵でしょう♪",
81                  },
82                  {
83                    "type": "text",
84                    "text": "絵が表示されない場合は絵の部分をクリックしてね。",
85                    "size": "xxs",
86                    "wrap": true,
87                    "color": "#c0c0c0",
88                    "margin": "xs"
89                  },
90                  {
91                    "type": "button",
92                    "action": {
93                      "type": "postback",
94                      "label": "ポストバック1",
95                      "data": "action=postback１", //ここのpostbackデータ受け取りたい。
96                    },
97                    "flex": 0,
98                    "color": "#227F46",
99                    "style": "primary",
100                    "gravity": "bottom"
101                  },
102                  {
103                    "type": "button",
104                    "action": {
105                      "type": "uri",
106                      "label": "Button",
107                      "uri": "https://linecorp.com"
108                    },
109                    "flex": 0,
110                    "color": "#227F46",
111                    "style": "primary",
112                    "gravity": "bottom"
113                  },
114                  {
115                    "type": "button",
116                    "action": {
117                      "type": "uri",
118                      "label": "Button",
119                      "uri": "https://linecorp.com"
120                    },
121                    "flex": 0,
122                    "color": "#227F46",
123                    "style": "primary",
124                    "gravity": "bottom"
125                  },
126                  {
127                    "type": "button",
128                    "action": {
129                      "type": "uri",
130                      "label": "Button",
131                      "uri": "https://linecorp.com"
132                    },
133                    "flex": 0,
134                    "color": "#227F46",
135                    "style": "primary",
136                    "gravity": "bottom"
137                  },
138                ]
139                  },
140                  "footer": {
141                  "type": "box",
142                  "layout": "vertical",
143                  "contents": [
144                  {
145                  "type": "button",
146                  "color": "#66cdaa",
147                  "action": {
148                  "type": "message",
149                  "label": "＞次の問題",
150                  "text": "クイズ"
151                  }
152                  },
153                  {
154                  "type": "text",
155                  "text": "Image provided by " + "ばんび",
156                  "size": "xs",
157                  "align": "end",
158                  },
159                ]
160              }
161            }
162          }
163        ]//message end
164      }),
165    });
166  }
167    return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
168}
169
170
171function sendMessage(url,replytoken, JSON) {
172  UrlFetchApp.fetch(url, {
173        'headers': {
174          'Content-Type': 'application/json; charset=UTF-8',
175          'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
176        },
177        'method': 'post',
178        'payload': JSON.stringify({
179          'replyToken': replytoken,
180          'messages': [{
181            'type': 'text',
182            'text': "ポストバック受信成功！",
183          }],
184        }),
185      });
186
187}
188
189

助けてほしいこと

FlexMessageのbodyには図のように4つのボタンがありまして、
現状では1番上のボタンだけ押すとPostbackアクションを返します。（はず。つもり。）

postbackのボタンが押されたときに、"ポストバック受信成功！"というメッセージをLINEに返すsendMessage関数を呼ぶはず（ようにコーディングしたつもり）ですが、ボタンを押しても既読になったまま無反応です。

なぜ意図した動きにならないのかご教示を頂きたいです。
何卒宜しくお願い致します。

考えられること

それ以外のボタンを押したときは、正しい挙動を取ります。チャットにも反応し図のメッセージが返却されますのでLINEトークンのスペルミス、Webhookの設定ミスではないかと思っています。

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

回答1件

自己解決

自己解決しました。

わたしが定義したpostbackアクションには、"text"プロパティを定義していませんでした。
ところが、下記のようにアクションタイプがPostbackか、Messageか、に関わらずtextプロパティの値を問い合わせておりましたので、Postbackの受信時のみエラーが表示されていました。

Javascript
1//4行目
2  var userMessage = JSON.parse(e.postData.contents).events[0].message.text;

 エラーメッセージ
 TypeError: Cannot read property 'text' of undefined

対策
上記の1文を、アクションタイプがmessageのときに実行するようにしました。
（今回はとりあえずelseの中に入れた）

問題解決方法

そもそもどのようなエラーが発生しているのかがわからず悩みました。
GASではWebアプリのエラーログが、デフォルトのGoogleアカウント設定では表示されない（？）ようで、
エラーやログの確認方法がわからず、そこを調べました。
結果、GoogleCloudPlatformのアカウントを取得し、Stackdriverへログ出力するようにし、上記のようなエラーメッセージを確認することが出来ました。（Stackdriverは課金制、無料枠あり）

ありがとうございました。

投稿2020/05/14 12:27

jojio

総合スコア59