Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React と 画像
ymrl
March 11, 2016
Programming
0
1.2k
React と 画像
途中で出てくるデモはこちらです
http://ymrl.github.io/lgtm-editor/
ymrl
March 11, 2016
Tweet
Share
More Decks by ymrl
See All by ymrl
やっぱりやりたいのはUIデザインだった
ymrl
0
4.1k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
600
開発チームみんなで取り組むアクセシビリティ
ymrl
0
610
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
660
Web技術基礎 for インターン
ymrl
0
4.1k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
81
Webエンジニアとして いま知っておきたい Webアクセシビリティ
ymrl
3
500
世界を変えるための デザインシステム (アクセシビリティ編)
ymrl
1
4.5k
インクルーシブな製品開発とリモートワークの職場環境
ymrl
1
4.2k
Other Decks in Programming
See All in Programming
Swift Observation
shiz
3
250
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
870
Git Rebase
bkuhlmann
10
1.2k
はてなリモートインターンシップ2022 インフラ 講義資料
hatena
4
2.1k
PHPDocにおける配列の型定義を少し知る
shimabox
1
120
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
130
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
700
eBPF와 함께 이해하는 Cilium 네트워킹
hadaney
3
830
Quarto Tips for Academic Presentation
nicetak
0
900
OSC大阪 パスワード認証は人類には早すぎる ~ IDaaSを使ったソーシャルログインのすすめ ~
authyasan
0
180
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.3k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1351
200k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Designing for Performance
lara
600
65k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
What's new in Ruby 2.0
geeforr
336
30k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Six Lessons from altMBA
skipperchong
15
2.3k
Designing for humans not robots
tammielis
245
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Designing with Data
zakiwarfel
91
4.2k
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ͷ૬खΛ͢ΔͷͭΒ͍
͝ਗ਼ௌ͋Γ͕ͱ ͏͍͟͝·ͨ͠