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

React と 画像

41104bf685ee28d9c760ef29db690e5b?s=47 ymrl
March 11, 2016
Programming
0
1.1k

React と 画像

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

41104bf685ee28d9c760ef29db690e5b?s=128

ymrl

March 11, 2016
Tweet

More Decks by ymrl

See All by ymrl
やっぱりやりたいのはUIデザインだった
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
0
2.1k
freeeのアクセシビリティの取り組みの紹介
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
0
35
開発チームみんなで取り組むアクセシビリティ
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
0
22
アクセシビリティ アプリを企画する時点で考えること
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
1
100
Web技術基礎 for インターン
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
0
3.8k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
0
61
Webエンジニアとして いま知っておきたい Webアクセシビリティ
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
3
470
世界を変えるための デザインシステム （アクセシビリティ編）
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
1
3.7k
インクルーシブな製品開発とリモートワークの職場環境
41104bf685ee28d9c760ef29db690e5b?s=48 ymrl
1
4.2k

Other Decks in Programming

See All in Programming
ESM移行は無理だけどおれもSindreのライブラリが使いたい！
208355d7af69fa84a78048f78077048a?s=48 sosukesuzuki
2
540
WindowsコンテナDojo：第6回 Red Hat OpenShift入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
180
リーダブルテストコード / #vstat
48a913a2e3bb5e68aae6f73079648e84?s=48 jnchito
47
36k
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
3518f5ec9ebb241abc3569eb5cfc7d2a?s=48 1901drama
0
180
Lookerとdbtの共存
739b3e6644385d832834f6d4db498642?s=48 ttccddtoki
0
630
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
F122773bb8d506a4f38a94bfeff45945?s=48 uggds
32
13k
MLOps勉強会_20220810
7771ba477a3bee861bc62012a143bffe?s=48 strsaito
0
310
NestJS_meetup_atamaplus
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
210
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
Ad855122c2c5b24640cc8798eb103e4b?s=48 phicdy
0
390
Efficient UI testing in Android
2b0404a5db1a74f01bf3bf94d142e28c?s=48 alexzhukovich
1
120
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
0
150
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
180

Featured

See All Featured
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.4k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
3.1k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
84
4.8k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.6k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
290k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
597
63k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
210
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
46
2.7k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k

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