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

React と 画像

ymrl
March 11, 2016
Programming
0
1.2k

React と 画像

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

ymrl

March 11, 2016
Tweet

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

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