Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
4
1k
全社でアクセシビリティに取り組む / Company-wide Accessibility Initiatives
Avatar for ymrl ymrl
1
490
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
Avatar for ymrl ymrl
0
340
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
Avatar for ymrl ymrl
1
520
がんばらないアクセシビリティ / Accessibility Without the Struggle
Avatar for ymrl ymrl
0
510
Webサイトのアクセシビリティにどう向き合う？ / How Should We Approach Web Accessibility?
Avatar for ymrl ymrl
0
130
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
Avatar for ymrl ymrl
1
1.4k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
Avatar for ymrl ymrl
0
23k
「Webアプリケーションアクセシビリティ」著者の会社 （freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ？
Avatar for ymrl ymrl
3
24k

Other Decks in Programming

See All in Programming
愛される翻訳の秘訣
Avatar for Kishikawa Katsumi kishikawakatsumi
3
340
Python札幌 LT資料
Avatar for t3tra t3tra
7
1k
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
1
630
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
280
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
1.8k
GoLab2025 Recap
Avatar for kuro kuro_kurorrr
0
780
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
320
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
610
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
110
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
140
AIコーディングエージェント（Gemini）
Avatar for kondai kondai24
0
270
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
160

Featured

See All Featured
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
27
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
250
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
69
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How to make the Groovebox
Avatar for あそなす asonas
2
1.8k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
28
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
91k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
286
14k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
260

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