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
React と 画像
Search
ymrl
March 11, 2016
Programming
0
1.4k
React と 画像
途中で出てくるデモはこちらです
http://ymrl.github.io/lgtm-editor/
ymrl
March 11, 2016
Tweet
Share
More Decks by ymrl
See All by ymrl
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
4
770
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
ymrl
1
340
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
200
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
330
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
290
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
100
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
1.3k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
23k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
23k
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
140
旅行プランAIエージェント開発の裏側
ippo012
2
900
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
🔨 小さなビルドシステムを作る
momeemt
4
680
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
440
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
440
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
230
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
4 Signs Your Business is Dying
shpigford
184
22k
How to Ace a Technical Interview
jacobian
279
23k
Designing Experiences People Love
moore
142
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Being A Developer After 40
akosma
90
590k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
Reactͱը૾ Gotanda.js #3 @ymrl
ςΩετ ࣗݾհ ▸ @ymrl (Twitter, GitHub, etc…) ▸ freeeͱ͍͏ձࣾͰڅ༩ܭࢉαʔϏεΛ࡞͍ͬͯ·͢
ςΩετ LGTMize ▸ 1΄Ͳલʹࡶʹ࡞ͬͨChrome֦ு ▸ ը૾ϏσΦΛӈΫϦοΫͯ͠LGTMͬͯจࣈΛࡌͤͯอଘ ▸ ࣾͷԁͳίϛϡχέʔγϣϯʹʢݸਓతʹʣศར
http://bylines.news.yahoo.co.jp/kohyoungki/20151012-00050386/
ςΩετ Canvasཁૉ ▸ ͍ΘΏΔHTML5ͷՖܗͬΆ͍ͭ ▸ 2࣍ݩϏοτϚοϓը૾͕ѻ͑Δ ▸ ศརͳΑ͏Ͱ͚ͬ͜͏໘͍͘͞ ▸ ྑ͘ѱ͘ϏοτϚοϓ
react-canvas
ςΩετ react-canvas ▸ ReactͰը૾͕࡞ΕΔͧʂʂʂ ▸ Textͱ͔Imageͱ͔Layerͱ͔ͬͯը૾࡞ΕΔ ▸ CSSͬΆ͍ObjectΛͯ͠ελΠϧΛௐ ▸ ຊདྷߴͳಈ࡞ͷUIΛ࡞ΔͨΊʹ࡞ΒΕͨͬΆ͍งғؾ
▸ mouse/touchܥΠϕϯτ͍͔࣮ͭ͘͞ΕͯΔ
None
None
DEMO
إೝࣝ
إʹจࣈ͕͔͔ Δͷආ͚͍ͨ
ςΩετ ccv ▸ CݴޠͷϥΠϒϥϦ͚ͩͲJSʹҠ২͞ΕͯΔ ▸ إೝࣝͰ͖Δ ▸ Web Worker͑Δʢͬͯͳ͍ʣ ▸
npmͱ͔ීٴͯ͠ͳ͍ࠒͷϒπͳͷͰదʹམͱ͖ͯͨ͠ ϑΝΠϧΛஔͯ͠͏
http://www.asahi.com/articles/ASHB75GGFHB7UTFK00G.html
http://www.asahi.com/articles/ASHB75GGFHB7UTFK00G.html
None
None
ςΩετ إΛආ͚Δ ▸ ݩͷը૾͔ΒإͷҐஔͰۣܗΛ͍ͬͯͬͨΓͷ͏ͪ Ұ൪͍ॴʹஔ ▸ ReactCanvasͷϊʔυΛ͢ͱനࠇԽ͞Εͯ͠·ͬͨΓ͢Δ ▸ ͍ͬͯ͏͔͜Ε͋Μ·ΓReactؔͳ͍ ▸
ؾܰʹCanvasΛॻ͖ͤΔͷྑ͍
GIF
animated GIF
ςΩετ gif ▸ Canvasཁૉʹॻ͖ग़͢ͱ1ίϚ ▸ toDataURL() Ͱ͖ͳ͍ ▸ ʢαϒϚϦϯಛڐͬͯͲ͏ͳͬͨΜͰ͚ͨͬ͠ʣ
ςΩετ readwrite-gif ▸ EncoderͱDecoder͕ೖͬͯΔ ▸ 1ίϚͣͭImageDataͰಡΈग़ͤͨΓ͢Δ ▸ Encoder gif.jsify ͷ΄͏͕ଟػೳ͔……
▸ ίϚ͝ͱʹ͞Λม͑ͨΓͰ͖ͦ͏
GIF ΛಡΉ
None
None
࠶ੜ
None
શϑϨʔϜඳը ͠ͳ͖Όμϝ
None
ग़ྗ
ςΩετ શϑϨʔϜͷը૾σʔλ͕΄͍͠ ▸ setState()ͰϑϨʔϜΛ1ͭͣͭඳը͍ͯ͘͠ͷ͍͠ ▸ ࠶ඳըͷλΠϛϯά͕Α͘Θ͔Βͳ͍ ▸ ࠶ੜ͠ͳ͕Βඳը݁ՌΛอଘ͚ͯ͠Α͍ͷͰʁ ▸ componentDidUpdate
ͰదʹಥͬࠐΜͰ͍͘
None
None
ͳΜͱ͔ग़ͤΔΑ ͏ʹͳͬͨͧ
ςΩετ ·ͱΊ ▸ animated GIFͷ૬खΛ͢ΔͷͭΒ͍
͝ਗ਼ௌ͋Γ͕ͱ ͏͍͟͝·ͨ͠