ttyrecからGIFアニメを作る話

1,916 views
1,864 views

Published on

2014.8.28 YAPC::Asia 2014 前夜祭

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,916
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

ttyrecからGIFアニメを作る話

  1. 1. ttyrecからGIFアニメ を作る話 2014.8.28 YAPC::Asia 2014 前夜祭 すぎゃーん (@sugyan)
  2. 2. Self Introduction • ID: sugyan • Lang: Perl, JavaScript, Go, … • Location: Hikarie • Faction: Enlightened
  3. 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. 4. 何がしたいか • ターミナル操作を紹介したい • pecoなど便利なツールの良さを伝える • 実際の操作を見せるのが一番 • blogに貼るにはGIFアニメがお手頃
  5. 5. 既存のもの • LICEcap, Gifzo などのアプリケーション • 範囲を指定して録画、共有 • とても汎用的 • Linuxは…?
  6. 6. 既存のもの • ttygif • https://github.com/icholy/ttygif • ttyrecの録画を再生しながらcapture • ImageMagickを使ってGIF生成
  7. 7. 突然のGo • https://github.com/sugyan/ttygif • ttyplay & capture & generate GIF • ImageMagick依存なく全部Goで出来る • 作ってみたくなった
  8. 8. スクショ不要論 “ttygifとその系列、端末マニアではない人の95%く らいのユースケースでは端末に依存するシーケンスと か流さないだろうし、色とかが微妙に違ってもそこが 主眼じゃないと思うので、単純に内部に端末を持って ダイレクトにGIFを吐ければ良くて、いちいちスクリー ンショト取るの筋悪ではないの?”
  9. 9. スクショ不要論 • さっそく作られた • https://github.com/saitoha/seq2gif • 自分でも作った • https://github.com/sugyan/ttyrec2gif
  10. 10. そしてWebへ • 全部、JavaScriptでも出来るのでは • ttyrecレコードの解析 • 内部での端末エミュレート、描画 • GIF生成
  11. 11. そしてWebへ • 全部、JavaScriptでも出来るのでは • https://github.com/chjj/term.js • https://github.com/niklasvh/html2canvas • https://github.com/jnordberg/gif.js
  12. 12. そしてWebへ • http://ttyrec2gif.herokuapp.com/ • Drag&Dropでttyrecordを受け取り • JavaScriptだけでGIF生成まで完結 • デモ
  13. 13. そしてWebへ • Webを使う利点: UIを作りやすい • 色やサイズやフォントなどのカスタマイズ • Frameの間引きやDelay調整 • 仕上がり確認や共有もしやすい
  14. 14. そしてWebへ • サーバ側がやること無い… • 成果物を保存するくらい?
  15. 15. 引き続き作っていきます ご意見・アイデアなど お寄せください

×