UXBridge_vol3_pipopotamasu

UXBridgeの3回目の発表資料です。

Transcript

1. UXΛ࣮ݱ͢ΔͨΊʹ͸Կ͕ඞཁ͔? ~ ࣮૷ฤ ~ UX Bridge vol.3 2017/12/14 ϝυϐΞגࣜձࣾ ΤϯδχΞ pipopotamasu
2. self_introduce.json { “github”: “pipopotamasu”, “age”: 25, “company”: “ϝυϐΞגࣜձࣾ”, “tech”: [“Ruby”, “PHP”, “Vue.js”, “React”], “hobby”: [“໺ٿ”, “өը”], }
3. ϝυϐΞͬͯ?
4. ҩࢣઐ༻ͷϝσΟΞαΠτ
5. ࠓ೔ͷ͓࿩
6. UXΛ࣮ݱ͢ΔͨΊʹ Կ͕ඞཁ͔?
7. ࣗ਎ͷମݧஊ
8. લ৬ͷ͓࿩
9. αΫηεετʔϦʔ
10. Ͱ͸ͳ͍
11. ࣦഊஊ
12. ͭ·Γɻɻɻ
13. ~ UXฤ ~
14. UXΛ࣮ݱͰ͖ͳ͔ࣦͬͨഊஊ
15. ஫
16. ※ൃදऀ͸UXʹৄ͋͘͠Γ·ͤΜ
19. ຊ୊ʹೖΓ·͢
20. Ή͔͠ɺΉ͔͠ɺ ͋Δͱ͜Ζʹ Webۀ຿γεςϜ ΛϦϓϨΠε͢Δ ϓϩδΣΫτʹ഑ଐ͞Εͨ ৽ถΤϯδχΞ͕͍·ͨ͠ɻ
21. ৽ถΤϯδχΞ͸Ϛωʔδϟʔ ʹਘͶ·ͨ͠ ͳͥγεςϜΛϦϓϨΠε͢Δඞ ཁ͕͋ΔΜͰ͔͢
22. ͦΕ͸ͶɺݱߦͷγεςϜΑΓޮ ཰తʹ࡞ۀͰ͖ΔγεςϜΛಋೖ͠ɺ޻਺ ΛݮΒͨ͢ΊͩΑ
23. ΁ʙɺ͡Ό͋ͳͥݱߦͷγεςϜͰ͸
    ޮ཰ྑ͘࡞ۀͰ͖ͳ͍ͷ
24. ࣮͸ͶɺݱߦͷγεςϜʹ͸
    ͜Μͳ՝୊͕͋ΔΜͩɻ
25. ݱߦͷۀ຿γεςϜͷ՝୊ • ϖʔδ੾Γସ͕͑ଟ͍ • ॾൠͷࣄ৘ʹΑΓলུ
26. ݱߦͷϦαʔνγεςϜͷ՝୊ • ϖʔδ੾Γସ͕͑ଟ͍ • ॾൠͷࣄ৘ʹΑΓলུ Ϣʔβʔ͸ωοτϫʔΫ͕
    ஗͍ ௨৴Πϯϑϥ͕੔͍ͬͯͳ͍ ࠃͷਓʑɻ
    
27. ϖʔδભҠ͕ଟ͍ × ωοτϫʔΫ͕஗͍
28. ϖʔδભҠ͕ଟ͍ × ωοτϫʔΫ͕஗͍ || ۀ຿͕ਐ·ͳ͍
29. ϖʔδભҠ͕ଟ͍ × ωοτϫʔΫ͕஗͍ || ΠϥΠϥʂ
30. ʘ(^o^)ʗ
31. ͳΔ΄Ͳʙɺ͡Ό͋͜ͷ՝୊Λղܾ͢Δ ͜ͱ͕Ͱ͖Ε͹͍͍ΜͩͶʂ
32. ͭ·Γɺ͜ͷϓϩδΣΫτͰୡ੒͢΂͖69͸
    ʮΠϥΠϥͤ͞ͳ͍ʯ
    ͜ͱͳΜͩͶʂ
