0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

LINEBotでアニメーション画像を送信する新機能を試してみた【Flex Message Update 2】

概要

Flex Message Update 2リリースに関する記事
スクリーンショット 2020-12-14 18.25.58.png
先日の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スタンプを作るという記事を読みながら作成しました。
アニメーションなんて作ったことないので全くの初心者です。

▼こんなかんじでアニメーションを作ります
スクリーンショット 2020-12-14 18.31.54.png
▼ファイル > 書き出し > ムービーの書き出し
スクリーンショット 2020-12-14 18.32.41.png
▼適当に保存するファイルを作成してそこにPNGで保存します

▼幅と高さはLINEスタンプの規定のサイズに則って320px ✖︎ 270pxで書き出します。その他設定は以下参考。

▼たくさんPNGが書き出されたのが確認できます。

▼APNGの変換には以下のアプリを使います。アニメ画像に変換する君公式サイト

▼アプリを開いてみたらこんな感じ > ファイルを選択

PNGファイルを選択する
⚠️LINEスタンプのルールが厳しい → LINEスタンプ制作ガイドライン

  • フレーム数が5~20であること
  • 再生時間は1秒,2秒,3秒,4秒のみで1.5秒などの端数は不可 etc... スクリーンショット 2020-12-14 18.45.41.png

アニメ画像を保存するボタンからAPNGファイルを生成

完成!!

画像URLを発行する

とりあえず作ったAPNGファイルを画像URLにしたかったのでs3にアップロードしてURLを発行しました。

FlexMessageを作る

現時点のLINEBot Designerではまだ対応していなかったのでWebの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のメッセージの中にアニメーションを付けられるようになったのはとても面白いと思います。
アニメーションにももっと挑戦して面白いLINEbotが作れるようになりたいです!

参考にした記事

Adobe CCでLINEスタンプを作る
アニメ画像に変換する君
LINEスタンプ制作ガイドライン

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?