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

The Pragmatic Glitch (#rubykaigi 2013 LT)

The Pragmatic Glitch (#rubykaigi 2013 LT)

one of lightning talks in RubyKaigi 2013
31st May, 2013

Shimpei Makimoto

May 31, 2013
Tweet

More Decks by Shimpei Makimoto

Other Decks in Design

Transcript

  1. The Pragmatic Glitch
    Shimpei Makimoto
    https://github.com/makimoto
    https://twitter.com/makimoto
    one of lightning talks in RubyKaigi 2013 | 31st May, 2013
    Έͳ͞Μ͜Μʹͪ͸ɻ
    5IF1SBHNBUJD(MJUDIͱ͍͏࿩Λ͠·͢ɻ

    View full-size slide

  2. ӳޠͰൃද͢ΔͷͰ೔ຊޠͷࣈນΛ͍Ε·ͨ͠ɻ
    I talk it in (poor) English, so I added Japanese subs.

    View full-size slide

  3. self
    ·ͣࣗݾ঺հ͔Βɻ

    View full-size slide

  4. Shimpei Makimoto / ຀ຊ৻ฏ
    https://{github,twitter}.com/makimoto
    photo by mirakui
    ຀ຊ৻ฏͱ͍͍·͢ɻ
    5XJUUFS΍(JU)VCͰ͸!NBLJNPUPͱ͍͏ΞΧ΢ϯτ໊Ͱ͢ɻ

    View full-size slide

  5. We’re hiring
    http://info.cookpad.com/jobs
    http://info.cookpad.com/en
    ΫοΫύου͔Βདྷ·ͨ͠ɻ
    ͨͩ͠ɺ͜ͷൃද͸ࢲͷޏ༻ओͱ͸ؔ܎͋Γ·ͤΜɻ

    View full-size slide

  6. Glitch
    ͦΕͰ͸άϦονͷ࿩Ͱ͢ɻ
    άϦονͱ͸ԿͰ͠ΐ͏͔ʁ

    View full-size slide

  7. me
    ͜Ε͸ࢲͰ͢ɻ

    View full-size slide

  8. me me (in glitch)
    ͜Ε΋ࢲͰ͢ɻͨͩ͠άϦον͍ͯ͠·͢ɻ

    View full-size slide

  9. It’s Glitch
    ͜Ε͕άϦονͰ͢ɻ͓Θ͔ΓͰ͢Ͷʁ

    View full-size slide

  10. How?
    Ͳ͏΍ͬͯ͜ΕΛ࣮ݱ͍ͯ͠ΔͷͰ͠ΐ͏ʁͱͯ΋؆୯Ͱ͢ɻ

    View full-size slide

  11. sed ‘s/a/b/g’ original.jpg > glitch.jpg
    ͜Ε͚ͩͰ͢ɻTFEΛ࢖ͬͯจࣈBΛจࣈCʹஔ͖׵͍͑ͯ·͢ɻ

    View full-size slide

  12. sed(1) glitch
    ͜ΕΛҰൠʹTFEάϦονͱ͍͍·͢ɻ

    View full-size slide

  13. Ruby
    3VCZΛ࢖ͬͯͳ͍ʁͦ͏Ͱ͢ͶɻͰ͸3VCZΛ࢖ͬͯΈ·͢ɻ

    View full-size slide

  14. ruby as better sed
    ·ͣ͸ΑΓྑ͍TFEͱͯ͠SVCZΛ࢖͍·͢ɻ

    View full-size slide

  15. ruby -e 'print
    ARGF.read.force_encoding("ascii-8bit").gsub("a",
    "b")' original.jpg > glitch.jpg
    ͍͍ͩͨ͜ΜͳϫϯϥΠφʔͰઌ΄Ͳͷ΋ͷͱಉ͜͡ͱ͕࣮ݱͰ͖·͢ɻ

    View full-size slide

  16. ruby --external-encoding=ascii-8bit -e 'print
    ARGF.read.gsub("a", "b")' original.jpg > glitch.jpg
    ΋ͪΖΜ͓޷ΈͰ͜Μͳײ͡ʹͯ͠΋͍͍Ͱ͢ɻ

    View full-size slide

  17. me me (in glitch)
    ͍ͣΕʹ͠ΖάϦονͨ͠ը૾͕࡞੒͞Ε·͢ɻ

    View full-size slide

  18. data = ARGF.read.force_encoding('ascii-8bit')
    36.times do |from|
    from = from.to_s(36)
    36.times do |to|
    to = to.to_s(36)
    open("#{from}_#{to}.jpg", 'wb').write(data.gsub(from, to))
    end
    end
    ͍ͬͺ͍ը૾͕΄͚͠Ε͹͜ΜͳίʔυΛॻ͍ͯ΋͍͍Ͱ͢ɻ

    View full-size slide

  19. ͜Μͳײ͡Ͱը૾͕େྔʹ࡞੒͞Ε·͢ɻ

    View full-size slide

  20. ៉ྷͰ͢Ͷɻ

    View full-size slide

  21. Glitch in web applications
    ͯ͞ɺ͔͜͜Β͸গ͠Ԡ༻دΓͷ࿩Λ͠·͢ɻ
    ΢ΣϒΞϓϦέʔγϣϯΛྫʹ͠·͠ΐ͏ɻ

    View full-size slide

  22. Rubyistokei
    ͓ͦΒ͘Έͳ͞Μ͸3VCZJTUPLFJΛ͝ଘ஌ͩͱࢥ͍·͢ɻ

    View full-size slide

  23. I apologize before a demo
    ͋Β͔͡Ίؔ܎֤ҐʹँΓ·͢ɻ

    View full-size slide

  24. Let’s break Rubyistokei
    ͦΕͰ͸3VCZJTUPLFJΛյ͠·͠ΐ͏ɻ

    View full-size slide

  25. Glitch Rubyistokei
    3VCZJTUPLFJ͔ΒϑΥʔΫͤ͞ɺ
    (MJUDI3VCZJTUPLFJΛ࡞Γ·ͨ͠ɻ ແஅͰ

    View full-size slide

  26. http://glitch-rubyistokei.herokuapp.com

    View full-size slide

  27. إ͕ݟ͑ͨ΄͏͕ྑ͍ͱࢥͬͨͷͰɺ
    ͜Μͳײ͡Ͱ൒෼͚ͩյ͢ͱ͍͏͜ͱΛͯ͠Έ·ͨ͠ɻ

    View full-size slide

  28. How?
    ͜Ε͕ͲͷΑ͏ʹ࣮ݱ͞Ε͍ͯΔ͔͸ɺ
    ιʔείʔυΛݟͯ΋Β͏ͷ͕ૣ͍Ͱ͢ɻ

    View full-size slide

  29. 3VCZJTUPLFJ͸4JOBUSBΞϓϦέʔγϣϯͰ͢ɻ
    ը૾Λ൒෼յ͢ϝιουΛ௥Ճͯͦ͠ΕΛද͍ࣔͤͯ͞·͢ɻ

    View full-size slide

  30. get '/glitch' do
    data = open(params[:url]).read
    data_a = data[0 .. data.size / 2]
    data_b = data[data.size / 2 .. -1]
    content_type :jpeg
    data_a + data_b.force_encoding('ascii-8bit').gsub('a', 'b')
    end
    ͬ͟ͱݟͯ΋ΒͬͨΒΘ͔ΔΜͰ͕͢ɺ؆୯ͳϩδοΫͰ͢ɻ

    View full-size slide

  31. get '/glitch' do
    data = open(params[:url]).read
    data_a = data[0 .. data.size / 2]
    data_b = data[data.size / 2 .. -1]
    content_type :jpeg
    data_a + data_b.force_encoding('ascii-8bit').gsub('a', 'b')
    end
    ը૾ϑΝΠϧΛಡΈࠐΜͰɺͭͷϒϩοΫʹΘ͚·͢ɻ

    View full-size slide

  32. get '/glitch' do
    data = open(params[:url]).read
    data_a = data[0 .. data.size / 2]
    data_b = data[data.size / 2 .. -1]
    content_type :jpeg
    data_a + data_b.force_encoding('ascii-8bit').gsub('a', 'b')
    end
    ࠷ॳͷϒϩοΫ͸ͦͷ··ʹɺ࣍ͷϒϩοΫͰ͸HTVC͠·ͯग़ྗ͠·͢ɻ

    View full-size slide

  33. ͦΕʹΑͬͯ͜ͷΑ͏ʹ൒෼͚ͩյΕͨը૾͕ੜ੒Ͱ͖·͢ɻ

    View full-size slide

  34. https://github.com/makimoto/rubyistokei/tree/glitch
    ͜ͷϒϥϯν͸͜ͷ63-Ͱެ։͞Ε͍ͯ·͢ɻ

    View full-size slide

  35. def show
    respond_to do |format|
    format.html do
    # snip
    end
    format.glitch do
    data = open(IMAGES_PATH.join(params[:id]))
    data = data.force_encoding('ascii-8bit').gsub('a', 'b')
    send_data data, type: 'image/jpeg', disposition: 'inline'
    end
    end
    end
    ͪͳΈʹ3BJMTͰಉ༷ͷॲཧΛߦ͓͏ͱͨ͠Β͜Μͳײ͡ʹͳΓ·͢ɻ
    protip: Case in Rails

    View full-size slide

  36. Wrapping up
    ·ͱΊ·͢ɻ

    View full-size slide

  37. Glitch is quick and easy
    Glitch is useful for web applications
    (JPEG is good)
    ͱ͍͏͜ͱͰɺάϦον͸ૉૣ͘Ͱ͖ͯ؆୯Ͱ͢ɻ
    ΢ΣϒΞϓϦέʔγϣϯͱͷ਌࿨ੑ΋ߴ͍Ͱ͢ɻͥͻࢼ͍ͯͩ͘͠͞ɻ
    You can try it!!1;

    View full-size slide

  38. The Pragmatic Glitch
    one of lightning talks in RubyKaigi 2013 | 31st May, 2013
    Shimpei Makimoto
    https://github.com/makimoto
    https://twitter.com/makimoto

    View full-size slide