LINE Bot에서 캘린더 표시

LINE Messaging API의 Flex Message 사용

Flex Message는 여러 요소를 결합하여 레이아웃을 자유롭게 사용자 정의할 수 있는 메시지입니다.

완성 시스템

이달 달력이 나온다

일요일, 공휴일은 빨간색, 토요일은 파란색, 오늘은 녹색, 기타는 검은 색

JSON 조립

Flex Message로 표시하기 위한 JSON을 Ruby로 조립하기

calendar.rb

require 'date'
require 'json'
require 'active_support'
require 'active_support/core_ext'
require 'holiday_jp'

# 今月のカレンダー
def this_month_calendar
  calendar = []
  contents = []
  # today = Time.zone.today
  today = Date.today
  holidays = ::HolidayJp.between(today.beginning_of_month, today.end_of_month).map(&:date)

  today.beginning_of_month.wday.times do
    contents << {
      type: "text",
      text: ' ',
      size: "sm",
      color: '#000000',
      align: "center"
    }
  end

  (today.beginning_of_month..today.end_of_month).each do |day|
    # today = Time.zone.today
    if day == Date.today
      color = "#1db446" # green
    elsif day.sunday? || holidays.include?(day)
      color = "#ff0000" # red
    elsif day.saturday?
      color = '#0000ff' # blue
    else
      color = '#000000'
    end

    day_contents = {
      type: "text",
      text: day.day.to_s,
      size: "sm",
      color: color,
      align: "center",
      gravity: "center"
    }

    contents << day_contents
    contents << { type: "separator" } unless day.saturday?

    if today.end_of_month == day
      (6 - today.end_of_month.wday).times do
        contents << {
          type: "text",
          text: ' ',
          size: "sm",
          color: '#000000',
          align: "center"
        }
      end
    end

    if day.saturday? || today.end_of_month == day
      calendar << {
        type: "box",
        layout: "horizontal",
        margin: "md",
        contents: contents
      }
      calendar << { type: "separator" }
      contents = []
    end
  end

  {
    type: "flex",
    altText: "カレンダー",
    contents: {
      type: "bubble",
      styles: {
        footer: {
          separator: true
        }
      },
      body: {
        type: "box",
        layout: "vertical",
        contents: [
          {
            type: "text",
            text: "#{today.month}月",
            weight: "bold",
            color: "#1db446", # green
            size: "md"
          },
          {
            type: "text",
            text: "ここになにか説明",
            size: "xs",
            color: "#aaaaaa", # gray
            wrap: true
          },
          {
            type: "box",
            layout: "vertical",
            margin: "md",
            spacing: "md",
            contents: [
              {
                type: "separator",
                margin: "md"
              },
              {
                type: "box",
                layout: "horizontal",
                margin: "md",
                contents: weekday_header
              },
              {
                type: "separator"
              },
              *calendar
            ]
          }
        ]
      }
    }
  }
end

# 曜日ヘッダー
def weekday_header
  weekdays = %w[日 月 火 水 木 金 土]
  weekdays.each_with_object [] do |weekday, header|
    if weekday == '日'
      color = "#ff0000" # red
    elsif weekday == '土'
      color = '#0000ff' # blue
    else
      color = '#000000'
    end

    header << {
      type: "text",
      text: weekday,
      size: "sm",
      color: color,
      align: "center"
    }
    header << { type: "separator" } if weekday != '土'
  end
end

puts this_month_calendar.to_json

JSON 벗기기

$ ruby calendar.rb |jq .

Flex Message Simulator로 확인

생성 된 JSON을 복사하면 시작 캡처와 같은 캘린더를 볼 수 있습니다.

Flex Message Simulator 로 확인할 때는, contents 이하의 "type": "bubble" 로부터를 copipe 한다

REF

htps : //에서 ゔぇぺぺrs. 네. 메/쟈/도 cs/메사긴 g-아피/우신 g-fぇx-메사게 s/

ぇぺぺrs. 네. 메/안녕/fx/

함께 읽고 싶다.