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.3k
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.5k
JPEG を壊す話 / About JPEG corruption
makimoto
0
330
Training for New Graduates in Cookpad (Shitei Todan 2015)
makimoto
0
6.2k
How to read code
makimoto
0
1.6k
Glitch, OSS activities, and so on (Oedo RubyKaigi 04 #oedo04)
makimoto
5
1.4k
The Pragmatic Animated GIF in Ruby (a RubyConf 2013 lightning talk)
makimoto
0
550
グリッチについて話をします。 #wedding_s
makimoto
3
580
chiyahoya.me
makimoto
0
340
Recipes of Recipe Search
makimoto
5
1.5k
Other Decks in Design
See All in Design
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
110
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
590
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
860
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
190
体験を守るためのデザイン計測
techtekt
PRO
0
130
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
850
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
1k
TWCP#21 UXデザインと哲学のはなし
shinn
0
210
Diverse Design Team Deck
diverse
0
240
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
1
340
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
520
What makes a great Director?
_limex_
0
390
Featured
See All Featured
How to Talk to Developers About Accessibility
jct
1
86
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
130
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
31
Navigating Team Friction
lara
191
16k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
The Spectacular Lies of Maps
axbom
PRO
1
400
The SEO identity crisis: Don't let AI make you average
varn
0
39
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Optimizing for Happiness
mojombo
379
70k
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