LINE Messaging API で クイックリプライ と Flex Message を使って Google Apps Script からデータを送信してみた

LINE Messaging API x GAS で作成したボットから、クイックリプライとFlex Messageを使って、画像を送信してみました。

本来は、kintoneから画像を取得して表示できると良かったのですが、LINEの仕様上そのままでは難しそうなのでひとまずHerokuに置いた画像のURLを固定で持ってきています。

この辺りはちょっと考えて別の方法を試したいと思っています。

できたもの

こんな感じで、GASのボットサーバーからFlex Messageを利用してメッセージを送信しています。

kintoneの画像DBからレコードIDを取得した程で（今回はダミーです）、「画像をみる」メニューを押下→クイックリプライでレコードIDを表示→レコードIDを選択→データ取得(ダミー)→Flex Messageで画像を送信して表示
な具合です。

コード

諸般の事情で抜粋です。

クイックリプライの辺り
本来はkintoneのDBからレコードを取得するのですが、今回はダミーで直書きです。
なんとなくのイメージを掴んでください。

function sendQuickReplay(lineReplyUrl, channelAccessToken, replyToken, replyMessage) {
  const data = {
    "type": "text",
    "text": "Select your favorite image!",
    "quickReply": {
      "items": [
        {
          "type": "action",
          "imageUrl": "https://example.com/sushi.png",
          "action": {
            "type": "postback",
            "label": "postback105",
            "data": "postback=105&request=getimage",
            "displayText": "postback 105"
          }
        },
        {
          "type": "action",
          "imageUrl": "https://example.com/tempura.png",
          "action": {
            "type": "message",
            "label": "100",
            "text": "100"
          }
        },
        {
          "type": "action",
          "imageUrl": "https://example.com/tempura.png",
          "action": {
            "type": "message",
            "label": "99",
            "text": "99"
          }
        },
        {
          "type": "action",
          "imageUrl": "https://example.com/tempura.png",
          "action": {
            "type": "message",
            "label": "98",
            "text": "98"
          }
        },
        {
          "type": "action",
          "imageUrl": "https://example.com/tempura.png",
          "action": {
            "type": "message",
            "label": "97",
            "text": "97"
          }
        }
      ]
    }
  }
  const ret = replayMessage(lineReplyUrl, channelAccessToken, replyToken, data)
  return ret
}

Flex Messageを使って画像を送信する辺り。
こちらも現在ダミーのJSONを直書きしてます。

// LINEに画像を送る
function replyImage(url = 'https://api.line.me/v2/bot/message/reply', channelAccessToken, replyToken, recordId) {
  const rid = recordId
  const data = {
    "type": "bubble",
    "styles": {
      "header": {
        "backgroundColor": "#faf0e6"
      },
      "body": {
        "backgroundColor": "#f8f8ff"
      },
      "footer": {
      "backgroundColor": "#d2691e"
      }
    },
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Flex-Message Header"
        }
      ]
    },
    "hero": {
      "type": "image",
      "url": "https://<Heroku>/images/logo_kintone.png",
      "size": "full",
      "aspectRatio": "2:1"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": rid
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "kintone image sample"
        }
      ]
    }
  }

  const response =  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': `Bearer ${channelAccessToken}` ,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [
        {
          'type': 'flex',
          'altText': 'This is a Flex Message',
          'contents': data
        }
      ]
    }),
  });
  return JSON.parse(response.getContentText())
}

今後の展開

実際にkintoneのDBから画像をダウンロードしてLINEに送信するには間に何か挟まないといけない感じなので、その辺りをゴニョゴニョやって見る。

画像を設置するサーバーにはNetlifyが使えそうなので調べてみる