質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

GASでFlex Messageを適用する方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,385

score 21

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

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

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

UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text',
        'text': message,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);


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

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

  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': 
      {
        "type": "bubble",
        "styles": {
          "footer": {
            "separator": true
          }
        },
        "body": {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "text",
              "text": "バス停名",
              "weight": "bold",
              "size": "xxl",
              "margin": "md"
            },
            {
              "type": "separator",
              "margin": "xxl"
            },
            {
              "type": "box",
              "layout": "vertical",
              "margin": "xxl",
              "spacing": "sm",
              "contents": [
                {
                  "type": "box",
                  "layout": "horizontal",
                  "contents": [
                    {
                      "type": "text",
                      "text": "出発時間",
                      "size": "sm",
                      "color": "#555555",
                      "flex": 0
                    },
                    {
                      "type": "text",
                      "text": "バス会社",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    },
                    {
                      "type": "text",
                      "text": "到着時間",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    }
                  ]
                },
                {
                  "type": "separator",
                  "margin": "xxl"
                },
                {
                  "type": "box",
                  "layout": "horizontal",
                  "contents": [
                    {
                      "type": "text",
                      "text": "ITEMS",
                      "size": "sm",
                      "color": "#555555"
                    },
                    {
                      "type": "text",
                      "text": "XXX",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    },
                    {
                      "type": "text",
                      "text": "3",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    }
                  ]
                },
                {
                  "type": "box",
                  "layout": "horizontal",
                  "contents": [
                    {
                      "type": "text",
                      "text": "TOTAL",
                      "size": "sm",
                      "color": "#555555"
                    },
                    {
                      "type": "text",
                      "text": "XXX",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    },
                    {
                      "type": "text",
                      "text": "$7.31",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    }
                  ]
                },
                {
                  "type": "box",
                  "layout": "horizontal",
                  "contents": [
                    {
                      "type": "text",
                      "text": "CASH",
                      "size": "sm",
                      "color": "#555555"
                    },
                    {
                      "type": "text",
                      "text": "XXX",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    },
                    {
                      "type": "text",
                      "text": "$7.31",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    }
                  ]
                },
                {
                  "type": "box",
                  "layout": "horizontal",
                  "contents": [
                    {
                      "type": "text",
                      "text": "CASH",
                      "size": "sm",
                      "color": "#555555"
                    },
                    {
                      "type": "text",
                      "text": "XXX",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    },
                    {
                      "type": "text",
                      "text": "$7.31",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    }
                  ]
                },
                {
                  "type": "box",
                  "layout": "horizontal",
                  "contents": [
                    {
                      "type": "text",
                      "text": "CASH",
                      "size": "sm",
                      "color": "#555555"
                    },
                    {
                      "type": "text",
                      "text": "XXX",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    },
                    {
                      "type": "text",
                      "text": "$7.31",
                      "size": "sm",
                      "color": "#111111",
                      "align": "end"
                    }
                  ]
                }
              ]
            },
            {
              "type": "separator",
              "margin": "xxl"
            }
          ]
        }
      }
      ,
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);

質問

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

+1

      'messages': [{
        'type': 'flex', //ここの宣言が必要でした
        'altText': 'this is a flex message',
        'contents':{
          "type": "bubble",
          "styles": {
            "footer": {
              "separator": true
            }
          },
以下同文

ダメだったところ

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

参考URL

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/04 12:21

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

    キャンセル

  • 2019/03/04 15:42

    こちらこそ、回答してくださりまして誠にありがとうございます!!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る