Download to read offline
ttyrecからGIFアニメを作る話
- 1. ttyrecからGIFアニメ を作る話 2014.8.28YAPC::Asia 2014 前夜祭 すぎゃーん (@sugyan)
- 2. Self Introduction •ID: sugyan • Lang: Perl, JavaScript, Go, … • Location: Hikarie • Faction: Enlightened
- 3. ttyrec? “ttyrec isa 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.