Slide 1
Slide 1 text
B u i l d a n d S c a l e
M u l t i p l e Vo i c e A p p l i c a t i o n
B y u s i n g Ty p e S c r i p t
J S C o n f J P 2 0 1 9
#jsconfjp
Slide 2
Slide 2 text
H i d e t a k a
O k a m o t o
• Digitalcube Co. Ltd.
• JS developer (React / Serverless)
• Talk about Alexa since 2016
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
A g e n d a
• ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ
• Amazon AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝
• ෳͷΞϓϦ։ൃɾӡ༻ΛޮԽ͢Δ
#jsconf
Slide 7
Slide 7 text
D o N O T t a l k
• ରϞσϧͷ࡞νϡʔχϯά
• εϚʔτεϐʔΧʔʢA / G / LʣҎ֎ͷVUIΞϓϦέʔγϣϯ
• AWS LambdaΫϥυΠϯϑϥͷΞʔΩςΫτ
#jsconf
Slide 8
Slide 8 text
A g e n d a
• ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ
• Amazon AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝
• ෳͷΞϓϦ։ൃɾӡ༻ΛޮԽ͢Δ
#jsconf
Slide 9
Slide 9 text
Ի ɾ ݴ ޠ ॲ ཧ ܥ ͷ ࣝ ͕ ͳ ͘ ͯ ։ ൃ Մ ೳ
• STT (Speech To Text) / NLU (ࣗવݴޠॲཧ)αʔϏεଆͷ
• ձͷαϯϓϧ༻ޠूΛొ͢Δ͚ͩͰ͍͍ͩͨOK
• όοΫΤϯυʹSTT / NLUॲཧޙͷJSON͕ૹΒΕΔ
• TTS(Text to Speech)ಉ༷ɺJSONΛreturn͢ΕԻԽ͞ΕΔ
#jsconf
Slide 10
Slide 10 text
V U I Ξ ϓ Ϧ ։ ൃ ˺ We b h o o k ࣮
• SlackLINEͳͲͷbotʹ͍ۙΠϝʔδ
• POSTͰ͘ΔJSONΛಡΜͰॲཧ͠ɺฦΛJSONͰฦ͢
• 1ձ 1Webhook࣮ߦͳͷͰɺσϑΥϧτͰStateless
• ࣮ࡍʹจ຺աڈͷΓͱΓΛهԱ͢Δඞཁ͕͋ΓɺDBΛ͏
#jsconf
Slide 11
Slide 11 text
A g e n d a
• ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ
• Amazon AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝
• ෳͷΞϓϦ։ൃɾӡ༻ΛޮԽ͢Δ
#jsconf
Slide 12
Slide 12 text
A l e x a Ͱ ͑Δ Ξ ϓ Ϧ = εΩϧ
Slide 13
Slide 13 text
Ұ ൠ త ͳ Ξ ϓ Ϧ έ ʔ γ ϣ ϯ : Χ ε λϜ εΩϧ
Slide 14
Slide 14 text
A l e x a εΩϧ ͷ छ ྨ
• εϚʔτϗʔϜεΩϧɹɹɿεϚʔτϗʔϜ
• ϑϥογϡχϡʔεεΩϧɿFeedهࣄಡΈ্͛
• ϏσΦεΩϧɹɹɹɹɹɹɿಈը࠶ੜ
• ΧελϜεΩϧɹɹɹɹɹɿͦΕҎ֎ʢήʔϜ / Util / ങ͍ / etcʣ
• Music Skillɹɹɹɹ(ຊޠະରԠ)ɹɹ ɹɹ ɿԻָͷ࠶ੜ
• Baby Activity Skill (ຊޠະରԠ) ɹɹɹɹ ɿ͓Ήͭͷަ / ৯ࣄ / ਭ / ମॏͷهͳͲ
• Meetingsɹɹɹɹ(ຊޠະରԠ)ɹɹɹɹ ɿAlexa For BussinessΛར༻ͨ͠ձٞࣨ༧
Slide 15
Slide 15 text
A l e x a ͷ Ξ ϓ Ϧ ( εΩϧ ) ։ ൃ
• AWS͕༻͍ΒΕΔ͜ͱ͕Ұൠత
• AWS Lambda·ͨHTTPS API͕ૹ৴ઌʹࢦఆͰ͖Δ
• ASK CLI (Node.js)ͰAWS Lambda͕σϓϩΠ͞ΕΔ
• ϦΫΤετͷॲཧϨεϙϯεͷ࡞ʹask-sdkΛར༻͢Δ
#jsconf
Slide 16
Slide 16 text
n p m i - S a s k - s d k
• AlexaεΩϧ։ൃͷͨΊͷSDK (TypeScript)
• lernaΛͬͯϞϊϨϙԽ͞Ε͍ͯΔ
• TypeScriptͷ߹ask-sdk-modelͰϦΫΤετͷܕใΛར༻͢Δ
#jsconf
Slide 17
Slide 17 text
a s k - s d k ϥ Π ϒ ϥ Ϧ ( 2 0 1 9 / 1 1 ࣌ )
• ask-sdk-coreɹɹɹɹɹɹɹɹɹɹɹɹ :ຊମ
• ask-sdk-runtimeɹɹɹɹɹɹɹɹɹɹɹ: ࣮ߦॲཧ෦
• ask-sdk-dynamodb-persistence-adapter: DynamoDB༻Ξμϓλ
• ask-sdk-s3-persistence-adapterɹɹɹɹ: S3ΛDBʹ͏ͨΊͷΞμϓλ
• ask-sdk-express-adapterɹɹɹɹɹɹ : ExpressͰಈ͔ͨ͢ΊͷΞμϓλ
• ask-sdk-v1adapterɹɹɹɹɹɹɹɹɹ : Alexa SDK(v1)༻Ξμϓλ
#jsconf
Slide 18
Slide 18 text
•S k i l l B u i l d e r s ʹ
R e q u e s t H a n d l e r ొ
•্ ͔ Β ॱ ʹ
c a n H a n d l e ͕ ࣮ ߦ
•t r u e Λ ฦ ͠ ͨ O b j e c t ͷ
h a n d l e ͕ ࣮ ߦ ͞ Ε Δ
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
A S K S D K ͕ ͬͯ ͍ Δ ͜ ͱ
Slide 23
Slide 23 text
Ұ ൠ త ͳ ॻ ͖ ํ
export handler = Ask.SkillBuilders.custom()
.addRequestHandlers(...)
.lambda()
Slide 24
Slide 24 text
AW S L a m b d a ϥ ΠΫ ʹ ॻ ͖ ͢ͱ ͜ ͏ ͳ Δ
export handler = Ask.SkillBuilders.custom()
.addRequestHandlers(...)
.lambda()
export const handler= async (event) => {
return Ask.SkillBuilders.custom()
.addRequestHandlers(...)
.create().invoke(event)
}
Slide 25
Slide 25 text
l a m b d a ( ) ͕ ෦ Ͱ . c re a t e ( ) . i n v o k e ( e v e n t ) Λ ࣮ ߦ
export handler = Ask.SkillBuilders.custom()
.addRequestHandlers(...)
.lambda()
export const handler= async (event) => {
return Ask.SkillBuilders.custom()
.addRequestHandlers(...)
.create().invoke(event)
}
Slide 26
Slide 26 text
i n v o k e ( ) Ͱ e v e n t Λ h a n d l e r I n p u t ʹ ม
const input : HandlerInput = {
requestEnvelope, //͜Ε͕event
context,
attributesManager : AttributesManagerFactory.init({
requestEnvelope,
persistenceAdapter : this.persistenceAdapter,
}),
responseBuilder : ResponseFactory.init(),
serviceClientFactory : this.apiClient
? new ServiceClientFactory({
apiClient : this.apiClient,
apiEndpoint : requestEnvelope.context.System.apiEndpoint,
authorizationValue : requestEnvelope.context.System.apiAccessToken,
})
: undefined,
};
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/blob/2.0.x/ask-sdk-core/lib/skill/CustomSkill.ts#L65
Slide 27
Slide 27 text
h a n d l e r I n p u t ͷ த ֓ આ
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 28
Slide 28 text
Ϧ Ϋ Τ ε τ ༰ ( I n t e n t / S l o t / e t c . . ) Λ औ ಘ ͢ Δ
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 29
Slide 29 text
L a m b d a ͷ ֤ छ ใ ͕ ೖ ͬͯ ͍ Δ
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 30
Slide 30 text
η ο γ ϣ ϯ D B σ ʔ λ ͳ Ͳ ͷ ॲ ཧ ʹ ͏
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 31
Slide 31 text
ฦ ༰ ͷ ࡞ ʹ ͏
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 32
Slide 32 text
C u s t o m e r P ro f i l e A P I ͳ Ͳ ͷ ଓ ʹ ͏
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 33
Slide 33 text
ॏ ཁ : ৭ > ࠇ ৭ > փ ৭
handerInput: {
requestEnvelope: Alexa͔ΒͷϦΫΤετ༰(=event),
context: LambdaͷίϯςΩετ(=context),
attributesManager: attributeૢ࡞ܥʹ͔ͭ͏,
responseBuilder: Ϩεϙϯεੜʹ͔ͭ͏,
serviceClientFactory: ֤छAPIαʔϏεʹଓ͢ΔͨΊʹ͔ͭ͏
}
Slide 34
Slide 34 text
a s k - s d k Λ ͬ ͨ A l e x a εΩϧ ։ ൃ ೖ
• SkillBuildersʹRequestHandlerΛ͍ͬͺ͍ొ͢Δ͚ͩ
• ϦΫΤετຊମTypeScript + IDEͷิΛ͏ͱಡΈ͍͢
• ࠷ۙgetUserIdͷΑ͏ͳutil͕ؔίΞʹ֦ॆ͞Εͭͭ͋Δ
• GitHub (github.com/alexa)ʹαϯϓϧ͕ଟ͋Γɺ
git cloneޙʹൃ༰ͳͲΛௐ͢Εͦͷ··͑Δ
#jsconf
Slide 35
Slide 35 text
ͦ ͷ Ұ ํ Ͱ
Slide 36
Slide 36 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• Lambdaؔͷ͕εΩϧʹൺྫͯ͠૿Ճ
-> runtimeߋ৽ͳͲͷཧίετ͕ண࣮ʹ૿͑ͯߦ͘
• ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
-> ̍εΩϧͰߋ৽ͨ͠ͷΛෳεΩϧʹखಈө͢Δඞཁ͕ൃੜ
• ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ
#jsconf
Slide 37
Slide 37 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• Lambdaؔͷ͕εΩϧʹൺྫͯ͠૿Ճ
-> runtimeߋ৽ͳͲͷཧίετ͕ண࣮ʹ૿͑ͯߦ͘
• ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
-> ̍εΩϧͰߋ৽ͨ͠ͷΛෳεΩϧʹखಈө͢Δඞཁ͕ൃੜ
• ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ
#jsconf
Slide 38
Slide 38 text
ଟ ػ ೳ ͳ ̍ εΩϧ ͔ ɺ ୯ ػ ೳ ͳ ෳ εΩϧ ͔
• ݁ͷͳ͍ٞʢ͓ͦΒ͘ʣ
• ଟػೳͳεΩϧɺʮͲͷػೳΛ͏͔ʯͱ͍͏ձ͕ൃੜ͢Δ
• ࣮ࡍͷϢʔβʔʮͰ͖Δ͚͍ͩձͰతΛୡ͍ͨ͠ʯ
• ݺͼग़໊͠ʢεΩϧ໊ʣΛػೳ໊ʹͨ͠୯ػೳεΩϧͷԣల։
• ʮతͷεΩϧΛݟ͚ͭΒΕΔ͔ʯͱ͍͏SEO / Ϛʔέత՝
#jsconf
Slide 39
Slide 39 text
A g e n d a
• ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ
• Amazon AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝
• ෳͷΞϓϦ։ൃɾӡ༻ΛޮԽ͢Δ
#jsconf
Slide 40
Slide 40 text
5 0 εΩϧ ఔ Λ Ϧ Ϧ ʔε & ։ ൃ
Slide 41
Slide 41 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• Lambdaؔͷ͕εΩϧʹൺྫͯ͠૿Ճ
-> runtimeߋ৽ͳͲͷཧίετ͕ண࣮ʹ૿͑ͯߦ͘
• ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
-> ̍εΩϧͰߋ৽ͨ͠ͷΛෳεΩϧʹखಈө͢Δඞཁ͕ൃੜ
• ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ
#jsconf
Slide 42
Slide 42 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• ΠϯϑϥͷཧΛ͍͔ʹޮԽ͢Δ͔
• ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
-> ̍εΩϧͰߋ৽ͨ͠ͷΛෳεΩϧʹखಈө͢Δඞཁ͕ൃੜ
• ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ
#jsconf
Slide 43
Slide 43 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• ΠϯϑϥͷཧΛ͍͔ʹޮԽ͢Δ͔
• ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔
• ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ
#jsconf
Slide 44
Slide 44 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• ΠϯϑϥͷཧΛ͍͔ʹޮԽ͢Δ͔
• ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔
• ΞϓϦέʔγϣϯͦͷͷΛ࠶ར༻Մೳʹ͢Δ
#jsconf
Slide 45
Slide 45 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• ΠϯϑϥͷཧΛ͍͔ʹޮԽ͢Δ͔
-> Infrastructure as a Code (IaaC)
• ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔
• ΞϓϦέʔγϣϯͦͷͷΛ࠶ར༻Մೳʹ͢Δ
#jsconf
Slide 46
Slide 46 text
S e r v e r l e s s F W ͷ ྫ
Slide 47
Slide 47 text
•r u n t i m e AW S I A M Λ
ू ཧ
•p ro v i d e Λ ߋ ৽ ͢ Ε
ཧ Լ ͷ εΩϧ Λ
· ͱ Ίͯ ߋ ৽ Ͱ ͖ Δ
•ઃ ఆ Λ · ͱ Ί Δ ͜ ͱ Ͱ
Ճ ࣌ ͷ ઃ ఆ ࿙ Ε ࢭ
Slide 48
Slide 48 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• ΠϯϑϥͷཧΛ͍͔ʹޮԽ͢Δ͔
• ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔
• ΞϓϦέʔγϣϯͦͷͷΛ࠶ར༻Մೳʹ͢Δ
#jsconf
Slide 49
Slide 49 text
ί ʔ υ ྔ ͕ ݮ Δ ͜ ͱ ͍ ͍ ͜ ͱ ͩ
• ask-sdk”൚༻తʹ͑Δఔ”ʹ࡞ΒΕ͍ͯΔ
• ͦͷͨΊɺతͳίʔυ͕ൃੜ͢Δ͜ͱ͕গͳ͔Βͣ͋Δ
• ίϐϖͰྑ͍͕ɺ൚༻ؔΛ࡞ΕίʔυྔΛ͔ͳΓݮΒͤΔ
#jsconf
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/issues/490#issuecomment-442203625
Slide 50
Slide 50 text
ྫ ͑ ͜ ͏ ͍ ͏ ؔ
ʢ ֘ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ఆ ͢ Δ ʣ
Slide 51
Slide 51 text
ྫ ͑ ͜ ͏ ͍ ͏ ؔ
ʢ ֘ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ఆ ͢ Δ ʣ
Slide 52
Slide 52 text
ྫ ͑ ͜ ͏ ͍ ͏ ؔ
ʢ ֘ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ఆ ͢ Δ ʣ
Slide 53
Slide 53 text
ྫ ͑ ͜ ͏ ͍ ͏ ؔ
ʢ ֘ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ఆ ͢ Δ ʣ
Slide 54
Slide 54 text
B e f o re
Slide 55
Slide 55 text
A f t e r
Slide 56
Slide 56 text
c a n H a n d l e ͕ γ ϯ ϓϧ ʹ
Slide 57
Slide 57 text
ͨ · ʹ ͢ ͝ ͍ U n i o n ܕ ͕ ग़ ͯ͘Δ
Slide 58
Slide 58 text
a s Ty p e G u a rd Θ ͳ ͍ ͱ ٧ Ή ͱ ͖ ͕ ͋ Δ ͷ Ͱ ҙ
import { IntentRequest } from ‘ask-sdk-model’
…
const request = handlerInput.requestEnvelope.request as IntentRequest
const testSlot = request.intent.slots.hoge.value
Slide 59
Slide 59 text
ί Ξ ʹ P R ͩ ͢ͱ ɺ ׂ ͱ Ϛʔ δ ͯ͘͠Ε Δ
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/pull/582
Slide 60
Slide 60 text
Γ ํ · ͱ Ίͯ ͋ Γ · ͢
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/pull/582
h t t p s : / / w p - k y o t o . n e t / g e t - i n v o l v e d - a s k - s d k
Slide 61
Slide 61 text
ڞ ༗ Ͱ ͖ Δ ί ʔ υ Λ ૿ ͯ͠ ͳ ί ʔ υ Λ ݮ Β͢
• ask-sdk͚ͩͰίʔυ͕ʹͳΓ͕ͪ
• npmͰެ։͞Ε͍ͯΔϥΠϒϥϦ׆༻͢Δ
• ࣗͰ࡞ͬͨͷΛެ։͢ΔͱΑΓศརʹ
• ൚༻తʹ͑ͦ͏ͳΒask-sdkʹPull Requestͩͦ͏ʂ
#jsconf
Slide 62
Slide 62 text
͍ ͍ ײ ͡ ʹ ࡞ Ε Δ ϑ Ϩ ʔϜϫ ʔ Ϋ ͱ ͔ ͳ ͍ ͷ ʁ
#jsconf
Slide 63
Slide 63 text
͍ ͍ ײ ͡ ʹ ࡞ Ε Δ ϑ Ϩ ʔϜϫ ʔ Ϋ ͱ ͔ ͳ ͍ ͷ ʁ
#jsconf
ͳ ͍
Slide 64
Slide 64 text
͍ ͍ ײ ͡ ʹ ࡞ Ε Δ ϑ Ϩ ʔϜϫ ʔ Ϋ ͱ ͔ ͳ ͍ ͷ ʁ
• AlexaʹϝδϟʔͳϑϨʔϜϫʔΫ͕ଘࡏ͠ͳ͍
• εςʔτཧ / ϩΪϯά / GUI( APL ) / etc…
ࣗલͰServiceΛ࡞Βͳ͍ͱ͍͚ͳ͍ྖҬ͕͍
• ݸਓతʹʮVanilla JS -> jQuery (ΠϚίί) -> ???ʯͱ͍͏ೝࣝ
• Angular / React / Vue / Riot / etc..ͷΑ͏ʹ܈༤ׂڌʹͳΕ͍͍ͳ͊
#jsconf
Slide 65
Slide 65 text
εΩϧ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝ ɾ
• ΠϯϑϥͷཧΛ͍͔ʹޮԽ͢Δ͔
• ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔
• ΞϓϦέʔγϣϯͦͷͷΛ࠶ར༻Մೳʹ͢Δ
#jsconf
Slide 66
Slide 66 text
ί ϯ ςϯ π Ҏ ֎
΄ ΅ ಉ ͡ ࣮ ͩ ͔ Β
͜ Ε ࠶ ར ༻ ͠ ͨ ͍
Slide 67
Slide 67 text
ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ ΞΠ σΟ Ξ
• RequestHandlerΛڞ༗͢Δ
• SkillBuildersΛڞ༗͢Δ
• LambdaΛڞ༗͢Δ
#jsconf
Slide 68
Slide 68 text
ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ ΞΠ σΟ Ξ
• RequestHandlerΛڞ༗͢Δ
• SkillBuildersΛڞ༗͢Δ
• LambdaΛڞ༗͢Δ
#jsconf
Slide 69
Slide 69 text
R e q u e s t H a n d l e r ͷ ڞ ༗
• ͚ؔͩͰͳ͘ɺΦϒδΣΫτڞ༗ͯ͠͠·͏
• ಉҰϦϙδτϦͰཧ͍ͯ͠Εexport / import͢Δ͚ͩ
• ԣஅ͢Δ߹npm / GitHubͳͲΛܦ༝͢Δඞཁ͕͋Δ
• εΩϧʹΑͬͯมΘΔॲཧܥͦͷ··ॻ͔ͳ͍
#jsconf
Slide 70
Slide 70 text
R e q u e s t I n t e rc e p t o r Λ ͬ ͨ I n j e c t i o n
• ϦΫΤετલʹ࣮ߦͰ͖Δϋϯυϥʔ͕͋Δ -> RequestInterceptor
• RequestHandlerͷ֎͔ΒσʔλΫϥεͳͲΛͤΔ
• ΫΠζͷϨϕϧઃఆͳͲͷใ͜ΕΛͬͯͯ͠Δ
#jsconf
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
R e q u e s t H a n d l e r ʹ
ί ϯ ς ϯ π ͕ ॻ ͔ Ε ͳ ͍
↓
ॲ ཧ ܥ ౷ ͕ ࣅ ͯ ͍ Δ ͳ Β
࠶ ར ༻ Մ ೳ ʹ ͳ Δ
Slide 74
Slide 74 text
R e q u e s t A t t r i b u t e s Ͱ H a n d l e r ͷ ֎ ͔ Β σ ʔ λ Λ ೖ Ε Δ
• attributesManager.getRequestAttributes() &
setRequestAttributes(any)
• ॲཧ(return͢Δ·Ͱ)Ͱ͋Εsetͨ͠ͷΛgetͰ͖Δ
• i18nίϯςϯπੜΫϥεͳͲΛRequest࣌ʹηοτ͢Δ
• handlerଆgetͨ͠ͷΛ͑ɺhandlerΛStatelessʹͰ͖Δ
• anyܕͰget͢ΔͷͰɺ͕ͬͭΓ͏ͳΒTypeGuardͳͲΛ
#jsconf
Slide 75
Slide 75 text
ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ ΞΠ σΟ Ξ
• RequestHandlerΛڞ༗͢Δ
• SkillBuildersΛڞ༗͢Δ
• LambdaΛڞ༗͢Δ
#jsconf
Slide 76
Slide 76 text
ঢ় ଶ / ί ϯ ς ϯ π Λ
࣋ ͨ ͳ ͍ ϋ ϯ υ ϥ ʔ ܈
Slide 77
Slide 77 text
R e q u e s t I n t e rc e p t o r Ͱ શ ͯ Λ ઃ ఆ ͢ Δ
• RequestHandlerʮͲͷॲཧΛɺͲͷϦΫΤετͰߦ͏͔ʯʹઐ೦
• ʮԿΛ͔͢ʯRequestInterceptor͔ΒrequestAttributesʹInject
• SkillBuilderͷϝιουνΣʔϯͰinject͢Δͷ͚ͩޙ͔ΒՃՄೳ
• Α͘͏HandlerܥSkillBuilderϨϕϧͰ·ͱΊͯ͠·͏
#jsconf
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
S k i l l B u i l d e r Ϩ ϕ ϧ Ͱ ந Խ ͱ ڞ ༗ ʢ ࠶ ར ༻ ʣ
• ࣅͨଐੑͷεΩϧʢΫΠζܥɾܭࢉܥɾΞϥʔϜܥͳͲʣͰ༗ޮ
• ίϯςϯπ͚ͩࠩ͠ସ͑ΕΑ͍߹ɺInterceptorͰ֎͔ΒೖΕΔ
• ഁյతมߋ࣌ͷӨڹൣғ͕େ͖͘ͳΔσϝϦοτ
• ܕϢχοτ / E2E ςετͳͲͰӨڹ߹͍Λ֬ೝ͢Δඞཁ͕͋Δ
#jsconf
Slide 83
Slide 83 text
ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ ΞΠ σΟ Ξ
• RequestHandlerΛڞ༗͢Δ
• SkillBuildersΛڞ༗͢Δ
• LambdaΛڞ༗͢Δ
#jsconf
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
A l e x a εΩϧό ο Ϋ Τ ϯ υ ͷ ޮ త ͳ εέ ʔ ϧ
• ॲཧ / ΦϒδΣΫτ / Lambda FunctionͦΕͧΕͰநԽ͢Δ
• InterceptorͰ֎͔ΒεΩϧຖͷใΛsetͯ͠ΔܗΛΉ
• TypeScriptΛ͏͜ͱͰɺநԽϛεΛؾ͖͘͢͢Δ
• ͍͍ײ͡ͷϑϨʔϜϫʔΫͩΕ͔࡞ͬͯͱ͍͏ؾ࣋ͪΛ๊͖ͳ͕Β
ϓϩτతͳΦϨΦϨFWΛ࡞ࣺͬͯͯΔ
#jsconf
Slide 87
Slide 87 text
· ͱ Ί
• VUIWebhookϥΠΫʹ։ൃ͢Δ͜ͱ͕Ͱ͖Δ
• Input / OutputϑΥʔϚοτ͕ҰఆͷͨΊɺTypeScriptͱ૬ੑ͕ྑ͍
• ൚༻తFW͕ͳ͍ͨΊɺటष͍࣮ʹͳΓ͍͢ݱ࣮͕͋Δ
• ઃܭɾΞΠσΟΞΛڞ༗͠߹͍ɺΑΓྑ͍ํ๏Λ୳͠ଓ͚Α͏
#jsconf