Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
chat bot UI by Angular (ng-japan meetup)
Search
Toshiya Tanaka
October 10, 2017
Technology
2
1.2k
chat bot UI by Angular (ng-japan meetup)
Toshiya Tanaka
October 10, 2017
Tweet
Share
More Decks by Toshiya Tanaka
See All by Toshiya Tanaka
hololens-meetup_20180218.pdf
studioteatwo
1
850
@angular/elementsをもうちょっと追いかけてみる
studioteatwo
1
320
Other Decks in Technology
See All in Technology
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
FastConnect の冗長性
ocise
1
9.6k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
Featured
See All Featured
Building an army of robots
kneath
302
45k
BBQ
matthewcrist
86
9.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Producing Creativity
orderedlist
PRO
343
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A designer walks into a library…
pauljervisheath
205
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Transcript
AngularͰνϟοτBOTʢ˞AIແ͍Αʣ࡞ͬͨ 2017/10/10 ng-japan meetup LTࢿྉ @stutioTeaTwo
about me • TanakaToshiya • @studioTeaTwo • angularࠓ5݄͔Βɻڈreactɺ ଞʹpureMVCɾbackboneɾcreateJS ͳͲ
• ڈ·Ͱ5΄Ͳιγϟή͍ͬͯ ͨɻࠓίϯγϡʔϚܥͷwebαʔϏ εΛ࡞͍ͬͯ·͢ɻ
ࠓ͢͜ͱ • formModuleΛΘͳ͍angularͷ׆༻ࣄྫΛ͠·͢ ʢngModelͪΐͼͬͱ͏ʣ • φϏΩϟϥΛ૬खʹͨ͠νϟοτUIͰɺΞχϝSE ৫ΓަͥͨΠϯλϥΫςΟϒͳೖྗΠϯλʔϑΣʔεΛ ࡞ͬͨࣄྫͰ͢ɻ • ʮϢʔβʔΠϯλʔϑΣʔεͷؾ࣋ͪΑ͞ͷͨΊʹʯ
ಥવͰ͕͢খ͍͞UXͷΛ͠·͢✋
https://twitter.com/fladdict/status/902392576828784640 ࠓ͜͜ʂ UXରൣғ͕ͯ͘ΊΜͲ͍͘͞ ਓʹΑͬͯࢥ͍ඳ͘ͷ͕มΘΔ͔ΒͰ͢
େ͖͍UX͜͏͍ͬͨॻ੶ΛͲ͏ͧʢಡΜͰ Δਓଟ͍ͱࢥ͍·͕͢ʣ
খ͍͞UXʢ༻தͷUXʣͱԿ͔ʁ
ݟͨ ʢ৭ɺϨΠΞ τɺύʔπͷܗঢ়ʣ ಈ͖ ʢUIΞΫγϣϯɺ ॲཧ࣌ؒʣ ʮΘ͔Γ͢͞ʯ+ʮؾ࣋ͪΑ͞ʯ webαΠτ
ʮΘ͔Γ͢͞ʯ+ʮؾ࣋ͪΑ͞ʯͷώϯτΛήʔϜʹٻ ΊͯΈΔ
ؾ࣋ͪΑ͞ͷ
http://news.denfaminicogamer.jp/weekly-ranking/tbotw_20170325 ిϑΝϛχίήʔϚʔʮʰθϧμͷઆ ϒϨε Φϒ β ϫΠϧυʱͷ͢Β͠͞ΛਤͰઆ໌ͯ͠Έ Δɻ͋ͱσδλϧήʔϜʹ͓͚Δʮָ͠͞ͷςϯϙͱϦζϜʯͷॏཁੑʹ͍ͭͯʯʯΑΓҾ༻
ςϯϙ Ի λΠϛϯά http://news.denfaminicogamer.jp/weekly-ranking/tbotw_20170325 ిϑΝϛχίήʔϚʔʮʰθϧμͷઆ ϒϨε Φϒ β ϫΠϧυʱͷ͢Β͠͞ΛਤͰઆ໌ͯ͠Έ Δɻ͋ͱσδλϧήʔϜʹ͓͚Δʮָ͠͞ͷςϯϙͱϦζϜʯͷॏཁੑʹ͍ͭͯʯʯΑΓҾ༻
ʮΘ͔Γ͢͞ʯͷ
http://news.denfaminicogamer.jp/interview/170927 ిϑΝϛχίήʔϚʔʮງҪ༤ೋΠϯλϏϡʔʳʮ༐ऀͱɺఘΊͳ͍ਓʯ――υϥΫΤ͕Μͩຊਓ ͷ“RPGීٴେ࡞ઓ”ɻੜΈͷ͕ޠΔྺγϦʔζ੍࡞ൿɺͦͯ͠৽࡞ޭͷώϛπʯΑΓҾ༻
ͳΔ΄Ͳɻ͕ͩɺ Ͳ͏αΠτΛ࡞͍͍ͬͨΜͩΖ͏ʁ
νϟοτΜ http://news.denfaminicogamer.jp/interview/170927 ిϑΝϛχίήʔϚʔʮງҪ༤ೋΠϯλϏϡʔʳʮ༐ऀͱɺఘΊͳ͍ਓʯ――υϥΫΤ͕Μͩຊਓ ͷ“RPGීٴେ࡞ઓ”ɻੜΈͷ͕ޠΔྺγϦʔζ੍࡞ൿɺͦͯ͠৽࡞ޭͷώϛπʯΑΓҾ༻
ͱ͍͏͜ͱͰɺҰࡢόζͬͨɺ͚Ͳ͋Μ·Γྲྀ ߦΒͳ͔ͬͨʢؾ͕͢ΔʣɺνϟοτBOTΛ࡞ͬ ͯΈΑ͏ʂangular Ͱɻ
σϞ
εςοϓ 1. ;ͭ͏ʹνϟοτػೳΛ࡞Δ 2. ϥδΦϘλϯνΣοΫϘοΫεͳͲͷΞϯέʔτUIΛνϟοτ ʹΈࠐΉ 3. νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢຊʣΛ༻ ҙ͢Δ 4.
BOTʢφϏΩϟϥʣͷৼΔ͍ΛࠐΜͰ͍͘ • νϟοτιʔεʹձεΫϦϓτΛྲྀ͠ࠐΜͩΓɺ • ֤छϋϯυϥΛoverrideͯ͠ݻ༗ͷΞΫγϣϯΛఆٛͯ͠ɺ • දࣔλΠϛϯάΞχϝʔγϣϯSEʢsoundEffectʣΛઃஔ
1. ;ͭ͏ʹνϟοτػ ೳΛ࡞Δ • ಛఆͷ૬खͱdirectMessage • ͓ͳ͡ΈLINE෩ͱ͔twitterDM ෩ͱ͔Messanger෩ͱ͔ • طಡදࣔɺελϯϓ
ɺΞοϓϩʔ υͳͲ
2.ϥδΦϘλϯνΣοΫϘοΫεͳͲͷΞϯέʔτUI ΛνϟοτʹΈࠐΉ • messageͷ̍छྨͱͯ͠ఆ͍ٛͯ͠Δ ϊʔϚϧϝοηʔδ ΞϯέʔτUIʢex.νΣοΫϘοΫεʣ νΣοΫϘο ΫεΛੜ͢ ίϯςϯπछ ྨΛৼΓ͚
innerHTMLͰ࣭ จΛ࡞
3.νϟοτComponentΛܧঝͯ͠ɺBOT૬ख༻ͷScriptʢ ຊʣΛ༻ҙ͢Δ • templateύεϕλॻ͖ʹͳΔʢ@Componentݱ࣌ͰMetaTag≒JSྖҬͰ ແ͍͔ΒมΛ͑ͳ͍ʣ templateΦϦδφ ϧ͚Δ ChatComponetΛܧঝ • component.tsͱcomponent.spec.ts͚ͩىͯ͜͠Scriptʢຊʣʹ͢Δ
ΞχϝΩʔϓϩύςΟ ͚ͩ߹Θ্ͤͯॻ͖
• ຊʹै͍ɺνϟοτιʔεʹձεΫϦϓτΛྲྀ͠ࠐΉ 4. BOTʢφϏΩϟϥʣͷৼΔ͍ΛࠐΜͰ͍͘ ηϦϑΛ࡞ ChatStreamʢRxʣʹྲྀ͠ࠐΉ • chatՃؔԽͯ͠ɺsubjectʹnext͢ΔλΠϛϯάʹɺdelay͔͚ͨΓɺΞχϝɺ soundEffectΛࢦఆ͍ͯ͠Δ •
DOM৮ΔܥɺcallbackͰ͛ࠐΊscopeΛcomponentͷ··ʹ֎෦ʹΓग़ͤΔ sound࠶ੜ css animeͷΓସ͑ දࣔλΠϛ ϯάͷௐ
4. BOTʢφϏΩϟϥʣͷৼΔ͍ΛࠐΜͰ͍͘ • όϦσʔτΤϥʔͷϢʔβʔϑΟʔυόοΫձͷ ΩϟονϘʔϧͰ͋ΔɻͳͷͰख࡞ΓͰฦ͢ɻ 1ճ͚ͩετ ϦʔϜʹྲྀ͢
Ҏ্ʹΑΓɺ
ʮΘ͔Γ͢͞ʯˠνϟοτܗࣜͰφϏΩϟϥ͕ೖྗΛ Ϧʔυ ʮؾ࣋ͪΑ͞ʯˠదٓͷදࣔλΠϛϯάɺΞχϝɺԻ
Ͱ͖ͨ ʢυϥΫΤ͕Ͱ͖ͨͱݴ͍ͬͯͳ͍ʣ
·ͱΊʢProsʣ • formΛΘͳ͍ͷʹangularͰίϯγϡʔϚʔܥΛ࡞Δཧ ༝ • ΘΓͱૉͰhtml5/css3Λॻ͚Δʢcss animeɺvideo/ audioɺcameraɺcanvasΒʣɻͳͷͰmediadeviceܥ ͷHTMLɺMDNͳͲͷαϯϓϧίʔυͷίϐϖϕʔε Ͱ͍͚Δ
• ڧྗͳϑϨʔϜϫʔΫʹج൫ΛͤͯʢcliɺrouterɺDI ίϯςφΒʣɺϢʔβʔΠϯλʔϑΣʔεʹྗͰ͖Δ
·ͱΊʢConsʣ • ͭΒ͍ • खಈͰXSSରࡦʢinnerHTMLʣ • ςετΛߟ͑Δͱ಄௧͍ • ࣺͯͯΔ •
ͳΔ͘angular rendererʹد͍ͤͯΔ͕ͦΕͰ nativeElementΊͬͪΌͬͯΔɻͳͷͰผεϨουܥ ΩϏγΠʢweb workerɺServerSideRenderingʣ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%