Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shimpei Makimoto

November 09, 2013
Tweet

More Decks by Shimpei Makimoto

Other Decks in Technology

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[][email protected]" -F "files[][email protected]" -F "files[][email protected]"
    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