関西Node学園 3時限目 in LINE Kyoto

1. node-canvasで
アニメーションGifをつくって遊ぶぞ！
関西Node学園 LINE Kyoto 2018.08.03

2. @kawasako3
LINE株式会社 UIT室
Front-end Standardization Team
いわゆるフロントエンドエンジニアなので
Node.js詳しいかと言われると微妙
普段は東京にいます

3. 今日のテーマ
アニメーションGif

4. 今日のモチベーション
ボットからのレスンポンスで
ちょっとわくわくしたい

5. 今日の運勢は?

6. 今日の運勢は?
星5
ス
ン
ッ
いかにも
プログラム

7. 今日の運勢は?
星5
そっか…
解せぬ

8. ちょっとじらす

9. 今日の運勢は?

10. 今日の運勢は?
今日の運勢は∼∼

11. 今日の運勢は?
今日の運勢は∼∼
ドゥルルルルルル

12. 今日の運勢は?
今日の運勢は∼∼
ドゥルルルルルル
ゴクリ…

13. 今日の運勢は?
今日の運勢は∼∼
ドゥルルルルルル
ゴクリ…
バァーン！星5！

14. 今日の運勢は?
今日の運勢は∼∼
ドゥルルルルルル
ゴクリ…
バァーン！星5！
やったぜ

15. 満足度・充実感を強く感じるには
受け取った価値だけじゃなくて
自身がそれにどのくらい時間を費やしたかも大事
あまりにも簡単にゲームキャラクターが強くなるとすぐ飽きちゃう
コンビニでご飯がすぐ手に入るからついつい食べすぎちゃう = 満足感薄
だよね！

16. やっぱガチャ演出みたいのあるといいよね！
結果表示ページつくるか！

17. 今日の運勢は?

18. 今日の運勢は?
今日のあなたの運勢は
こちら https://…

19. 今日の運勢は?
今日のあなたの運勢は
こちら https://…
今日の運勢は?
今日のあなたの運勢は
こちら https://…
今日の運勢は?
今日のあなたの運勢は
こちら https://…
毎日続けた結果
なんの情報も得られない
場所になってしまう
特にLINEなどは
BOTから送られたリンクは
OGPを勝手に取りに行かない

20. |
トークルームが
現実の部屋だったとして
共通の目的があって集まって、
全員が空間を共有している中で、
リンクを踏まないと確認できないという状況、
「廊下の掲示板に結果貼っといたから
一回部屋の外行って確認してきて。」
みたいなことに感じてしまう…。
誰がいつ確認して、
誰が確認していないかわからない。
見に行くくらいどうということもないんだけど
「なんでそんな意地悪するの…」
と言う感情が湧いてきてしまう。よくない。

21. 理由がわからないことは大体ストレス
わるそうなやつも大体友達

22. トークに時間軸のあるコンテンツを
カジュアルに送りたい！
もしアニメーションGifでやってみたら…？

23. 今日の運勢は?

24. 今日の運勢は?
ジャカジャカジャカジャカ

25. 今日の運勢は?
ジャーン
⭐⭐⭐⭐⭐

26. 今日の運勢は?
⭐⭐⭐⭐⭐
今日の運勢は?
⭐⭐⭐
はい たのしい

27. やるぞ！

28. ライブラリ
Automattic/node-canvas … ☆5176 (2018年7月時点)
Node.jsでCanvasAPIっぽく画像操作するもの。
いくつかの依存パッケージをインストールする必要がある。
eugeneware/gifencoder … ☆257 (2018年7月時点)
アニメーションGifを作る。1フレーム毎にnode-canvasのcontextを渡す。

29. encoder.addFrame(ctx)
ctx.setTransform(…)
ctx.drawImage(canvas)
GIF
Encoder
encoder.finish()GIF
File
選択肢の候補を受け取って
ルーレットパネルを描画する
回転させるなどしながら
1フレームずつ描画する
GifEncoderに
contextを渡す
書き出す！

30. アニメーションの基本
1. 最初に目標値を決める
例えば10回転+ランダムな位置で停止する場合
目標値 = 360°*10 + Math.random() * 360°
2. どのくらいの長さにするか決める
滑らかにするには30FPSくらい欲しい = 5秒のアニメーションは150frame
容量と相談。今回は4秒+結果表示にして240*240の画像で1.5Mb程度
3. フレーム毎に描画する
0~1をゴールとして{現在フレーム/全体フレーム数}で算出
nフレーム目のアニメーション状態 = {目標値}*{n/全体フレーム数}
4. 変化に緩急をつける
{目標値}*{easing関数(n/全体フレーム数)}
easing関数を挟むだけ！

31. DEMO

32. LINE Messaging API
でうごかすぞ！

33. と思ったらGifアニメーション
BOTから送れなかった…
遅れるけどアニメーションしないやつ
友達には送れてたからいけるとおもったんだ…

34. めげずにffmpegでmp4作るぞ！

35. fs.writeFile(…)
ctx.setTransform(…)
ctx.drawImage(canvas)
images
ffmpeg().input(`frame-%d.png`)
MP4
File
選択肢の候補を受け取って
ルーレットパネルを描画する
回転させるなどしながら
1フレームずつ描画する
Frameごとに
画像を作る
書き出す！
…save()

36. DEMO2
(ngrokで動かしてるのでイベント当日限り)

37. 学び
1. Photo movie的なこともできちゃいそう！
2. ただし事前生成じゃないと厳しいかも
3. Messaging APIではGifアニメ使えなかった…
https://github.com/kawasako/linebot-roulette
今日のコード