【GAS】Flex message simulatorで作成したデザインが反映されない。

const LINE_ACCESS_TOKEN = 'YOUR_LINE_ACCESS_TOKEN'; // LINEチャネルのアクセストークンを設定
const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID';      // スプレッドシートのIDを設定
const SHEET_NAME = '予約テスト用';                  // シート名を設定

function doPost(e) {
  const json = JSON.parse(e.postData.contents);
  const userMessage = json.events[0].message.text;

  if (userMessage === '予約確認') {
    const replyToken = json.events[0].replyToken;
    const sheetData = getReservationData();
    const replyMessage = createFlexMessage(sheetData);
    sendReplyMessage(replyToken, replyMessage);
  }
  
  return ContentService.createTextOutput(JSON.stringify({ content: 'post ok' })).setMimeType(ContentService.MimeType.JSON);
}

function getReservationData() {
  const sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME);
  const data = sheet.getDataRange().getValues();
  
  let availableSlots = [];
  data.forEach(row => {
    if (row[2] === '空き') { // C列が「空き」の場合を抽出
      availableSlots.push({ date: row[0], time: row[1] });
    }
  });
  
  return availableSlots;
}

function createFlexMessage(slots) {
  if (slots.length === 0) {
    return { type: 'text', text: '現在、予約可能な枠はありません。' };
  }

  const bubbles = slots.map(slot => {
    return {
      type: 'bubble',
      header: {
        type: 'box',
        layout: 'vertical',
        contents: [
          {
            type: 'text',
            text: '予約したい日付を選択ください',
            size: 'md',
            align: 'center',
            weight: 'bold',
            margin: 'lg'
          },
          {
            type: 'text',
            text: '（1つのみ選択可能です）',
            size: 'sm',
            align: 'center',
            gravity: 'top',
            margin: 'lg'
          }
        ]
      },
      body: {
        type: 'box',
        layout: 'vertical',
        contents: [
          {
            type: 'box',
            layout: 'horizontal',
            contents: [
              {
                type: 'button',
                action: {
                  type: 'postback',
                  data: `date=${slot.date}&time=${slot.time}`,
                  label: `${slot.date} ${slot.time}`
                },
                style: 'primary',
                gravity: 'center'
              }
            ],
            justifyContent: 'center',
            alignItems: 'center',
            spacing: 'md'
          }
        ]
      },
      footer: {
        type: 'box',
        layout: 'horizontal',
        contents: [
          {
            type: 'button',
            action: {
              type: 'postback',
              label: 'キャンセル',
              data: 'cancel'
            },
            height: 'sm'
          }
        ],
        spacing: 'xs',
        margin: 'xs'
      }
    };
  });

  return {
    type: 'flex',
    altText: '予約可能な枠があります',
    contents: {
      type: 'carousel',
      contents: bubbles
    }
  };
}

function sendReplyMessage(replyToken, message) {
  const url = 'https://api.line.me/v2/bot/message/reply';
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${LINE_ACCESS_TOKEN}`,
  };
  
  const payload = JSON.stringify({
    replyToken: replyToken,
    messages: [message],
  });

  const response = UrlFetchApp.fetch(url, {
    method: 'post',
    headers: headers,
    payload: payload,
  });

  Logger.log(response.getContentText());
}