非エンジニアのためのAngularJS - 非実在美少女デザイナーに捧ぐ -

Wantedlyのエンジニア募集
https://www.wantedly.com/projects/7726
Wantedlyのデザイナー募集
https://www.wantedly.com/projects/10775

Transcript

1. ࠓҪو೭ʗTAKAYUKI IMAI ඇΤϯδχΞͷͨΊͷAngularJS ඇ࣮ࡏඒগঁσβΠφʔʹ๋͙
2. ࣗݾ঺հ
3. ࠓҪو೭ ΠϚΠλΧϢΩʣ
   UXJUUFS
   !JNBJNJBNJ
   8BOUFEMZͷ8FCΤϯδχΞɻ
 ࠷ۙͷझຯ͸6OJUZ
   OPEFKTɻ
 ֶੜͷࠒ͸ܶஂ΍ͬͯ·ͨ͠ɻ
   εʔύʔͳΠέϝϯσβΠφʔͱಇ͍͍ͯΔɻ ෬ઢ 
 ৄ͍͠ϓϩϑΟʔϧ
   ˠ
   IUUQTXXXXBOUFEMZDPNVTFST
   
4. ϓϩϑΟʔϧฤू
5. χϡʔεϑΟʔυ
6. ϓϥάΠϯ͕ͨ͘͞Μ͋ͬͯ ඇΤϯδχΞʹ΋Ѫ༻͞Ε͍ͯΔ jQuery
7. AngularJSʹ΋ Module৭ʑ͋ΔΑ
8. http://ngmodules.org/
9. ͔͠͠
10. Why AngularJS is Known to Have Steep Learning Curve? http://vitalflux.com/angularjs-seems-steep-deep-learning-curve/ ೉ͦ͠͏ʂ
11. ͸͡ΊͯΈͳ͍ͱนʹ΋ Ϳ͔ͭΒͳ͍
12. ࣗݾ੹೚
13. ࿩͢͜ͱ ۀ຿Ͱ࢖ͬͨϓϥάΠϯͳͲ঺հ ɹ σβΠφʔ Ϛʔέλʔ WebΤϯδχΞ(!?) ʹָͦ͠͏ͱࢥͬͯ΋Β͍͍ͨ
14. (ඒগঁ)σβΠφʔʹ๋͙ εϥΠυΛ༻ҙ͢ΔϞνϕʔγϣϯ
15. ng-style ͍͖ͳΓϓϥάΠϯͰ͸ͳ͍
16. @keyframes anime1 { 0% {transform: scale(0)} 100% {transform: scale(1)} } .anime1 { animation: anime1 0.4s ease; } $44
    "OJNBUJPO͕͋ͬͨͱͯ͠ʜ
17. <div class="anime1" ng-repeat="item in items”></div> ͢΂ͯಉ࣌ʹදࣔ͞ΕΔ
18. ཁૉ͕ॱ൪ʹදࣔ͞ΕΔ <div class="anime1" ng-repeat="item in items” ng-style="{'animation-delay': $index/10 + 's'}"></div>
19. ࢹઢͷྲྀΕʹԊͬͯදࣔ͞ΕΔ <div class="anime1" ng-repeat="item in items” ng-style="{'animation-delay': item.delay + 's'}"></div>
20. http://www.google.com/design/spec/animation/meaningful- transitions.html#meaningful-transitions-visual-continuity
21. ng-class ·ͩ·ͩϓϥάΠϯ͸ग़ͯ͜ͳ͍
22. ΫϦοΫͯ͠ঢ়ଶ͕มΘͬͨΒBOJNBUJPO <div ng-class=“{‘anime1’: active}” ng-click=“active = true"></div>
23. ng-animate ͱͬ͘ʹpluginͰ͸ͳ͍
24. OHSFQFBUͷର৅ͱͳ͍ͬͯΔ഑ྻʹ
    ৽͍͠JUFN͕௥Ճ͞ΕΔ࣌ʹBOJNBUJPO͍ͨ͠ <div ng-repeat="item in items" class="item"></div> <button ng-click="addItem()">͍͔ͭ</button>
25. OHFOUFS
    
    OHFOUFSBDUJWF
    USBOTJUJPOΛ࢓ࠐΉ .item.ng-enter { -webkit-transition: 1.2s ease-in-out all; transition: 1.2s ease-in-out all; opacity: 0; } .item.ng-enter.item.ng-enter-active { opacity: 1; }
