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
   

   View Slide

2. {
   name: "Shimpei Makimoto",
   affiliation: "COOKPAD Inc., Tokyo, Japan",
   twitter: "@makimoto",
   github: "@makimoto",
   }
   self.inspect
   

   View Slide

3. The Pragmatic Glitch @ RubyKaigi 2013 lightning talks
   

   View Slide

4. today’s my talk is
   not glitch but animated GIF
   

   View Slide

5. View Slide

6. ImageMagick
   

   View Slide

7. $ convert a.jpg b.jpg c.jpg output.gif
   convert
   (why is it named so popular verb...)
   

   View Slide

8. RMagick
   

   View Slide

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")
   

   View Slide

10. `gem install gifanime`
    a wrapper for RMagick’s animated GIF feature
    

    View Slide

11. `gem install gifanime`
    a wrapper for RMagick’s animated GIF feature
    

    View Slide

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!
    

    View Slide

13. if you never want to install ImageMagick,
    

    View Slide

14. Animated GIFs by cURL
    http://gifanime.makimoto.org
    

    View Slide

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
    

    View Slide

16. View Slide

17. $ curl -XPOST -F "files[]=@a.jpg" -F "files[]=@b.jpg" -F "files[]=@c.jpg"
    http://gifanime.makimoto.org > output.gif
    

    View Slide

18. View Slide

19. View Slide

20. pragmatic?
    

    View Slide

21. ...
    

    View Slide

22. In a case of headless browser
    testing
    

    View Slide

23. http://makimoto.github.io/rubyconf2013_lt_sample.html
    https://github.com/makimoto/feature_spec_with_animation
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. https://raw.github.com/makimoto/feature_spec_with_animation/master/sample.gif
    

    View Slide

28. Wrap up
    • Gif anime is almost good.
    

    View Slide

29. Wrap up
    • Gif anime is almost good.
    • Gif anime is easily to make.
    

    View Slide

30. Wrap up
    • Gif anime is almost good.
    • Gif anime is easily to make.
    • Gif anime is (sometimes) useful.
    

    View Slide

31. Shimpei Makimoto (@makimoto)
    One of RubyConf 2013 Lightning Talks
    Thank you.
    The Pragmatic Animated GIF in Ruby
    ϧϏʔʹΑΔ࣮ફతͳδϑΞχϝ
    

    View Slide