chat bot UI by Angular (ng-japan meetup)

Transcript

1. AngularͰνϟοτBOTʢ˞AI͸ແ͍Αʣ࡞ͬͨ࿩ 2017/10/10 ng-japan meetup LTࢿྉ
 @stutioTeaTwo
2. about me • TanakaToshiya • @studioTeaTwo • angular͸ࠓ೥5݄͔Βɻڈ೥͸reactɺ ଞʹpureMVCɾbackboneɾcreateJS ͳͲ • ڈ೥·Ͱ5೥΄Ͳιγϟή΍͍ͬͯ ͨɻࠓ͸ίϯγϡʔϚܥͷwebαʔϏ εΛ࡞͍ͬͯ·͢ɻ
3. ࠓ೔࿩͢͜ͱ • formModuleΛ࢖Θͳ͍angularͷ׆༻ࣄྫΛ࿩͠·͢ ʢngModel͸ͪΐͼͬͱ࢖͏ʣ • φϏΩϟϥΛ૬खʹͨ͠νϟοτUIͰɺΞχϝ΍SE΋ ৫ΓަͥͨΠϯλϥΫςΟϒͳೖྗΠϯλʔϑΣʔεΛ ࡞ͬͨࣄྫͰ͢ɻ • ʮϢʔβʔΠϯλʔϑΣʔεͷؾ࣋ͪΑ͞ͷͨΊʹʯ
4. ಥવͰ͕͢খ͍͞UXͷ࿩Λ͠·͢✋
5. https://twitter.com/fladdict/status/902392576828784640 ࠓ೔͸͜͜ʂ UX͸ର৅ൣғ͕޿ͯ͘ΊΜͲ͍͘͞ ਓʹΑͬͯࢥ͍ඳ͘ͷ͕มΘΔ͔ΒͰ͢
6. େ͖͍UX͸͜͏͍ͬͨॻ੶ΛͲ͏ͧʢಡΜͰ Δਓ΋ଟ͍ͱࢥ͍·͕͢ʣ
7. খ͍͞UXʢ࢖༻தͷUXʣͱ͸Կ͔ʁ
8. ݟͨ໨ ʢ഑৭ɺϨΠΞ΢ τɺύʔπͷܗঢ়ʣ ಈ͖ ʢUIΞΫγϣϯɺ ॲཧ࣌ؒʣ ʮΘ͔Γ΍͢͞ʯ+ʮؾ࣋ͪΑ͞ʯ webαΠτ
9. ʮΘ͔Γ΍͢͞ʯ+ʮؾ࣋ͪΑ͞ʯͷώϯτΛήʔϜʹٻ ΊͯΈΔ
10. ؾ࣋ͪΑ͞ͷ࿩
11. http://news.denfaminicogamer.jp/weekly-ranking/tbotw_20170325 ిϑΝϛχίήʔϚʔʮʰθϧμͷ఻આ ϒϨε Φϒ β ϫΠϧυʱͷ͢͹Β͠͞ΛਤͰઆ໌ͯ͠Έ Δɻ͋ͱσδλϧήʔϜʹ͓͚Δʮָ͠͞ͷςϯϙͱϦζϜʯͷॏཁੑʹ͍ͭͯʯʯΑΓҾ༻
12. ςϯϙ Ի λΠϛϯά http://news.denfaminicogamer.jp/weekly-ranking/tbotw_20170325 ిϑΝϛχίήʔϚʔʮʰθϧμͷ఻આ ϒϨε Φϒ β ϫΠϧυʱͷ͢͹Β͠͞ΛਤͰઆ໌ͯ͠Έ Δɻ͋ͱσδλϧήʔϜʹ͓͚Δʮָ͠͞ͷςϯϙͱϦζϜʯͷॏཁੑʹ͍ͭͯʯʯΑΓҾ༻
13. ʮΘ͔Γ΍͢͞ʯͷ࿩
14. http://news.denfaminicogamer.jp/interview/170927 ిϑΝϛχίήʔϚʔʮງҪ༤ೋΠϯλϏϡʔʳʮ༐ऀͱ͸ɺఘΊͳ͍ਓʯ――υϥΫΤ͕௅Μͩ೔ຊਓ ΁ͷ“RPGීٴେ࡞ઓ”ɻੜΈͷ਌͕ޠΔྺ୅γϦʔζ੍࡞ൿ࿩ɺͦͯ͠৽࡞੒ޭͷώϛπʯΑΓҾ༻
15. ͳΔ΄Ͳɻ͕ͩɺ Ͳ͏αΠτΛ࡞͍͍ͬͨΜͩΖ͏ʁ
16. νϟοτ΍Μ http://news.denfaminicogamer.jp/interview/170927 ిϑΝϛχίήʔϚʔʮງҪ༤ೋΠϯλϏϡʔʳʮ༐ऀͱ͸ɺఘΊͳ͍ਓʯ――υϥΫΤ͕௅Μͩ೔ຊਓ ΁ͷ“RPGීٴେ࡞ઓ”ɻੜΈͷ਌͕ޠΔྺ୅γϦʔζ੍࡞ൿ࿩ɺͦͯ͠৽࡞੒ޭͷώϛπʯΑΓҾ༻
17. ͱ͍͏͜ͱͰɺҰࡢ೥όζͬͨɺ͚Ͳ͋Μ·Γྲྀ ߦΒͳ͔ͬͨʢؾ͕͢ΔʣɺνϟοτBOTΛ࡞ͬ ͯΈΑ͏ʂangular Ͱɻ
18. σϞ
19. εςοϓ 1. ;ͭ͏ʹνϟοτػೳΛ࡞Δ 2. ϥδΦϘλϯ΍νΣοΫϘοΫεͳͲͷΞϯέʔτUIΛνϟοτ ʹ૊ΈࠐΉ 3. νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢ୆ຊʣΛ༻ ҙ͢Δ 4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ • νϟοτιʔεʹձ࿩εΫϦϓτΛྲྀ͠ࠐΜͩΓɺ • ֤छϋϯυϥΛoverrideͯ͠ݻ༗ͷΞΫγϣϯΛఆٛͯ͠ɺ • දࣔλΠϛϯά΍Ξχϝʔγϣϯ΍SEʢsoundEffectʣΛઃஔ
20. 1. ;ͭ͏ʹνϟοτػ ೳΛ࡞Δ • ಛఆͷ૬खͱdirectMessage • ͓ͳ͡ΈLINE෩ͱ͔twitterDM ෩ͱ͔Messanger෩ͱ͔ • طಡදࣔɺελϯϓ ɺΞοϓϩʔ υͳͲ
21. 2.ϥδΦϘλϯ΍νΣοΫϘοΫεͳͲͷΞϯέʔτUI Λνϟοτʹ૊ΈࠐΉ • messageͷ̍छྨͱͯ͠ఆ͍ٛͯ͠Δ ϊʔϚϧϝοηʔδ ΞϯέʔτUIʢex.νΣοΫϘοΫεʣ νΣοΫϘο ΫεΛੜ΍͢ ίϯςϯπछ ྨΛৼΓ෼͚ innerHTMLͰ࣭ ໰จΛ࡞੒
22. 3.νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢ୆ ຊʣΛ༻ҙ͢Δ • templateύε͸ϕλॻ͖ʹͳΔʢ@Component͸ݱ࣌఺ͰMetaTag≒JSྖҬͰ ͸ແ͍͔Βม਺Λ࢖͑ͳ͍ʣ template͸ΦϦδφ ϧ΁޲͚Δ ChatComponetΛܧঝ • component.tsͱcomponent.spec.ts͚ͩىͯ͜͠Scriptʢ୆ຊʣʹ͢Δ Ξχϝ͸ΩʔϓϩύςΟ ͚ͩ߹Θ্ͤͯॻ͖
23. • ୆ຊʹै͍ɺνϟοτιʔεʹձ࿩εΫϦϓτΛྲྀ͠ࠐΉ 4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ ηϦϑΛ࡞੒ ChatStreamʢRxʣʹྲྀ͠ࠐΉ • chat௥Ճ͸ؔ਺Խͯ͠ɺsubjectʹnext͢ΔλΠϛϯάʹɺdelay͔͚ͨΓɺΞχϝɺ soundEffectΛࢦఆ͍ͯ͠Δ • DOM৮Δܥ͸ɺcallbackͰ౤͛ࠐΊ͹scopeΛcomponentͷ··ʹ֎෦ʹ੾Γग़ͤΔ sound࠶ੜ css animeͷ੾Γସ͑ දࣔλΠϛ ϯάͷௐ੔
24. 4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ • όϦσʔτΤϥʔͷϢʔβʔϑΟʔυόοΫ΋ձ࿩ͷ ΩϟονϘʔϧͰ͋ΔɻͳͷͰख࡞ΓͰฦ͢ɻ 1ճ͚ͩετ ϦʔϜʹྲྀ͢
25. Ҏ্ʹΑΓɺ
26. ʮΘ͔Γ΍͢͞ʯˠνϟοτܗࣜͰφϏΩϟϥ͕ೖྗΛ Ϧʔυ ʮؾ࣋ͪΑ͞ʯˠదٓͷදࣔλΠϛϯάɺΞχϝɺԻ
27. ౔୆͸Ͱ͖ͨ ʢυϥΫΤ͕Ͱ͖ͨͱ͸ݴ͍ͬͯͳ͍ʣ
28. ·ͱΊʢProsʣ • formΛ࢖Θͳ͍ͷʹangularͰίϯγϡʔϚʔܥΛ࡞Δཧ ༝ • ΘΓͱૉͰhtml5/css3Λॻ͚Δʢcss animeɺvideo/ audioɺcameraɺcanvasΒʣɻͳͷͰmedia΍deviceܥ ͷHTML΋ɺMDNͳͲͷαϯϓϧίʔυͷίϐϖϕʔε Ͱ͍͚Δ • ڧྗͳϑϨʔϜϫʔΫʹج൫Λ೚ͤͯʢcliɺrouterɺDI ίϯςφΒʣɺϢʔβʔΠϯλʔϑΣʔεʹ஫ྗͰ͖Δ
29. ·ͱΊʢConsʣ • ͭΒ͍఺ • खಈͰXSSରࡦʢinnerHTMLʣ • ςετΛߟ͑Δͱ಄௧͍ • ࣺͯͯΔ఺ • ͳΔ΂͘angular rendererʹد͍ͤͯΔ͕ͦΕͰ΋ nativeElementΊͬͪΌ࢖ͬͯΔɻͳͷͰผεϨουܥ͸ ΩϏγΠʢweb workerɺServerSideRenderingʣ
30. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%