JavaScriptではじめる 音声コミュニケーション入門

JAWS-UG KOBE Alexa meetup #08

Transcript

1. J a v a S c r i p t Ͱ ͸ ͡ Ί Δ Ի ੠ ί ϛ ϡ χέ ʔ γ ϣ ϯ ೖ ໳ J A W S - U G K O B E A l e x a m e e t u p # 0 8
2. H i d e t a k a O k a m o t o • Digitalcube Co. Ltd. • WordCamp Kyoto 2017࣮ߦҕһ௕ • React / ASK / WordPress / CloudFormation
3. ࠓ ೔ ͷ ࿩ • Alexa͸͍͍ͧ • ҙ֎ͱ؆୯ʹ࡞ΕΔԻ੠UI • Serverless FrameworkͱNode.jsͰAlexa SkillΛ࡞੒ɾӡ༻͢Δ #getshifter
4. A l e x a ͸ ͍ ͍ ͧ
6. https://www.youtube.com/watch?v=bpR7xzr7ipM https://www.youtube.com/watch?v=bpR7xzr7ipM https://www.youtube.com/watch?v=bpR7xzr7ipM
7. A l e x a S k i l l s • Skill = AlexaͰ࢖͑ΔΞϓϦέʔγϣϯ • amazon.comʹܝࡌՄೳ • χϡʔεϦʔμʔ΍ΫΠζetc… • ཁdeveloperΞΧ΢ϯτ https://amimoto-ami.com/amimoto-ninja/ https://www.amazon.com/Daily-New-York-Times/dp/B01MY9B5BB/ https://www.amazon.com/Digitalcube-Inc-Shifter-man/dp/B07572D7N8/
8. https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Dalexa-skills&field-keywords=
9. https://amazon-press.jp/Top-Navi/Press-releases/Presselist/Press-release/amazon/jp/ Devices/2017/Amazon-Alexa-1002/
10. ҙ ֎ ͱ ؆ ୯ ʹ ࡞ Ε Δ Ի ੠ U I
11. A u d i o C a p t u re A u d i o P l a y b a c k C a l l w e b A P I Ta l k s o m t h i n g R e s p o n c e S p e e c h t o Te x t Te x t t o S p e e c h
12. A u d i o C a p t u re A u d i o P l a y b a c k C a l l w e b A P I Ta l k s o m t h i n g R e s p o n c e S p e e c h t o Te x t Te x t t o S p e e c h A l e x a S k i l l s K i t
13. A u d i o C a p t u re A u d i o P l a y b a c k C a l l w e b A P I Ta l k s o m t h i n g R e s p o n c e S p e e c h t o Te x t Te x t t o S p e e c h AW S L a m b d a w e b A P I A l e x a S k i l l s K i t
14. A u d i o C a p t u re A u d i o P l a y b a c k C a l l w e b A P I Ta l k s o m t h i n g R e s p o n c e S p e e c h t o Te x t Te x t t o S p e e c h w e b A P I ͩ ͚ ࡞ Ε ͹ ͍ ͍ A l e x a S k i l l s K i t
15. J S O N Λ ಡ ΜͰ J S O N Λ ฦ ͢
16. [ ج ຊ ] A l e x a S k i l l ͸ J S O N Λ ड ͚ औ ͬͯ J S O N Λ ฦ ͢ { " v e r s i o n " : " 1 . 0 " , " s e s s i o n " : { } , " c o n t e x t " : { " S y s t e m " : { " d e v i c e " : { } , " a p p l i c a t i o n " : { } , " u s e r " : { } , " a p i E n d p o i n t " : " h t t p s : / / a p i . a m a z o n a l e x a . c o m " } , } , " re q u e s t " : { " t y p e " : " I n t e n t R e q u e s t " , " re q u e s t I d " : " s t r i n g " , " t i m e s t a m p " : " s t r i n g " , " d i a l o g S t a t e " : " s t r i n g " , " l o c a l e " : " s t r i n g " , " i n t e n t " : { } } #getshifter
17. [ ج ຊ ] A l e x a S k i l l ͸ J S O N Λ ड ͚ औ ͬͯ J S O N Λ ฦ ͢ { " v e r s i o n " : " s t r i n g " , " re s p o n s e " : { " o u t p u t S p e e c h " : { " t y p e " : " s t r i n g " , " t e x t " : " s t r i n g " , " s s m l " : " s t r i n g " } , " c a rd " : { " t y p e " : " s t r i n g " , " i m a g e " : { " s m a l l I m a g e U r l " : " s t r i n g " , " l a rg e I m a g e U r l " : " s t r i n g " } … #getshifter
18. S p e e c h S y n t h e s i s M a r k u p L a n g u a g e ( S S M L ) < s p e a k > I w a n t t o t e l l y o u a s e c re t . < a m a z o n : e ff e c t n a m e = " w h i s p e re d " > I a m n o t a re a l h u m a n . < / a m a z o n : e ff e c t > . C a n y o u b e l i e v e i t ? Yo u s a y, < p h o n e m e a l p h a b e t = " i p a " p h = " p ɪ ˈ k ɑ ː n " > p e c a n < / p h o n e m e > . I s a y, < p h o n e m e a l p h a b e t = " i p a " p h = “ ˈ p i . k æ n " > p e c a n < / p h o n e m e > . < s a y - a s i n t e r p re t - a s = " t e l e p h o n e " > 0 1 2 0 - 0 0 0 - 0 0 0 0 < / s a y - a s > < / s p e a k > #getshifter
19. S S M L ͷ Ұ ෦ • amazon:effect : ࿩͠ํΛΧελϚΠζʢݱࡏ͸͞͞΍͖੠ͷΈʣ • audio: srcʹࢦఆͨ͠.mp3ϑΝΠϧͳͲΛ࠶ੜ͢Δ • break: ࢦఆͨ͠ϛϦඵ or ඵؒΛ։͚Δ • emphasis / p / phoneme / say-as / etc …
20. A l e x a S k i l l s K i t S D K f o r N o d e . j s E x a m p l e s • Hello World • RSS / ATOM Feed ͷಡΈ্͛ • ΫΠζήʔϜ • γςΟΨΠυ • etc… https://github.com/alexa/
21. A l e x a S D K Λ ࢖ ͏ ( 1 ) - Π ϯε τ ʔ ϧ $ n p m i n i t - y $ n p m i n s t a l l — s a v e a l e x a - s d k #getshifter
22. A l e x a S D K Λ ࢖ ͏ ' u s e s t r i c t ' ; c o n s t A l e x a = re q u i re ( ' a l e x a - s d k ' ) ; m o d u l e . e x p o r t s . h e l l o = ( e v e n t , c o n t e x t , c a l l b a c k ) = > { c o n s t a l e x a = A l e x a . h a n d l e r ( e v e n t , c o n t e x t , c a l l b a c k ) ; a l e x a . re g i s t e r H a n d l e r s ( h a n d l e r s ) ; a l e x a . e x e c u t e ( ) ; } ; #getshifter
23. A l e x a S D K Λ ࢖ ͏ ' u s e s t r i c t ' ; c o n s t A l e x a = re q u i re ( ' a l e x a - s d k ' ) ; m o d u l e . e x p o r t s . h e l l o = ( e v e n t , c o n t e x t , c a l l b a c k ) = > { c o n s t a l e x a = A l e x a . h a n d l e r ( e v e n t , c o n t e x t , c a l l b a c k ) ; a l e x a . re g i s t e r H a n d l e r s ( h a n d l e r s ) ; a l e x a . e x e c u t e ( ) ; } ; S D K ͷ ಡ Έ ࠐ Έ ϋ ϯ υ ϥ ͷ η ο τΞ οϓ ϋ ϯ υ ϥ ͷ ઃ ఆ ࣮ ߦ #getshifter
24. Πϕ ϯ τϋ ϯ υ ϥ ͸ O b j e c t ܗ ࣜ Ͱ v a r h a n d l e r s = { ' L a u n c h R e q u e s t ' : f u n c t i o n ( ) { t h i s . e m i t ( ' : t e l l ' , ' H e l l o ' ) ; } , } , ' N a m e I n t e n t ' : f u n c t i o n ( ) { c o n s t s l o t s = t h i s . e v e n t . re q u e s t . i n t e n t . s l o t s ; c o n s t n a m e Va l u e = s l o t s . N a m e S l o t . v a l u e ; t h i s . e m i t ( ' : t e l l ' , ` N i c e t o m e e t y o u , $ { n a m e Va l u e } . E n j o y A l e x a w o r l d ! ` ) ; } , } ; I N T E N T ໊ Λ Ω ʔ ʹ ͢ Δ S L O T ͷ ৘ ใ Λ औ ಘ ͢ Δ t h i s . e m i t ʹ Ϩε ϙ ϯε ͳ Ͳ Λ ॻ ͘ #getshifter
25. ஌ ͬͯ ͓ ͖ ͨ ͍ A l e x a S k i l l ༻ ޠ • Intent: Alexaʹ࿩͔͚ͨ͠಺༰ͷ෼ྨ݁Ռ • Slot:ɹAlexaʹ࿩͔͚ͨ͠಺༰ͷม਺෦෼
26. A l e x a , ࡢ ೔ ͷ ࡕ ਆ ઓ ͷ ݁ Ռ Λ ڭ ͑ͯ • <໺ٿͷ݁Ռݕࡧ> {೔෇}ͷ{ର৅ήʔϜ}ͷ݁ՌΛڭ͑ͯ • Intentɹɹɹɹɹˠɹ<໺ٿͷ݁Ռݕࡧ> • ೔෇Slotɹɹɹɹˠɹࡢ೔ • ର৅ήʔϜSlotɹˠɹࡕਆઓ http://dev.classmethod.jp/cloud/summary-about-built-in-intent-and-built-in-slot-type/
27. I n t e n t ຖ ʹ h a n d l e r s ͱ ͯ͠ ొ ࿥ ͢ Δ v a r h a n d l e r s = { ' L a u n c h R e q u e s t ' : f u n c t i o n ( ) { t h i s . e m i t ( ' : t e l l ' , ' H e l l o ' ) ; } , } , ' N a m e I n t e n t ' : f u n c t i o n ( ) { c o n s t s l o t s = t h i s . e v e n t . re q u e s t . i n t e n t . s l o t s ; c o n s t n a m e Va l u e = s l o t s . N a m e S l o t . v a l u e ; t h i s . e m i t ( ' : t e l l ' , ` N i c e t o m e e t y o u , $ { n a m e Va l u e } . E n j o y A l e x a w o r l d ! ` ) ; } , } ; I N T E N T ໊ Λ Ω ʔ ʹ ͢ Δ S L O T ͷ ৘ ใ Λ औ ಘ ͢ Δ t h i s . e m i t ʹ Ϩε ϙ ϯε ͳ Ͳ Λ ॻ ͘ #getshifter
28. Ϩε ϙ ϯε ΋ ෳ ਺ छ ྨ ͔ Β બ ΂ Δ ( Ұ ෦ ) • emit(‘:tell’, speech) : Alexa͕{speech}Λ࿩͢ • emit(‘:ask’, ask, again) : {ask}Λ࿩͠ɺฦ౴Λ଴ͪɺ{again}Ͱ࠶౓ฉ͘ • tellWithCard / askWithCard:ɹalexa.amazon.comͰͷදࣔ΋੍ޚ͢Δ • confirmSlot / delegate / saveState / saveStateError / and more..
29. Tr y E x a m p l e s ! • αϯϓϧεΩϧ͸શͯηοτΞοϓΨΠυ෇͖ • εΫγϣ΋͋ΔͷͰӳޠۤखͰ΋҆৺ • ࡞Γ͍ͨεΩϧͷαϯϓϧΛϕʔεʹ ɹσʔλΛॻ͖׵͑ͯ ɹࣗ෼ͷεΩϧʹ͠Α͏ʂ http://bit.ly/2vSAZhB
30. S e r v e r l e s s F r a m e w o r k ͱ N o d e . j s Ͱ A l e x a S k i l l Λ ࡞ ੒ ɾ ӡ ༻ ͢ Δ
31. S e r v e r l e s s F r a m e w o r k h t t p s : / / s e r v e r l e s s . c o m #getshifter
32. S e r v e r l e s s F r a m e w o r k • Node.js੡ͷServerlessΞϓϦέʔγϣϯͷσϓϩΠɾ؅ཧπʔϧ • AWSɾGCPɾAzureɾIBMͷෳ਺ϓϥοτϑΥʔϜରԠ • YAMLܗࣜͰϦιʔεΛఆٛ͢ΔͷͰɺߏ੒؅ཧ͕؆୯ #getshifter
33. S e r v e r l e s s F r a m e w o r k Λ ಋ ೖ ͢ Δ $ n p m i n s t a l l - g s e r v e r l e s s $ c d / PAT H / T O / Y O U R / A P P $ s l s c re a t e - t a w s - n o d e j s $ s l s d e p l o y #getshifter
34. σΟ Ϩ Ϋ τ Ϧ ߏ ଄ $ t re e - L 1 . ᵓ ᴷ ᴷ h a n d l e r. j s ᵓ ᴷ ᴷ n o d e _ m o d u l e s ᵓ ᴷ ᴷ p a c k a g e . j s o n ᵋ ᴷ ᴷ s e r v e r l e s s . y m l #getshifter
35. s e r v e r l e s s . y m l s e r v i c e : n o d e - a l e x a - t d d - e x a m p l e f r a m e w o r k Ve r s i o n : " > = 1 . 1 0 . 1 " p ro v i d e r : n a m e : a w s r u n t i m e : n o d e j s 6 . 1 0 re g i o n : u s - e a s t - 1 p a c k a g e : i n c l u d e : - n o d e _ m o d u l e s / f u n c t i o n s : h e l l o : h a n d l e r : h a n d l e r. h e l l o e v e n t s : - a l e x a S k i l l #getshifter
36. s e r v e r l e s s . y m l - 1 s e r v i c e : n o d e - a l e x a - t d d - e x a m p l e f r a m e w o r k Ve r s i o n : " > = 1 . 1 0 . 1 " ϓ ϩ δΣ Ϋ τ ໊ S E R V E R L E S S ͷ όʔ δ ϣ ϯ #getshifter
37. s e r v e r l e s s . y m l - 2 p ro v i d e r : n a m e : a w s r u n t i m e : n o d e j s 6 . 1 0 re g i o n : u s - e a s t - 1 ར ༻ ͢ Δ Ϋ ϥ ΢ υ ϥϯ λ ΠϜ σ ϓ ϩ Π ઌ #getshifter
38. s e r v e r l e s s . y m l - 3 p a c k a g e : i n c l u d e : - n o d e _ m o d u l e s / ಉ ࠝ ͢ Δ σΟ Ϩ Ϋ τ Ϧ #getshifter
39. s e r v e r l e s s . y m l - 4 f u n c t i o n s : h e l l o : h a n d l e r : h a n d l e r. h e l l o e v e n t s : - a l e x a S k i l l L A M B D A ͷ Πϕ ϯ τ Λ A S K ʹ ࣮ ߦ ͢ Δ ؔ ਺ ໊ ϑ Ν ϯ Ϋ γ ϣ ϯ ໊ #getshifter
40. S e r v e r l e s s F r a m e w o r k Ͱ σ ϓ ϩ Π ΍ ಈ ࡞ ֬ ೝ ͢ Δ # ຊ ൪ ༻ ͷ σ ϓ ϩ Π $ s l s d e p l o y — s t a g e p ro d u c t i o n # ݸ ਓ Ξ Χ ΢ ϯ τ ʹ σ ϓ ϩ Π $ s l s d e p l o y — s t a g e d e v e l o p m e n t — p ro f i l e m y l o c a l # ϩ ʔΧ ϧ Ͱ ͷ ಈ ࡞ ֬ ೝ $ s l s i n v o k e l o c a l - f h e l l o #getshifter
41. ࣮ ࡍ ʹ S k i l l Λ ެ ։ ͠ ͨ ྫ h t t p s : / / w w w. a m a z o n . c o m / D i g i t a l c u b e - I n c - S h i f t e r- m a n / #getshifter
42. A l e x a S k i l l ެ ։ ɾ ӡ ༻ Ͱ ײ ͡ ͨ ͜ ͱ • Example͕༏ल • Update͸গͳ͘ͱ΋̎ύλʔϯ • Serverless FWͷstage͕ศར • ೔ຊޠ͸΋͏ͪΐ͍զຫ
43. A l e x a S k i l l ެ ։ ɾ ӡ ༻ Ͱ ײ ͡ ͨ ͜ ͱ • Example͕༏ल • Update͸গͳ͘ͱ΋̎ύλʔϯ • Serverless FWͷstage͕ศར • ೔ຊޠ͸΋͏ͪΐ͍զຫ
44. g i t h u b . c o m / a l e x a ͸ ΋ ͬ ͱ ஌ Β Ε Δ ΂ ͖ • ̍̌छྨۙ͘ͷαϯϓϧεΩϧ͕ެ։ࡁΈ • ίʔυʹ͸ίϝϯτͰώϯτ͕͋Δ • ηοτΞοϓΨΠυ෇͖ • ϢχοτςετͳͲ΋ • ΈΜͳελʔ෇͚Α͏ http://bit.ly/2vSAZhB
45. h t t p s : / / g i t h u b . c o m / a l e x a / s k i l l - s a m p l e - n o d e j s - q u i z - g a m e / b l o b / m a s t e r / s rc / i n d e x . j s ʮ͜͜Λॻ͖׵͑Ζʯͱ͍͏ίϝϯτ͕͍͍ͭͯΔ
46. A l e x a S k i l l ެ ։ ɾ ӡ ༻ Ͱ ײ ͡ ͨ ͜ ͱ • Example͕༏ल • Update͸গͳ͘ͱ΋̎ύλʔϯ • Serverless FWͷstage͕ศར • ೔ຊޠ͸΋͏ͪΐ͍զຫ
47. AW S L a m b d a ͷ A R N ͔ A P I U R L Λ ࢦ ఆ ͢ Δ
48. L i v e ͷ S k i l l ͸ ” d e v e l o p m e n t ” Ϟ ʔ υ Ͱ ࡞ ۀ
49. A R N ΍ U R L ɾ I n t e n t ͳ Ͳ Λ ߋ ৽ “ S u b m i t f o r C e r t i f i c a t i o n ” Ͱ Ϩ Ϗϡ ʔ ґ པ
50. ࢦ ఆ ͠ ͨ L a m b d a ͷ Ξ οϓ σ ʔ τ ͸ ʢ ࠓ ͷ ॴ ʣ ਃ ੥ ෆ ཁ
51. S k i l l ͷ U p d a t e ʹ ͭ ͍ͯ ʢ ࢲ ݟ ʣ • Intent΍SlotͳͲͷΠϯλϥΫγϣϯͷมߋͷ༗ແͰ൑அ • ιʔεͷߋ৽͚ͩͳΒLambda΍APIόοΫΤϯυΛߋ৽͢Δ͚ͩ • ΠϯλϥΫγϣϯͷมߋ࣌͸Amazonʹਃ੥͕ඞཁ • Echo ShowରԠ΍ݴޠ௥ՃͳͲ΋ཁਃ੥
52. A l e x a S k i l l ެ ։ ɾ ӡ ༻ Ͱ ײ ͡ ͨ ͜ ͱ • Example͕༏ल • Update͸গͳ͘ͱ΋̎ύλʔϯ • Serverless FWͷstage͕ศར • ೔ຊޠ͸΋͏ͪΐ͍զຫ
53. AW S L a m b d a ͷ A R N ͔ A P I U R L Λ ࢦ ఆ ͢ Δ
54. ߋ ৽ ຖ ʹ ৽ ͠ ͍ L a m b d a Λ σ ϓ ϩ Π ͢ Δ ඞ ཁ ͕ ͋ Δ
55. s t a g e = v e r s i o n ʹ ͢ Δ ͱ Θ ͔ Γ ΍ ͢ ͍ # s t a g e ʹ όʔ δ ϣ ϯ ໊ Λ ࢦ ఆ $ s l s d e p l o y — s t a g e v 1 - 1 - 0 # ߋ ৽ ͕ ऴ Θ Ε ͹ ݹ ͍ όʔ δ ϣ ϯ Λ ࡟ আ $ s l s re m o v e — s t a g e v 1 - 0 - 0 #getshifter
56. A l e x a S k i l l ެ ։ ɾ ӡ ༻ Ͱ ײ ͡ ͨ ͜ ͱ • Example͕༏ल • Update͸গͳ͘ͱ΋̎ύλʔϯ • Serverless FWͷstage͕ศར • ೔ຊޠ͸΋͏ͪΐ͍զຫ
57. ӳ ޠ ɾ υ Π π ޠ Ҏ ֎ ͸ Ϩ Ϗϡ ʔ Ͱ ஄ ͔ Ε Δ ( 2 0 1 7 / 1 0 ࣌ ఺ ) Issue with the feed “AMIMOTO News”: What went wrong? All feed content must be presented in a language currently supported by Alexa. The current supported languages are English and German. Note: Please note that the home card and the URL is displaying in Japanese language. What to do next. Please refer to our documentation for more information.
58. ४ උ ͩ ͚ ͯ͠ ਃ ੥ ͸ ͪ ΐ ͬ ͱ զ ຫ https://amazon-press.jp/Top-Navi/Press-releases/Presselist/Press-release/amazon/jp/Devices/2017/Amazon-Alexa-1002/
59. S h i f t e r m a n S k i l l ͸ O S S h t t p s : / / g i t h u b . c o m / g e t s h i f t e r / a l e x a - s h i f t e r m a n #getshifter
60. ա ڈ ͷ εϥ Π υ ΋ ͍ Ζ ͍ Ζ ͋ Γ · ͢ • Serverless FW·ΘΓ: http://bit.ly/2yNmrOF • WordPressͰAlexa: http://bit.ly/2qvOtvg • Testͷ͜ͱͳͲ: http://bit.ly/2xYb8GN
61. https://www.youtube.com/watch?v=bpR7xzr7ipM http://jft2017.jaws-ug.jp/
62. ࠓ ೔ ͷ ࿩ • Alexa͸͍͍ͧ • ҙ֎ͱ؆୯ʹ࡞ΕΔԻ੠UI • Serverless FrameworkͱNode.jsͰAlexa SkillΛ࡞੒ɾӡ༻͢Δ • Alexa͸͍͍ͧ #getshifter
63. A l e x a ͸ ͍ ͍ ͧ