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

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

3e809b3e856f5eed33e279cf93657d3c?s=128

Shimpei Makimoto

November 09, 2013
Tweet

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

  5. None
  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
  16. None
  17. $ curl -XPOST -F "files[]=@a.jpg" -F "files[]=@b.jpg" -F "files[]=@c.jpg" http://gifanime.makimoto.org

    > output.gif
  18. None
  19. None
  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 ϧϏʔʹΑΔ࣮ફతͳδϑΞχϝ