The Pragmatic Animated GIF in Ruby (a RubyConf 2013 lightning talk)

one of lightning talks at RubyConf 2013, Miami Beach, FL, US
9th Nov, 2013

Transcript

1. The Pragmatic Animated GIF in Ruby ϧϏʔʹΑΔ࣮ફతͳδϑΞχϝ Shimpei Makimoto (@makimoto) One of RubyConf 2013 Lightning Talks
2. { name: "Shimpei Makimoto", affiliation: "COOKPAD Inc., Tokyo, Japan", twitter: "@makimoto", github: "@makimoto", } self.inspect
3. The Pragmatic Glitch @ RubyKaigi 2013 lightning talks
4. today’s my talk is not glitch but animated GIF
6. ImageMagick
7. $ convert a.jpg b.jpg c.jpg output.gif convert (why is it named so popular verb...)
8. RMagick
9. require "RMagick" list = Magick::ImageList.new( "/path/to/a.png", "/path/to/b.png", "/path/to/c.png" ) list.write("/path/to/output.gif")
10. `gem install gifanime` a wrapper for RMagick’s animated GIF feature
11. `gem install gifanime` a wrapper for RMagick’s animated GIF feature
12. require "gifanime" gifanime = Gifanime.new("/path/to/output.gif") gifanime.add "/path/to/a.png" gifanime.add "/path/to/b.png" gifanime.add "/path/to/c.png" gitanime.generate!
13. if you never want to install ImageMagick,
14. Animated GIFs by cURL http://gifanime.makimoto.org
15. class GifAnime < Sinatra::Base get "/" do haml :index end post "/" do begin files = params[:files].map {|file| file[:tempfile] } rescue halt 401, "401: invalid parameters, maybe\n" end begin image = Magick::ImageList.new(*files.map(&:path)) rescue halt 405, "405: invalid image files, maybe\n" end content_type "image/gif" tempfile = Pathname.new(Tempfile.new(["", ".gif"])) image.write(tempfile) tempfile.read end end
17. $ curl -XPOST -F "files[]=@a.jpg" -F "files[]=@b.jpg" -F "files[]=@c.jpg" http://gifanime.makimoto.org > output.gif
20. pragmatic?
21. ...
22. In a case of headless browser testing
23. http://makimoto.github.io/rubyconf2013_lt_sample.html https://github.com/makimoto/feature_spec_with_animation
24. describe "sample.html", type: :feature do it "shows one message and toggles by the button", js: true do visit '/sample.html' page.should have_css(".contents div", count: 1) page.should have_css ".en" click_button "Change" page.should have_css(".contents div", count: 1) page.should have_css ".ja" click_button "Change" page.should have_css(".contents div", count: 1) page.should have_css ".kr" click_button "Change" page.should have_css(".contents div", count: 1) page.should have_css ".km" click_button "Change" page.should have_css(".contents div", count: 1) page.should have_css ".en" end end
25. require "gifanime" class ScreenRecorder attr_accessor :gifanime, :tmpdir def initialize(output) @gifanime = Gifanime.new(output, delay: 40) @tmpdir = Dir.mktmpdir end def add(page) file = "#{tmpdir}/#{gifanime.frames.size}.gif" page.save_screenshot(file) gifanime.add(file) end def generate! gifanime.generate! end end
26. describe "sample.html", type: :feature do before(:all) do @rec = ScreenRecorder.new("sample.gif") end after(:all) do @rec.generate! end it "shows one message and toggles by the button", js: true do visit '/sample.html' @rec.add(page) page.should have_css(".contents div", count: 1) page.should have_css ".en" click_button "Change" @rec.add(page) # ... end end
27. https://raw.github.com/makimoto/feature_spec_with_animation/master/sample.gif
28. Wrap up • Gif anime is almost good.
29. Wrap up • Gif anime is almost good. • Gif anime is easily to make.
30. Wrap up • Gif anime is almost good. • Gif anime is easily to make. • Gif anime is (sometimes) useful.
31. Shimpei Makimoto (@makimoto) One of RubyConf 2013 Lightning Talks Thank you. The Pragmatic Animated GIF in Ruby ϧϏʔʹΑΔ࣮ફతͳδϑΞχϝ