2014.8.28 YAPC::Asia 2014 前夜祭

1. ttyrecからGIFアニメ
を作る話
2014.8.28 YAPC::Asia 2014 前夜祭
すぎゃーん (@sugyan)

2. Self Introduction
• ID: sugyan
• Lang: Perl, JavaScript, Go, …
• Location: Hikarie
• Faction: Enlightened

3. ttyrec?
“ttyrec is a tty recorder. Recorded
data can be played back with the
included ttyplay command.”
2000-12-27: ttyrec 1.0 Released
http://0xcc.net/ttyrec/index.html

4. 何がしたいか
• ターミナル操作を紹介したい
• pecoなど便利なツールの良さを伝える
• 実際の操作を見せるのが一番
• blogに貼るにはGIFアニメがお手頃

5. 既存のもの
• LICEcap, Gifzo などのアプリケーション
• 範囲を指定して録画、共有
• とても汎用的
• Linuxは…？

6. 既存のもの
• ttygif
• https://github.com/icholy/ttygif
• ttyrecの録画を再生しながらcapture
• ImageMagickを使ってGIF生成

7. 突然のGo
• https://github.com/sugyan/ttygif
• ttyplay & capture & generate GIF
• ImageMagick依存なく全部Goで出来る
• 作ってみたくなった

8. スクショ不要論
“ttygifとその系列、端末マニアではない人の95%く
らいのユースケースでは端末に依存するシーケンスと
か流さないだろうし、色とかが微妙に違ってもそこが
主眼じゃないと思うので、単純に内部に端末を持って
ダイレクトにGIFを吐ければ良くて、いちいちスクリー
ンショト取るの筋悪ではないの？”

9. スクショ不要論
• さっそく作られた
• https://github.com/saitoha/seq2gif
• 自分でも作った
• https://github.com/sugyan/ttyrec2gif

10. そしてWebへ
• 全部、JavaScriptでも出来るのでは
• ttyrecレコードの解析
• 内部での端末エミュレート、描画
• GIF生成

11. そしてWebへ
• 全部、JavaScriptでも出来るのでは
• https://github.com/chjj/term.js
• https://github.com/niklasvh/html2canvas
• https://github.com/jnordberg/gif.js

12. そしてWebへ
• http://ttyrec2gif.herokuapp.com/
• Drag&Dropでttyrecordを受け取り
• JavaScriptだけでGIF生成まで完結
• デモ

13. そしてWebへ
• Webを使う利点: UIを作りやすい
• 色やサイズやフォントなどのカスタマイズ
• Frameの間引きやDelay調整
• 仕上がり確認や共有もしやすい

14. そしてWebへ
• サーバ側がやること無い…
• 成果物を保存するくらい？

15. 引き続き作っていきます
ご意見・アイデアなど お寄せください