33. ໨ඪͱ͢Δ69͸Θ͔ͬͨ ͧʂ
    Ͱ΋ɺͲ͏͢Ε͹͜ͷ69Λ࣮ݱͰ͖ΔΜ ͩΖ͏
34. ͦ͜Ͱ͜ͷϓϩδΣΫτͰ͸ ʮ41"ʯʹ͢Δ͜ͱͰɺۃྗϖʔδભҠΛ ىͣ͜͞ʹϢʔβʔ͕ૢ࡞Ͱ͖ΔΑ͏ʹ͠Α ͏ͱࢥ͏Μͩɻ
35. SPA(Single Page Application) • ৄ͍͠આ໌͸ׂѪ(σϞ)
36. SPA(Single Page Application) ग़య: https://msdn.microsoft.com
37. SPA(Single Page Application) ɾ)5.-
    ɾ$44
    ɾ+BWB4DSJQU
    ɾը૾ ɾ+40/
38. ͳΔ΄Ͳʂ
    ͜͏͢Ε͹௨৴͢Δσʔλྔ͕࠷খݶʹࡁΉͶʂ
    ૣ଎Ͳ͏͍͏෩ʹ͜ͷ41"Λ։ൃ͍ͯ͠Δͷ͔ɺطʹ+PJO ͍ͯ͠ΔઌഐΤϯδχΞʹฉ͍ͯΈΑ͏ʂ
39. ͢Έ·ͤʙΜɺ41"ͬͯͲ͏͍͏෩ʹ࣮ ૷͍ͯ͠ΔΜͰ͔͢
40. K2VFSZͱK2VFSZ6*Λ࢖ͬͯ࡞ͬͯΔΑɻ
    ࣌ؒ΋ͳ͍͠ૣ଎Ұॹʹ։ൃ͍ͯ͜͠͏͔ɻ
