개요

Flex Message Update 2 릴리스에 대한 기사

요전날의 Flex Message Update2에 의해 Flex 메시지안에 애니메이션 이미지인 APNG를 지정할 수 있게 되었으므로 시험해 보았습니다.

개발 환경

MacOS Catalina 10.15.6
Adobe Animate 21.0.1
アニメ画像に変換する君 2.1.8

APNG란?

나는 처음 이 뉴스를 보았을 때 APNG를 몰랐기 때문에 조사했습니다.

APNG(에이핑)이란 애니메이션하는 PNG 이미지로 애니메이션 GIF를 대체하는 차세대 새로운 이미지 형식입니다.

그래서 GIF의 상위 호환이군요. LINE의 스탬프는 이것으로 만드는 것 같습니다.

우선 APNG 파일 만들기

Animate CC에서 LINE 스탬프 만들기이라는 기사를 읽으면서 작성했습니다.
애니메이션은 만든 적이 없기 때문에 완전히 초보자입니다.

▼이런 간지로 애니메이션을 만듭니다

▼파일 > 내보내기 > 동영상 내보내기

▼ 적당히 저장할 파일을 작성하고 거기에 PNG 으로 저장합니다

▼ 폭과 높이는 LINE 스탬프 규정의 크기에 따라 320px ✖︎ 270px으로 내보냅니다. 기타 설정은 이하 참고.

▼ 많이 PNG이 내보낸 것을 확인할 수 있습니다.


▼APNG 변환에는 다음 앱을 사용합니다. 애니메이션 이미지로 변환하는 군 공식 사이트

▼앱을 열어보면 이런 느낌 > 파일을 선택


▼ PNG 파일 선택
⚠️LINE 스탬프 규칙이 엄격하다 → LINE 스탬프 제작 가이드라인

프레임 수가 5 ~ 20 인

재생 시간은 1초, 2초, 3초, 4초만으로 1.5초 등의 단수는 불가 etc...

▼ アニメ画像を保存する 버튼에서 APNG 파일 생성

완성!!

이미지 URL 발행

우선 만든 APNG 파일을 이미지 URL로 하고 싶었으므로 s3에 업로드하여 URL을 발행했습니다.

FlexMessage 만들기

현재 LINEBot Designer에서는 아직 지원하지 않았으므로 웹 flex-simulator을 사용하여 만들었습니다.



message.json

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "APENGテスト",
        "weight": "bold",
        "size": "xl"
      },
      {
        "type": "text",
        "text": "電話をかけています..."
      },
      {
        "type": "image",
        "url": "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/b9b1f3c9-b8bc-eaa4-5d75-4868ee3f1fbd.png",
        "animated": true
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "twitter:@inoue2002",
        "weight": "bold",
        "style": "normal",
        "decoration": "none",
        "position": "relative",
        "align": "center"
      }
    ]
  },
  "styles": {
    "footer": {
      "backgroundColor": "#d4d9df",
      "separator": true,
      "separatorColor": "#d4d9df"
    }
  }
}

메시지를 Bot에서 보냅니다.

Bot 구현에 대한 내 과거 기사를 참조하십시오 여기

최근 제너레이터로 작성한 JSON을 그대로 LINEBot에 복사해도 움직이지 않고, Flex 메시지를 보낼 수 없을 때 의 기사에 쓰여져 있듯이 이하와 같이 type flex 을 붙여야 합니다.

 {
  "type": "flex",
  "altText": "flexMessageです",
  "contents": {ここにジェネレーターで作ったJSONをコピペ}
}

아티팩트

이것은 대단한 🎉 LINEBot에서 메시지 속을 움직일 수 있게 된 것을 시험해 보면 무사동했다! APNG는 녀석 처음 했지만 Gif보다 고화질이 된 녀석이네요... 이 계기로 LINE 스탬프도 만들어 보는 게 좋겠어요 🤭 #lineapi

마지막으로

LINEBot의 메시지에 애니메이션을 적용할 수 있게 된 것은 매우 흥미롭습니다.

애니메이션에도 더 도전해 재미있는 LINEbot을 만들 수 있게 되고 싶습니다!

참고한 기사

#linedc

피 c. 라고 r. 이 m/←gWqH93CB

December 14, 2020