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
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
310
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
0
270
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
350
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
190
恐怖!テストコードなき夜
tsukuboshi
2
110
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
120
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
450
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
170
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
0
260
With Devin -AIの自律とメンバーの自立
kotanin0
2
960
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
320
alecthomas/kong はいいぞ
fujiwara3
6
1.2k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Being A Developer After 40
akosma
90
590k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Testing 201, or: Great Expectations
jmmastey
44
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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ʣ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%