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
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
エラーとアクセシビリティ
schktjm
1
1.2k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
150
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
360
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
230
S3アクセス制御の設計ポイント
tommy0124
3
190
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Docker and Python
trallard
45
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Done Done
chrislema
185
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
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ʣ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠%