Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ttyrecからGIFアニメを作る話

2,272 views

Published on

2014.8.28 YAPC::Asia 2014 前夜祭

Published in: Technology
  • Be the first to comment

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. 引き続き作っていきます ご意見・アイデアなど お寄せください

×