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

React と 画像

Avatar for ymrl ymrl
March 11, 2016
Programming
0
1.4k

React と 画像

途中で出てくるデモはこちらです http://ymrl.github.io/lgtm-editor/
Avatar for ymrl

ymrl

March 11, 2016
Tweet

More Decks by ymrl

See All by ymrl
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
Avatar for ymrl ymrl
2
230
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
Avatar for ymrl ymrl
0
16
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
Avatar for ymrl ymrl
0
19
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
Avatar for ymrl ymrl
0
48
がんばらないアクセシビリティ / Accessibility Without the Struggle
Avatar for ymrl ymrl
0
30
Webサイトのアクセシビリティにどう向き合う？ / How Should We Approach Web Accessibility?
Avatar for ymrl ymrl
0
88
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
Avatar for ymrl ymrl
1
1.2k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
Avatar for ymrl ymrl
0
23k
「Webアプリケーションアクセシビリティ」著者の会社 （freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ？
Avatar for ymrl ymrl
3
23k

Other Decks in Programming

See All in Programming
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
890
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
14
2.6k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
Avatar for kesoji kesoji
0
230
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
780
Discover Metal 4
Avatar for rei rei315
2
140
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
250
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
850
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
2
10k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
Avatar for yosh_yumyum yoshyum
3
1k
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
650
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
1
180
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
Avatar for 岡本秀明 h_okkah
0
170

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
970
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
820
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

Transcript

  1. Reactͱը૾ Gotanda.js #3 @ymrl

  2. ςΩετ ࣗݾ঺հ ▸ @ymrl (Twitter, GitHub, etc…) ▸ freeeͱ͍͏ձࣾͰڅ༩ܭࢉαʔϏεΛ࡞͍ͬͯ·͢

  3. ςΩετ LGTMize ▸ 1೥΄Ͳલʹࡶʹ࡞ͬͨChrome֦ு ▸ ը૾΍ϏσΦΛӈΫϦοΫͯ͠LGTMͬͯจࣈΛࡌͤͯอଘ ▸ ࣾ಺ͷԁ׈ͳίϛϡχέʔγϣϯʹʢݸਓతʹ͸ʣศར

  4. http://bylines.news.yahoo.co.jp/kohyoungki/20151012-00050386/

  5. ςΩετ Canvasཁૉ ▸ ͍ΘΏΔHTML5ͷՖܗͬΆ͍΍ͭ ▸ 2࣍ݩϏοτϚοϓը૾͕ѻ͑Δ ▸ ศརͳΑ͏Ͱ͚ͬ͜͏໘౗͍͘͞ ▸ ྑ͘΋ѱ͘΋ϏοτϚοϓ

  6. react-canvas

  7. ςΩετ react-canvas ▸ ReactͰը૾͕࡞ΕΔͧʂʂʂ ▸ Textͱ͔Imageͱ͔Layerͱ͔࢖ͬͯը૾࡞ΕΔ ▸ CSSͬΆ͍ObjectΛ౉ͯ͠ελΠϧΛௐ੔ ▸ ຊདྷ͸ߴ଎ͳಈ࡞ͷUIΛ࡞ΔͨΊʹ࡞ΒΕͨͬΆ͍งғؾ

    ▸ mouse/touchܥΠϕϯτ΋͍͔࣮ͭ͘૷͞ΕͯΔ
  8. None
  9. None

  10. DEMO

  11. إೝࣝ

  12. إʹจࣈ͕͔͔ Δͷ͸ආ͚͍ͨ

  13. ςΩετ ccv ▸ CݴޠͷϥΠϒϥϦ͚ͩͲJSʹҠ২͞ΕͯΔ ▸ إೝࣝͰ͖Δ ▸ Web Worker࢖͑Δʢ࢖ͬͯͳ͍ʣ ▸

    npmͱ͔ීٴͯ͠ͳ͍ࠒͷϒπͳͷͰద౰ʹམͱ͖ͯͨ͠ ϑΝΠϧΛ഑ஔͯ͠࢖͏

  14. http://www.asahi.com/articles/ASHB75GGFHB7UTFK00G.html

  15. http://www.asahi.com/articles/ASHB75GGFHB7UTFK00G.html

  16. None
  17. None

  18. ςΩετ إΛආ͚Δ ▸ ݩͷը૾͔ΒإͷҐஔͰۣܗΛ੾͍ͬͯͬͨ࢒Γͷ͏ͪ
 Ұ൪޿͍৔ॴʹ഑ஔ ▸ ReactCanvasͷϊʔυΛ౉͢ͱനࠇԽ͞Εͯ͠·ͬͨΓ͢Δ ▸ ͍ͬͯ͏͔͜Ε͋Μ·ΓReactؔ܎ͳ͍ ▸

    ؾܰʹCanvasΛॻ͖௚ͤΔͷ͸ྑ͍

  19. GIF

  20. animated GIF

  21. ςΩετ gif ▸ Canvasཁૉʹॻ͖ग़͢ͱ1ίϚ໨ ▸ toDataURL() Ͱ͖ͳ͍ ▸ ʢαϒϚϦϯಛڐͬͯͲ͏ͳͬͨΜͰ͚ͨͬ͠ʣ

  22. ςΩετ readwrite-gif ▸ EncoderͱDecoder͕ೖͬͯΔ ▸ 1ίϚͣͭImageDataͰಡΈग़ͤͨΓ͢Δ ▸ Encoder͸ gif.jsify ͷ΄͏͕ଟػೳ͔΋……

    ▸ ίϚ͝ͱʹ௕͞Λม͑ͨΓͰ͖ͦ͏

  23. GIF ΛಡΉ

  24. None
  25. None

  26. ࠶ੜ

  27. None

  28. શϑϨʔϜඳը
 ͠ͳ͖Όμϝ

  29. None

  30. ग़ྗ

  31. ςΩετ શϑϨʔϜͷը૾σʔλ͕΄͍͠ ▸ setState()ͰϑϨʔϜΛ1ͭͣͭඳը͍ͯ͘͠ͷ͸೉͍͠ ▸ ࠶ඳըͷλΠϛϯά͕Α͘Θ͔Βͳ͍ ▸ ࠶ੜ͠ͳ͕Βඳը݁ՌΛอଘ͚ͯ͠͹Α͍ͷͰ͸ʁ ▸ componentDidUpdate

    Ͱద౰ʹಥͬࠐΜͰ͍͘
  32. None
  33. None

  34. ͳΜͱ͔ग़ͤΔΑ ͏ʹ͸ͳͬͨͧ

  35. ςΩετ ·ͱΊ ▸ animated GIFͷ૬खΛ͢Δͷ͸ͭΒ͍

  36. ͝ਗ਼ௌ͋Γ͕ͱ ͏͍͟͝·ͨ͠