41. ͜ͷͱ͖͸ɺ͜ͷԿؾͳ͍Ұݴ͕ ൵ܶΛੜΉͱ͸ߟ͑΋͠ͳ͔ͬ ͨɻɻɻ
42. ਺ϲ݄ޙɺ ͜ͷγεςϜ͸ຊ൪ӡ༻͞ΕΔ͜ ͱͱͳͬͨɻɻɻ
43. ݁Ռ
44. ੵΈॏͳΔόάϨϙʔτ
45. मਖ਼ΛڋΈଓ͚Δ εύήοςΟίʔυ
46. ऴΘΒͳ͍ແݶϧʔϓ όά मਖ਼
47. ͦͯ͠…
48. ଺Δɺۀ຿
49. ཧ૝ͱݱ࣮
50. ཧ૝
51. ϖʔδભҠͳ͠Ͱ͘͘͞͞ ૢ࡞Ͱ͖Δ
52. ݱ࣮
53. όάͰૢ࡞Ͱ͖ͳ͍
54. ཧ૝
55. ۀ຿ޮ཰UP↑
56. ݱ࣮
57. όάͰۀ຿͕஗ΕΔ
58. ׬
59. ͳͥ͜Μͳ͜ͱʹͳͬͨͷ͔?
60. ݪҼ͸͍Ζ͍Ζ͋Δ͕ɺ ٕज़తͳ؍఺͔Βɻɻɻ
61. ٕज़બఆΛؒҧ͑ͨ
62. ϓϩδΣΫτͷ·ͱΊ • UXͷఆٛ → ΠϥΠϥͤ͞ͳ͍ • UXΛ࣮ݱ͢Δํ๏ → SPA • SPAͷ࣮૷ํ๏ → jQuery, jQueryUI
63. ϓϩδΣΫτͷ·ͱΊ • UXͷఆٛ → ΠϥΠϥͤ͞ͳ͍ • UXΛ࣮ݱ͢Δํ๏ → SPA • SPAͷ࣮૷ํ๏ → jQuery, jQueryUI 41"ͷ࣮૷ͷෆຯ͕͞ଟ͘ ͷόάΛੜΈɺۀ຿ʹࢧোΛ͖ͨ͠ ͯ͠·ͬͨɻ
64. ͦ΋ͦ΋… • SPAΛ࣮૷͢ΔͷʹjQuery͸ద͍ͯ͠ͳ͍ • ΋ͬͱదٕͨ͠ज़͕͋ͬͨ (React, Vue.js, AngularJS౳) • ։ൃஈ֊ͰjQueryͰ࣮૷Λଓ͚Δͱ΍͹͍ͱ ͍͏ڞ௨ೝ͕ࣝϝϯόʔؒͰ͋ͬͨ
65. SPAΛ࣮૷͢ΔͷʹjQuery͸ద͍ͯ͠ͳ͍ • ௚઀UI(DOM)Λૢ࡞ ʴ UIʹσʔλΛຒΊࠐΉ • ૢ࡞͗͢͠ΔͱUIͷݱࡏͷঢ়ଶ͕Θ͔Βͳ͘ ͳΔ → ঢ়ଶ؅ཧ͕೉͍͠ • ݱࡏͷUIͷঢ়ଶ͕Θ͔Βͳ͍ͷʹ͞ΒʹUIΛ ૢ࡞ or σʔλऔಘ͢Δ → όά͕ൃੜ͢Δ
66. ΋ͬͱదٕͨ͠ज़͕͋ͬͨ • React, Vue.js, AngularJS౳ • σʔλͱUIΛ෼཭ • ্هʹΑΓɺঢ়ଶ؅ཧ͕͠΍͘͢ͳΔ ߏ଄(ύλʔϯ)Λఏڙ
67. ։ൃஈ֊ͰjQueryͰ࣮૷Λଓ͚Δͱ΍͹͍ͱ ͍͏ڞ௨ೝ͕ࣝϝϯόʔؒͰ͋ͬͨ • ৽ถΤϯδχΞ͕։ൃʹࢀՃͨ͠౰ॳ͔Β • jQueryΑΓదٕͨ͠ज़ͷଘࡏ͸ϝϯόʔ͸஌ͬ ͍ͯͨ • ϝϯόʔʹͦͷٕज़Λѻ͑Δਓ͕͍ͳ͔ͬͨɺ ࣗൃతʹษڧ͠Α͏ͱ͢Δਓ͕͍ͳ͔ͬͨ (ࣗ਎ؚΊ)
68. ݁࿦
69. ٕज़ྗ͕ͳ͔͔ͬͨΒ UX͕࣮ݱͰ͖ͳ͔ͬͨ
70. ଍Γͳ͍ٕज़Λ ษڧ͠Α͏ͱ͠ͳ͔ͬͨ UX͕࣮ݱͰ͖ͳ͔ͬͨ
71. ࣌͸ྲྀΕ…
72. ؆୯ͳܦྺ • 2014/04~ ๭SIer • 2015/10~ ๭Webܥاۀ • 2017/04~ ϝυϐΞגࣜձࣾ
73. ࠓޙಉ͡Α͏ͳࣦഊΛ ܁Γฦͨ͘͠ͳ͍
74. ษڧͩʂʂ
76. UXΛ࣮ݱ͢ΔͨΊͷ ٕज़Λ౤ೖͰ͖Δ ؀ڥͮ͘Γ
78. ੲɺࣦഊͨ͜͠ͱΛ ܁Γฦ͞ͳ͍Α͏ʹ
79. ऴΘΓʹ
80. UXΛ࣮ݱ͢ΔͨΊʹ͸Կ͕ඞཁ͔?
81. ٕज़ͱҙཉ
82. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
83. ༨ஊ
84. ৽͍͠(ະܦݧ)ٕज़౤ೖʹ͸
85. Կ͔͠Βͷཧ༝͕͋Δ
86. ͕͔͔࣌ؒΔ
87. ࿑ྗ͕͔͔Δ
88. ͦͷઌʹ͸Ϣʔβʔ͕͍Δ
89. ͦͷνϟϨϯδΛԠԉ͍ͯͩ͘͠͞
90. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