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

#概要
[Flex Message Update 2リリースに関する記事](https://developers.line.biz/ja/news/2020/10/08/flex-message-update-2-released/)
![スクリーンショット 2020-12-14 18.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/dfe26d6b-4496-270b-ca94-a87af2b64e00.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スタンプを作る](https://blogs.adobe.com/japan/animate-cc-animation-stamp-5-apng/)という記事を読みながら作成しました。
アニメーションなんて作ったことないので全くの初心者です。

▼こんなかんじでアニメーションを作ります
![スクリーンショット 2020-12-14 18.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/5c21741d-87db-40be-3cd1-842ef68925e2.png)
▼ファイル > 書き出し > ムービーの書き出し
![スクリーンショット 2020-12-14 18.32.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8b19a5f2-c8db-4170-d5a1-9257022ccfb3.png)
▼適当に保存するファイルを作成してそこに`PNG`で保存します
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/67e2958b-6071-d0ae-9483-fda6f6939936.png' width=80%>
▼幅と高さはLINEスタンプの規定のサイズに則って`320px ✖︎ 270px`で書き出します。その他設定は以下参考。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/18741a5e-2e7d-fd5b-24c6-0c5a93f36731.png' width=50%>
▼たくさん`PNG`が書き出されたのが確認できます。
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/cd04efc2-0f60-b9c2-0a1b-5c695cdcf9c4.png' width=80%>

▼APNGの変換には以下のアプリを使います。[アニメ画像に変換する君公式サイト](https://ics.media/entry/12746/)
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/8c7d1884-621b-fa50-d05d-a6ca3618cb9d.png' width=80%>
▼アプリを開いてみたらこんな感じ > ファイルを選択
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/51929551-55d0-6e07-db4a-0d5996ac387a.png' width=80%>

▼`PNG`ファイルを選択する
⚠️LINEスタンプのルールが厳しい → [LINEスタンプ制作ガイドライン](https://creator.line.me/ja/guideline/animationsticker/detail/)

- フレーム数が5~20であること
- 再生時間は1秒,2秒,3秒,4秒のみで1.5秒などの端数は不可 etc...
![スクリーンショット 2020-12-14 18.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/991dda83-7649-eecf-fa84-2a1e015ebe09.png)

▼`アニメ画像を保存する`ボタンから`APNG`ファイルを生成
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/ba7ca2db-e583-21e0-0894-9ce78126c054.png' width=60%>


###完成!!
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/b9b1f3c9-b8bc-eaa4-5d75-4868ee3f1fbd.png' width=４0%>


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

#FlexMessageを作る
現時点のLINEBot Designerではまだ対応していなかったのでWebの[flex-simulator](https://developers.line.biz/flex-simulator)を使って作成しました。


<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/13ce3bf6-3f34-7a7d-36da-951cd302bca1.png' width=80%>

```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の実装については私の過去の記事をご覧ください[こちら](https://qiita.com/inoue2002/items/a87df2b520f8b6e37f42)

最近ジェネレーターで作成したJSONをそのままLINEBotにコピペしても動かず、[Flexメッセージが送れないとき](https://qiita.com/inoue2002/items/2c3257738edb7b4e3379)の記事に書かれているように以下の通りに`type flex`を付けないといけません。

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

#成果物
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これはすごい🎉<br>LINEBotでメッセージの中を動かせるようになったの試して見たら無事動いた！<br>APNGってやつ初めてしたけどGifより高画質になったやつなのね...<br>これきっかけにLINEスタンプも作って見よかな🤭<br> <a href="https://twitter.com/hashtag/lineapi?src=hash&amp;ref_src=twsrc%5Etfw">#lineapi</a> <a href="https://twitter.com/hashtag/linedc?src=hash&amp;ref_src=twsrc%5Etfw">#linedc</a> <a href="https://t.co/ZHgWqH93CB">pic.twitter.com/ZHgWqH93CB</a></p>&mdash; ようかん / Yosuke Inoue (@inoue2002) <a href="https://twitter.com/inoue2002/status/1338410968922038272?ref_src=twsrc%5Etfw">December 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




#最後に
LINEBotのメッセージの中にアニメーションを付けられるようになったのはとても面白いと思います。
アニメーションにももっと挑戦して面白いLINEbotが作れるようになりたいです！

#参考にした記事
[Adobe CCでLINEスタンプを作る](https://blogs.adobe.com/japan/animate-cc-animation-stamp-5-apng/)
[アニメ画像に変換する君](https://ics.media/entry/12746/)
[LINEスタンプ制作ガイドライン](https://creator.line.me/ja/guideline/animationsticker/detail/)