chat bot UI by Angular (ng-japan meetup)

Transcript

1. 1.

   AngularͰνϟοτBOTʢ˞AI͸ແ͍Αʣ࡞ͬͨ࿩ 2017/10/10 ng-japan meetup LTࢿྉ
 @stutioTeaTwo

2. 2.

   about me • TanakaToshiya • @studioTeaTwo • angular͸ࠓ೥5݄͔Βɻڈ೥͸reactɺ ଞʹpureMVCɾbackboneɾcreateJS ͳͲ

   • ڈ೥·Ͱ5೥΄Ͳιγϟή΍͍ͬͯ ͨɻࠓ͸ίϯγϡʔϚܥͷwebαʔϏ εΛ࡞͍ͬͯ·͢ɻ
3. 3.

   ࠓ೔࿩͢͜ͱ • formModuleΛ࢖Θͳ͍angularͷ׆༻ࣄྫΛ࿩͠·͢ ʢngModel͸ͪΐͼͬͱ࢖͏ʣ • φϏΩϟϥΛ૬खʹͨ͠νϟοτUIͰɺΞχϝ΍SE΋ ৫ΓަͥͨΠϯλϥΫςΟϒͳೖྗΠϯλʔϑΣʔεΛ ࡞ͬͨࣄྫͰ͢ɻ • ʮϢʔβʔΠϯλʔϑΣʔεͷؾ࣋ͪΑ͞ͷͨΊʹʯ

4. 4.

   ಥવͰ͕͢খ͍͞UXͷ࿩Λ͠·͢✋

5. 5.

   https://twitter.com/fladdict/status/902392576828784640 ࠓ೔͸͜͜ʂ UX͸ର৅ൣғ͕޿ͯ͘ΊΜͲ͍͘͞ ਓʹΑͬͯࢥ͍ඳ͘ͷ͕มΘΔ͔ΒͰ͢

6. 6.

   େ͖͍UX͸͜͏͍ͬͨॻ੶ΛͲ͏ͧʢಡΜͰ Δਓ΋ଟ͍ͱࢥ͍·͕͢ʣ

7. 7.

   খ͍͞UXʢ࢖༻தͷUXʣͱ͸Կ͔ʁ

8. 8.

   ݟͨ໨ ʢ഑৭ɺϨΠΞ΢ τɺύʔπͷܗঢ়ʣ ಈ͖ ʢUIΞΫγϣϯɺ ॲཧ࣌ؒʣ ʮΘ͔Γ΍͢͞ʯ+ʮؾ࣋ͪΑ͞ʯ webαΠτ

9. 9.

   ʮΘ͔Γ΍͢͞ʯ+ʮؾ࣋ͪΑ͞ʯͷώϯτΛήʔϜʹٻ ΊͯΈΔ

10. 10.

    ؾ࣋ͪΑ͞ͷ࿩

11. 11.

    http://news.denfaminicogamer.jp/weekly-ranking/tbotw_20170325 ిϑΝϛχίήʔϚʔʮʰθϧμͷ఻આ ϒϨε Φϒ β ϫΠϧυʱͷ͢͹Β͠͞ΛਤͰઆ໌ͯ͠Έ Δɻ͋ͱσδλϧήʔϜʹ͓͚Δʮָ͠͞ͷςϯϙͱϦζϜʯͷॏཁੑʹ͍ͭͯʯʯΑΓҾ༻

12. 12.

    ςϯϙ Ի λΠϛϯά http://news.denfaminicogamer.jp/weekly-ranking/tbotw_20170325 ిϑΝϛχίήʔϚʔʮʰθϧμͷ఻આ ϒϨε Φϒ β ϫΠϧυʱͷ͢͹Β͠͞ΛਤͰઆ໌ͯ͠Έ Δɻ͋ͱσδλϧήʔϜʹ͓͚Δʮָ͠͞ͷςϯϙͱϦζϜʯͷॏཁੑʹ͍ͭͯʯʯΑΓҾ༻

13. 13.

    ʮΘ͔Γ΍͢͞ʯͷ࿩

14. 14.

    http://news.denfaminicogamer.jp/interview/170927 ిϑΝϛχίήʔϚʔʮງҪ༤ೋΠϯλϏϡʔʳʮ༐ऀͱ͸ɺఘΊͳ͍ਓʯ――υϥΫΤ͕௅Μͩ೔ຊਓ ΁ͷ“RPGීٴେ࡞ઓ”ɻੜΈͷ਌͕ޠΔྺ୅γϦʔζ੍࡞ൿ࿩ɺͦͯ͠৽࡞੒ޭͷώϛπʯΑΓҾ༻

15. 15.

    ͳΔ΄Ͳɻ͕ͩɺ Ͳ͏αΠτΛ࡞͍͍ͬͨΜͩΖ͏ʁ

16. 16.

    νϟοτ΍Μ http://news.denfaminicogamer.jp/interview/170927 ిϑΝϛχίήʔϚʔʮງҪ༤ೋΠϯλϏϡʔʳʮ༐ऀͱ͸ɺఘΊͳ͍ਓʯ――υϥΫΤ͕௅Μͩ೔ຊਓ ΁ͷ“RPGීٴେ࡞ઓ”ɻੜΈͷ਌͕ޠΔྺ୅γϦʔζ੍࡞ൿ࿩ɺͦͯ͠৽࡞੒ޭͷώϛπʯΑΓҾ༻

17. 17.

    ͱ͍͏͜ͱͰɺҰࡢ೥όζͬͨɺ͚Ͳ͋Μ·Γྲྀ ߦΒͳ͔ͬͨʢؾ͕͢ΔʣɺνϟοτBOTΛ࡞ͬ ͯΈΑ͏ʂangular Ͱɻ

