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

React と 画像

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for ymrl ymrl
March 11, 2016
Programming
1.5k
0

React と 画像

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

Avatar for ymrl

ymrl

March 11, 2016

More Decks by ymrl

See All by ymrl
たのしいtable / Fun table
Avatar for ymrl ymrl
0
26
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
Avatar for ymrl ymrl
4
1.6k
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
Avatar for ymrl ymrl
1
980
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
Avatar for ymrl ymrl
0
720
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
Avatar for ymrl ymrl
1
970
がんばらないアクセシビリティ / Accessibility Without the Struggle
Avatar for ymrl ymrl
0
1.1k
Webサイトのアクセシビリティにどう向き合う？ / How Should We Approach Web Accessibility?
Avatar for ymrl ymrl
0
190
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
Avatar for ymrl ymrl
1
1.7k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
Avatar for ymrl ymrl
0
24k

Other Decks in Programming

See All in Programming
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
130
LLMは4年分のCompose移行を再現できるのか？実プロダクト279件のXMLで探る自動化の境界線
Avatar for makun makun
0
120
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
180
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
460
freeeにおけるEvalsの実践例の紹介
Avatar for freee freee
PRO
0
160
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
2
570
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.2k
源内ハンズオン概要編
Avatar for Hideyuki Nagata hideg
0
230
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
1.5k
不幸な GC
Avatar for Chen chencmd
0
840
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
220
仕様駆動開発の消費期限
Avatar for watany watany
20
9.1k

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
850
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
490
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
430
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
620
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
220
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
12
39k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
410
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k

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. ͝ਗ਼ௌ͋Γ͕ͱ ͏͍͟͝·ͨ͠