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
330
Other Decks in Technology
See All in Technology
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.8k
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
o11yツールを乗り換えた話
tak0x00
1
210
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
290
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
340
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
720
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
510
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Building Applications with DynamoDB
mza
95
6.5k
A better future with KSS
kneath
238
17k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Invisible Side of Design
smashingmag
301
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
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ʣ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%