18. 18.

    σϞ

19. 19.

    εςοϓ 1. ;ͭ͏ʹνϟοτػೳΛ࡞Δ 2. ϥδΦϘλϯ΍νΣοΫϘοΫεͳͲͷΞϯέʔτUIΛνϟοτ ʹ૊ΈࠐΉ 3. νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢ୆ຊʣΛ༻ ҙ͢Δ 4.

    BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ • νϟοτιʔεʹձ࿩εΫϦϓτΛྲྀ͠ࠐΜͩΓɺ • ֤छϋϯυϥΛoverrideͯ͠ݻ༗ͷΞΫγϣϯΛఆٛͯ͠ɺ • දࣔλΠϛϯά΍Ξχϝʔγϣϯ΍SEʢsoundEffectʣΛઃஔ
20. 20.

    1. ;ͭ͏ʹνϟοτػ ೳΛ࡞Δ • ಛఆͷ૬खͱdirectMessage • ͓ͳ͡ΈLINE෩ͱ͔twitterDM ෩ͱ͔Messanger෩ͱ͔ • طಡදࣔɺελϯϓ

    ɺΞοϓϩʔ υͳͲ
21. 21.

    2.ϥδΦϘλϯ΍νΣοΫϘοΫεͳͲͷΞϯέʔτUI Λνϟοτʹ૊ΈࠐΉ • messageͷ̍छྨͱͯ͠ఆ͍ٛͯ͠Δ ϊʔϚϧϝοηʔδ ΞϯέʔτUIʢex.νΣοΫϘοΫεʣ νΣοΫϘο ΫεΛੜ΍͢ ίϯςϯπछ ྨΛৼΓ෼͚

    innerHTMLͰ࣭ ໰จΛ࡞੒
22. 22.

    3.νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢ୆ ຊʣΛ༻ҙ͢Δ • templateύε͸ϕλॻ͖ʹͳΔʢ@Component͸ݱ࣌఺ͰMetaTag≒JSྖҬͰ ͸ແ͍͔Βม਺Λ࢖͑ͳ͍ʣ template͸ΦϦδφ ϧ΁޲͚Δ ChatComponetΛܧঝ • component.tsͱcomponent.spec.ts͚ͩىͯ͜͠Scriptʢ୆ຊʣʹ͢Δ

    Ξχϝ͸ΩʔϓϩύςΟ ͚ͩ߹Θ্ͤͯॻ͖
23. 23.

    • ୆ຊʹै͍ɺνϟοτιʔεʹձ࿩εΫϦϓτΛྲྀ͠ࠐΉ 4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ ηϦϑΛ࡞੒ ChatStreamʢRxʣʹྲྀ͠ࠐΉ • chat௥Ճ͸ؔ਺Խͯ͠ɺsubjectʹnext͢ΔλΠϛϯάʹɺdelay͔͚ͨΓɺΞχϝɺ soundEffectΛࢦఆ͍ͯ͠Δ •

    DOM৮Δܥ͸ɺcallbackͰ౤͛ࠐΊ͹scopeΛcomponentͷ··ʹ֎෦ʹ੾Γग़ͤΔ sound࠶ੜ css animeͷ੾Γସ͑ දࣔλΠϛ ϯάͷௐ੔
24. 24.

    4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ • όϦσʔτΤϥʔͷϢʔβʔϑΟʔυόοΫ΋ձ࿩ͷ ΩϟονϘʔϧͰ͋ΔɻͳͷͰख࡞ΓͰฦ͢ɻ 1ճ͚ͩετ ϦʔϜʹྲྀ͢

25. 25.

    Ҏ্ʹΑΓɺ

26. 26.

    ʮΘ͔Γ΍͢͞ʯˠνϟοτܗࣜͰφϏΩϟϥ͕ೖྗΛ Ϧʔυ ʮؾ࣋ͪΑ͞ʯˠదٓͷදࣔλΠϛϯάɺΞχϝɺԻ

27. 27.

    ౔୆͸Ͱ͖ͨ ʢυϥΫΤ͕Ͱ͖ͨͱ͸ݴ͍ͬͯͳ͍ʣ

28. 28.

    ·ͱΊʢProsʣ • formΛ࢖Θͳ͍ͷʹangularͰίϯγϡʔϚʔܥΛ࡞Δཧ ༝ • ΘΓͱૉͰhtml5/css3Λॻ͚Δʢcss animeɺvideo/ audioɺcameraɺcanvasΒʣɻͳͷͰmedia΍deviceܥ ͷHTML΋ɺMDNͳͲͷαϯϓϧίʔυͷίϐϖϕʔε Ͱ͍͚Δ

    • ڧྗͳϑϨʔϜϫʔΫʹج൫Λ೚ͤͯʢcliɺrouterɺDI ίϯςφΒʣɺϢʔβʔΠϯλʔϑΣʔεʹ஫ྗͰ͖Δ
29. 29.

    ·ͱΊʢConsʣ • ͭΒ͍఺ • खಈͰXSSରࡦʢinnerHTMLʣ • ςετΛߟ͑Δͱ಄௧͍ • ࣺͯͯΔ఺ •

    ͳΔ΂͘angular rendererʹد͍ͤͯΔ͕ͦΕͰ΋ nativeElementΊͬͪΌ࢖ͬͯΔɻͳͷͰผεϨουܥ͸ ΩϏγΠʢweb workerɺServerSideRenderingʣ
30. 30.

    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%