26. OHFOUFSʹBOJNBUJPOΛ࢓ࠐΉ .anime1 { animation: anime1 0.4s ease 0s infinite alternate; } .item.ng-enter { animation: anime1 0.4s ease 0s; }
27. ngInfiniteScroll
28. *OGJOJUF4DSPMM͕γϯϓϧʹॻ͚Δ <div infinite-scroll='nextPage()' infinite-scroll-disabled='busy' infinite-scroll-distance='1'> <div ng-repeat='item in items'>Contents</div> <div ng-show='busy'>Loading data...</div> </div>
29. σϞ & ࢖ͬͯΔͱ͜
30. ಛʹҙຯͷͳ͍εϥΠυ https://www.wantedly.com/users/14000
31. σβΠφʔʹ఻͍͑ͨ͜ͱ
32. ͜ͷ΁Μ͕؆ܿʹॻ͚Ε͹
    BOJNBUJPOͷҙຯ෇͚΋
    આ໌͠΍͔ͬͨ͢Γ͠ͳ͍ʁ ng-animate͕εΩͳΜͰ͕͢… ཁૉͷ௥Ճ࡟আʹBOJNBUJPO͕ඥͮ͘
    
    ૢ࡞ʹԠͨ͡Ϩεϙϯε
33. ͦͷଞ
34. Bootstrapʹ͋Γͦ͏ͳίϯϙʔωϯτ͕ ࢖͑Δ΍ͭͩͬͨΓ
35. Polymerʹ͋ΔίϯϙʔωϯτΛ ࢖͑ΔΑ͏ʹ͍ͯ͠ΔϓϩδΣΫτ΋
36. Ϛʔέλʔʹ๋͙
37. Angulartics
38. • ٖࣅϖʔδΛτϥοΩϯά • GoogleAnalyticsҎ֎ʹ΋ରԠ
39. <a analytics-on="click" analytics-event="Download">Download</a> ؆୯ʹΠϕϯτΛૹΕΔ
40. σϞ ͸ͳ͍ͷͰ༨ஊ
41. ਖ਼͘͠ૹ৴͞Ε͍ͯΔ͔ͷ֬ೝʹศར Chrome Extension Google Analytics Debugger
42. Ϛʔέλʔʹ఻͍͑ͨ͜ͱ
43. <div ng-switch="user.type"> <button ng-switch-when="A">ԡ͍ͯͩ͘͠͞</button> <button ng-switch-when="B">ԡ͢΂͖Ϙλϯ</button> <button ng-switch-default>ԡ͢</button> </div> <a analytics-on="click" analytics-event="Download">Download</a> "#ςετͱ͔ग़དྷͳ͍͔ͳʁ ໛ࡧ
44. )5.-Ͱձ͍·͠ΐ͏
45. WebΤϯδχΞʹ๋͙
46. ࠓ౓ͦ͜ϞόΠϧʹ
47. *POJD
    'SBNFXPSL
    ϞόΠϧΞϓϦ޲͚6*ϑϨʔϜϫʔΫɻඒ͍͠ɻ
    "OHVMBS+4ϕʔεɻ$PSEPWB࢖ͬͯ/BUJWFΞϓϦΛEFQMPZɻ
48. ΠϕϯτͰग़ձͬͨਓͱͭͳ͕ΓΛ࢒͢ɻ
    ΠϕϯτͰͷग़ձ͍Λେ੾ʹʂ ׆༻ྫ
    Πϕϯτ ϦΞϧɾ΢ΥϯςουϦʔ ޲͚ΞϓϦ ͕࣌ؒ͋Ε͹σϞʂ
49. 0OTFO6*
    ͪͳΈʹࠃ࢈Ͱ͸0OTFO6*͕͋Δɻ
    "OHVMBS+4
    K2VFSZɻ8FCͰΞϓϦ࡞ΕΔ.POBDBͰ࢖͑Δɻ
50. 'BNPVT
 %ϨΠΞ΢τɻ%0.$BOWBT8FC(-ͰϨϯμϦϯάɻ
 ௨ৗ'14Ͱඳը͢Δͱ͔ήʔϜతͳϊϦͷϑϨʔϜϫʔΫɻ
51. ࠓ౓ͦ͜ϞόΠϧʹ
54. 8FCΤϯδχΞʹ఻͍͑ͨ͜ͱ
55. ɾ"OHVMBS+4 ·ͩ ݁ߏΩςΔ
    ɾ࠷ۙͷ8BOUFEMZ͸"1*ϑΝʔετͷײ
56. એ఻
57. 8BOUFEMZΛࢧ͑ͯ͘ΕΔ
    εʔύʔΤϯδχΞืूதʂ
    IUUQTXXXXBOUFEMZDPNQSPKFDUT
58. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