Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Pragmatic Glitch (#rubykaigi 2013 LT)
Search
Shimpei Makimoto
May 31, 2013
Design
4
3.2k
The Pragmatic Glitch (#rubykaigi 2013 LT)
one of lightning talks in RubyKaigi 2013
31st May, 2013
Shimpei Makimoto
May 31, 2013
Tweet
Share
More Decks by Shimpei Makimoto
See All by Shimpei Makimoto
How to Work with Legacy Ruby on Rails Applications in Treasure Data
makimoto
1
1.4k
JPEG を壊す話 / About JPEG corruption
makimoto
0
260
Training for New Graduates in Cookpad (Shitei Todan 2015)
makimoto
0
6.1k
How to read code
makimoto
0
1.4k
Glitch, OSS activities, and so on (Oedo RubyKaigi 04 #oedo04)
makimoto
5
1.3k
The Pragmatic Animated GIF in Ruby (a RubyConf 2013 lightning talk)
makimoto
0
500
グリッチについて話をします。 #wedding_s
makimoto
3
550
chiyahoya.me
makimoto
0
310
Recipes of Recipe Search
makimoto
5
1.4k
Other Decks in Design
See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
420
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
210
Design System for training program
mct
0
160
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
380
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
410
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
260
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
450
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
290
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
750
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
980
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Producing Creativity
orderedlist
PRO
341
39k
Scaling GitHub
holman
458
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Speed Design
sergeychernyshev
25
670
Designing Experiences People Love
moore
138
23k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Site-Speed That Sticks
csswizardry
2
190
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Transcript
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ͱ͍͏Λ͠·͢ɻ
ӳޠͰൃද͢ΔͷͰຊޠͷࣈນΛ͍Ε·ͨ͠ɻ I talk it in (poor) English, so I added
Japanese subs.
self ·ͣࣗݾհ͔Βɻ
Shimpei Makimoto / ຊ৻ฏ https://{github,twitter}.com/makimoto photo by mirakui ຊ৻ฏͱ͍͍·͢ɻ 5XJUUFS(JU)VCͰ!NBLJNPUPͱ͍͏ΞΧϯτ໊Ͱ͢ɻ
We’re hiring http://info.cookpad.com/jobs http://info.cookpad.com/en ΫοΫύου͔Βདྷ·ͨ͠ɻ ͨͩ͠ɺ͜ͷൃදࢲͷޏ༻ओͱؔ͋Γ·ͤΜɻ
Glitch ͦΕͰάϦονͷͰ͢ɻ άϦονͱԿͰ͠ΐ͏͔ʁ
me ͜ΕࢲͰ͢ɻ
me me (in glitch) ͜ΕࢲͰ͢ɻͨͩ͠άϦον͍ͯ͠·͢ɻ
It’s Glitch ͜Ε͕άϦονͰ͢ɻ͓Θ͔ΓͰ͢Ͷʁ
How? Ͳ͏ͬͯ͜ΕΛ࣮ݱ͍ͯ͠ΔͷͰ͠ΐ͏ʁͱͯ؆୯Ͱ͢ɻ
sed ‘s/a/b/g’ original.jpg > glitch.jpg ͜Ε͚ͩͰ͢ɻTFEΛͬͯจࣈBΛจࣈCʹஔ͖͍͑ͯ·͢ɻ
sed(1) glitch ͜ΕΛҰൠʹTFEάϦονͱ͍͍·͢ɻ
Ruby 3VCZΛͬͯͳ͍ʁͦ͏Ͱ͢ͶɻͰ3VCZΛͬͯΈ·͢ɻ
ruby as better sed ·ͣΑΓྑ͍TFEͱͯ͠SVCZΛ͍·͢ɻ
ruby -e 'print ARGF.read.force_encoding("ascii-8bit").gsub("a", "b")' original.jpg > glitch.jpg ͍͍ͩͨ͜ΜͳϫϯϥΠφʔͰઌ΄Ͳͷͷͱಉ͜͡ͱ͕࣮ݱͰ͖·͢ɻ
ruby --external-encoding=ascii-8bit -e 'print ARGF.read.gsub("a", "b")' original.jpg > glitch.jpg ͪΖΜ͓ΈͰ͜Μͳײ͡ʹ͍͍ͯ͠Ͱ͢ɻ
me me (in glitch) ͍ͣΕʹ͠ΖάϦονͨ͠ը૾͕࡞͞Ε·͢ɻ
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 ͍ͬͺ͍ը૾͕΄͚͠Ε͜ΜͳίʔυΛॻ͍͍͍ͯͰ͢ɻ
͜Μͳײ͡Ͱը૾͕େྔʹ࡞͞Ε·͢ɻ
៉ྷͰ͢Ͷɻ
Glitch in web applications ͯ͞ɺ͔͜͜Βগ͠Ԡ༻دΓͷΛ͠·͢ɻ ΣϒΞϓϦέʔγϣϯΛྫʹ͠·͠ΐ͏ɻ
Rubyistokei ͓ͦΒ͘Έͳ͞Μ3VCZJTUPLFJΛ͝ଘͩͱࢥ͍·͢ɻ
͜ΕͰ͢ɻ
I apologize before a demo ͋Β͔͡Ί֤ؔҐʹँΓ·͢ɻ
Let’s break Rubyistokei ͦΕͰ3VCZJTUPLFJΛյ͠·͠ΐ͏ɻ
Glitch Rubyistokei 3VCZJTUPLFJ͔ΒϑΥʔΫͤ͞ɺ (MJUDI3VCZJTUPLFJΛ࡞Γ·ͨ͠ɻ ແஅͰ
http://glitch-rubyistokei.herokuapp.com
إ͕ݟ͑ͨ΄͏͕ྑ͍ͱࢥͬͨͷͰɺ ͜Μͳײ͡Ͱ͚ͩյ͢ͱ͍͏͜ͱΛͯ͠Έ·ͨ͠ɻ
How? ͜Ε͕ͲͷΑ͏ʹ࣮ݱ͞Ε͍ͯΔ͔ɺ ιʔείʔυΛݟͯΒ͏ͷ͕ૣ͍Ͱ͢ɻ
3VCZJTUPLFJ4JOBUSBΞϓϦέʔγϣϯͰ͢ɻ ը૾Λյ͢ϝιουΛՃͯͦ͠ΕΛද͍ࣔͤͯ͞·͢ɻ
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 ͬ͟ͱݟͯΒͬͨΒΘ͔ΔΜͰ͕͢ɺ؆୯ͳϩδοΫͰ͢ɻ
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 ը૾ϑΝΠϧΛಡΈࠐΜͰɺͭͷϒϩοΫʹΘ͚·͢ɻ
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͠·ͯग़ྗ͠·͢ɻ
ͦΕʹΑͬͯ͜ͷΑ͏ʹ͚ͩյΕͨը૾͕ੜͰ͖·͢ɻ
https://github.com/makimoto/rubyistokei/tree/glitch ͜ͷϒϥϯν͜ͷ63-Ͱެ։͞Ε͍ͯ·͢ɻ
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
Wrapping up ·ͱΊ·͢ɻ
Glitch is quick and easy Glitch is useful for web
applications (JPEG is good) ͱ͍͏͜ͱͰɺάϦονૉૣ͘Ͱ͖ͯ؆୯Ͱ͢ɻ ΣϒΞϓϦέʔγϣϯͱͷੑߴ͍Ͱ͢ɻͥͻࢼ͍ͯͩ͘͠͞ɻ You can try it!!1;
The Pragmatic Glitch one of lightning talks in RubyKaigi 2013
| 31st May, 2013 Shimpei Makimoto https://github.com/makimoto https://twitter.com/makimoto