Upgrade to Pro — share decks privately, control downloads, hide ads and more …

chat bot UI by Angular (ng-japan meetup)

chat bot UI by Angular (ng-japan meetup)

49899d411b88461a3a3d538b598949e2?s=128

Toshiya Tanaka

October 10, 2017
Tweet

More Decks by Toshiya Tanaka

Other Decks in Technology

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%