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.3k
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
860
@angular/elementsをもうちょっと追いかけてみる
studioteatwo
1
340
Other Decks in Technology
See All in Technology
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
100
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
800
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
400
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
830
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
240
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
Featured
See All Featured
Side Projects
sachag
455
43k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Statistics for Hackers
jakevdp
799
220k
Context Engineering - Making Every Token Count
addyosmani
2
41
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fireside Chat
paigeccino
39
3.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Agile that works and the tools we love
rasmusluckow
330
21k
Balancing Empowerment & Direction
lara
3
620
Into the Great Unknown - MozCon
thekraken
40
2k
Gamification - CAS2011
davidbonilla
81
5.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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ʣ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%