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

1bacc16e3879ad4f5f1c923c60dc32f5?s=47 Takayuki Imai
November 05, 2014

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

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

1bacc16e3879ad4f5f1c923c60dc32f5?s=128

Takayuki Imai

November 05, 2014
Tweet

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. OHFOUFSOHFOUFSBDUJWF 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. ࠓ౓ͦ͜ϞόΠϧʹ

  52. None
  53. None
  54. 8FCΤϯδχΞʹ఻͍͑ͨ͜ͱ

  55. ɾ"OHVMBS+4 ·ͩ ݁ߏΩςΔ ɾ࠷ۙͷ8BOUFEMZ͸"1*ϑΝʔετͷײ

  56. એ఻

  57. 8BOUFEMZΛࢧ͑ͯ͘ΕΔ εʔύʔΤϯδχΞืूதʂ IUUQTXXXXBOUFEMZDPNQSPKFDUT

  58. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