chat bot UI by Angular (ng-japan meetup)

by Toshiya Tanaka

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

about me • TanakaToshiya • @studioTeaTwo • angular͸ࠓ೥5݄͔Βɻڈ೥͸reactɺ ଞʹpureMVCɾbackboneɾcreateJS ͳͲ • ڈ೥·Ͱ5೥΄Ͳιγϟή΍͍ͬͯ ͨɻࠓ͸ίϯγϡʔϚܥͷwebαʔϏ εΛ࡞͍ͬͯ·͢ɻ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ؾ࣋ͪΑ͞ͷ࿩

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ʮΘ͔Γ΍͢͞ʯͷ࿩

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

σϞ

Slide 19

Slide 19 text

εςοϓ 1. ;ͭ͏ʹνϟοτػೳΛ࡞Δ 2. ϥδΦϘλϯ΍νΣοΫϘοΫεͳͲͷΞϯέʔτUIΛνϟοτ ʹ૊ΈࠐΉ 3. νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢ୆ຊʣΛ༻ ҙ͢Δ 4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ • νϟοτιʔεʹձ࿩εΫϦϓτΛྲྀ͠ࠐΜͩΓɺ • ֤छϋϯυϥΛoverrideͯ͠ݻ༗ͷΞΫγϣϯΛఆٛͯ͠ɺ • දࣔλΠϛϯά΍Ξχϝʔγϣϯ΍SEʢsoundEffectʣΛઃஔ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

• ୆ຊʹै͍ɺνϟοτιʔεʹձ࿩εΫϦϓτΛྲྀ͠ࠐΉ 4. BOTʢφϏΩϟϥʣͷৼΔ෣͍Λ࢓ࠐΜͰ͍͘ ηϦϑΛ࡞੒ ChatStreamʢRxʣʹྲྀ͠ࠐΉ • chat௥Ճ͸ؔ਺Խͯ͠ɺsubjectʹnext͢ΔλΠϛϯάʹɺdelay͔͚ͨΓɺΞχϝɺ soundEﬀectΛࢦఆ͍ͯ͠Δ • DOM৮Δܥ͸ɺcallbackͰ౤͛ࠐΊ͹scopeΛcomponentͷ··ʹ֎෦ʹ੾Γग़ͤΔ sound࠶ੜ css animeͷ੾Γସ͑ දࣔλΠϛ ϯάͷௐ੔

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Ҏ্ʹΑΓɺ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

·ͱΊʢProsʣ • formΛ࢖Θͳ͍ͷʹangularͰίϯγϡʔϚʔܥΛ࡞Δཧ ༝ • ΘΓͱૉͰhtml5/css3Λॻ͚Δʢcss animeɺvideo/ audioɺcameraɺcanvasΒʣɻͳͷͰmedia΍deviceܥ ͷHTML΋ɺMDNͳͲͷαϯϓϧίʔυͷίϐϖϕʔε Ͱ͍͚Δ • ڧྗͳϑϨʔϜϫʔΫʹج൫Λ೚ͤͯʢcliɺrouterɺDI ίϯςφΒʣɺϢʔβʔΠϯλʔϑΣʔεʹ஫ྗͰ͖Δ

Slide 29

Slide 29 text

·ͱΊʢConsʣ • ͭΒ͍఺ • खಈͰXSSରࡦʢinnerHTMLʣ • ςετΛߟ͑Δͱ಄௧͍ • ࣺͯͯΔ఺ • ͳΔ΂͘angular rendererʹد͍ͤͯΔ͕ͦΕͰ΋ nativeElementΊͬͪΌ࢖ͬͯΔɻͳͷͰผεϨουܥ͸ ΩϏγΠʢweb workerɺServerSideRenderingʣ

Slide 30

Slide 30 text

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