Storylineではじめるモック駆動Alexa Skill開発 / alexa-storyline

by Hidetaka Okamoto

Slide 1

Slide 1 text

StorylineͰ͸͡ΊΔ ϞοΫۦಈAlexa Skill։ൃ Alexaηϛφʔ AlexaͰੈքΛΑΓྑ͍৔ॴʹ Ԭຊलߴ

Slide 2

Slide 2 text

ࣗݾ঺հ • Digitalcube Co. Ltd. • WordCamp Kyoto 2017࣮ߦҕ һ௕ • AWS Samurai 2017 H i d e t a k a O k a m o t o

Slide 3

Slide 3 text

ࠓ೔͢Δ࿩ • VUIΞϓϦέʔγϣϯΛ࡞Δࡍʹҙࣝ͢Δ͜ͱ • Alexa Skills KitͰͰ͖Δ͜ͱ • Alexa Skillͷ։ൃϫʔΫϑϩʔ

Slide 4

Slide 4 text

SkillΛ࡞Ζ͏ʂ

Slide 5

Slide 5 text

SkillΛ࡞Ζ͏ʂ ɾɾɾͷલʹ

Slide 6

Slide 6 text

͋ͳͨ͸Ͳͬͪʁ • ͳΜͰ΋͍͍͔ΒͱΓ͋͑ͣ࡞ͬͯΈ͍ͨ • ϓϩμΫτɾαʔϏεΛAlexaͰϦϦʔε͍ͨ͠

Slide 7

Slide 7 text

͋ͳͨ͸Ͳͬͪʁ • ͳΜͰ΋͍͍͔ΒͱΓ͋͑ͣ࡞ͬͯΈ͍ͨ • ͍·͙͢Alexa Skill։ൃμογϡϘʔυΛ։͜͏ • ϑϥογϡϒϦʔϑΟϯάεΩϧ͸RSS͋Ε͹Ұॠ • ϓϩμΫτɾαʔϏεΛAlexaͰϦϦʔε͍ͨ͠ • webαΠτ΍αʔϏεΛ࡞Δ࣌ͬͯͳʹ͠·͢ʁ • Ի੠ΞϓϦ(Alexa Skill)΋σβΠϯ͸ඞਢͰ͢ɻ

Slide 8

Slide 8 text

Ի੠ΛσβΠϯ͢Δ

Slide 9

Slide 9 text

Ի੠σβΠϯΨΠυ by Amazon https://developer.amazon.com/ja/designing-for-voice/

Slide 10

Slide 10 text

Ի੠UIઃܭͷνΣοΫϦετ • ͋ͳͨͷεΩϧͰϢʔβʔ͕ԿΛͰ͖Δ͔ɺ໌֬Ͱ͔͢ʁ • Ϣʔβʔ͸͋ͳͨͷεΩϧΛݟ͚ͭΔ͜ͱ͕Ͱ͖·͔͢ • ࣗવͳձ࿩ͱͳΔΑ͏ʹઃܭ͞Ε͍ͯ·͔͢ʁ • Α͍σβΠϯํ๏ʹԊͬͨઃܭΛ͍ͯ͠·͔͢ʁ • Ϣʔβʔ͕૝ఆ֎ͷൃ࿩Λͨ͠৔߹Ͱ΋ɺ  ஸೡʹରԠ͢ΔΑ͏ʹͳ͍ͬͯ·͔͢ʁ • Ϣʔβʔ͕εΩϧΛར༻͢Δͱ͜ΖΛ؍࡯͠·͔ͨ͠ʁ

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Ϣʔβʔ͕εΩϧΛར༻͢Δͱ͜ΖΛ؍࡯͠·͔ͨ͠ʁ ެ։લͷεΩϧΛ ͦͷεΩϧʹ׳Ε͍ͯͳ͍Ϣʔβʔʹར༻ͯ͠΋Β͍ɺ ͦͷ༷ࢠΛ؍࡯͍ͯͩ͘͠͞ɻ ձ࿩͕໰୊ͳ͘੒ཱ͢Δ෦෼ͱͦ͏Ͱͳ͍෦෼͕໌֬ʹ ͳΓɺඞཁͳमਖ਼Λߦ͏͜ͱ͕Ͱ͖ΔͰ͠ΐ͏ɻ

Slide 13

Slide 13 text

ૉૣ࢝͘ΊΔ ૉૣࣦ͘ഊ͢Δ

Slide 14

Slide 14 text

Alexa SkillͰ࡞Δ΋ͷ͸̎ͭ 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 - > Ի ੠ Λ Ͳ ͏ ม ׵ ͢ Δ ͔ AW S L a m b d a - > Ͳ ͏ σ ʔ λ Λ ॲ ཧ ͢ Δ ͔

Slide 15

Slide 15 text

ͲͪΒΛઌʹ࡞Δ΂͖͔ʁ

Slide 16

Slide 16 text

ʮԻ੠ΛͲ͏ม׵͢Δ͔ʯ͕࠷༏ઌ 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 - > Ի ੠ Λ Ͳ ͏ ม ׵ ͢ Δ ͔ ʮ Կ ͕ ͘Δ ͔ ʯ ͕ Θ ͔ Β ͳ ͍ ͱ ࣮ ૷ ʹ ೖ Ε ͳ ͍

Slide 17

Slide 17 text

Storyline - GUIͰAlexa SkillΛ࡞ΕΔαʔϏε https://getstoryline.com/

Slide 18

Slide 18 text

υϥοάˍυϩοϓͰର࿩Ϟσϧ͕࡞ΕΔ https://getstoryline.com/

Slide 19

Slide 19 text

ͳͥStorylineΛ࢖͏΂͖͔ʁ • ର࿩Ϟσϧ͕μϝͳΒͦ΋ͦ΋࢖ΘΕͳ͍ • ࣮ࡍͷར༻γʔϯͰςετͯ͠ௐ੔͢΂͖ • ͦ΋ͦ΋ͦͷγʔϯͰԻ੠ΞϓϦ͸ඞཁ͔ʁ • ΋ࣗ͠෼͕ਓʹ͓ئ͍͢ΔͳΒͲ͏͍͏͔ʁ • ேٸ͍Ͱ͍Δ࣌ʹͦͷฦࣄ͸ΠϥΠϥ͠ͳ͍ʁ • ུশ΍ํݴΛΧόʔͰ͖͍ͯΔʁ • νΣοΫϦετͷʮϢʔβʔ͕εΩϧΛར༻͢Δͱ͜Ζ Λ؍࡯͠·͔ͨ͠ʁʯΛૉૣ࢝͘ΊΕΔ

Slide 20

Slide 20 text

alexa-sdk / Lambda͸΋͏ཁΒͳ͍ͷʁ • ͦΜͳ͜ͱ͸ͳ͍ɻ • GUIͰܧଓతʹอक͍ͨ͠։ൃνʔϜ͕͍Ε͹ผ͔΋ • Storyline΍BlueprintͰɺର࿩ϞσϧΛ࡞Δ • ର࿩ϞσϧͱγφϦΦ͕͋Ε͹ɺςετέʔε͕࡞ΕΔ • JSONಡΊΕ͹ςετίʔυ΋͔͚Δ • ϞοΫ͔Β࡞Δͱɺޮ཰తʹ࣮૷ʹೖΔ͜ͱ͕Ͱ͖Δ

Slide 21

Slide 21 text

Storyline͔Β͸͡ΊΔ ϞοΫۦಈ։ൃ

Slide 22

Slide 22 text

Storyline͔Β͸͡ΊΔϞοΫۦಈ։ൃ • Ի੠σβΠϯΨΠυʹଇͬͯ୆ຊΛ࡞Δ • StorylineͰ୆ຊΛͦͷ··Alexa SkillԽ͢Δ • ask-cliͰର࿩ϞσϧɾσʔλͷΤΫεϙʔτ • Lambda / ֎෦API΁ͷ੾Γସ͑

Slide 23

Slide 23 text

StorylineͰͷ୆ຊͷεΩϧԽ

Slide 24

Slide 24 text

GoogleΞΧ΢ϯτΛ࢖༻ͯ͠ϩάΠϯ https://getstoryline.com/

Slide 25

Slide 25 text

Ի੠࠶ੜɾϥδΦετϦʔϜɾετʔϦʔͷ̏ςϯϓϨʔτ https://getstoryline.com/

Slide 26

Slide 26 text

Alexaͷൃ࿩ɾϢʔβʔൃ࿩ͷऔΓѻ͍ͳͲΛGUIͰ

Slide 27

Slide 27 text

࡞ͬͨϞσϧΛͦͷ··σϓϩΠͰ͖Δ

Slide 28

Slide 28 text

୆ຊεΩϧԽͷϙΠϯτ • ୆ຊΛͦͷ··εΩϧʹ͢Δ͜ͱ • ͜͜Ͱςετ͍ͨ͠ͷ͸ʮ୆ຊ͕ঢ়گʹ͍͋ͬͯΔ͔ʯ • ಈ͖΍ॲཧɺม਺ͷऔΓѻ͍͸࣮૷࣌·Ͱզຫ

Slide 29

Slide 29 text

ask-cliΛ࢖ͬͨ ϞσϧͷίʔυԽ

Slide 30

Slide 30 text

Alexa Skills Kitʹ͸CLIπʔϧ͕͋Δ $ npm i -g ask-cli $ ask -h Usage: ask [options] [command] Command Line Interface for Alexa Skill Management API

Slide 31

Slide 31 text

Storyline͕σϓϩΠͨ͠σʔλΛΤΫεϙʔτ # ͻͳܗ࡞੒ $ ask new -n SKILL_NAME && cd SKILL_NAME # εΩϧ৘ใ $ ask api get-skill -s {SKILL_ID} > ./skill.json # ର࿩Ϟσϧ $ ask api get-model -s {SKILL_ID} \ —stage development -l ja-JP > ./models/ja-JP.json

Slide 32

Slide 32 text

ଓ͖͸webͰ https://wp-kyoto.net/migrate-alexa-skill-from-gui-to-ask-cli/

Slide 33

Slide 33 text

Lambda / ֎෦API΁ͷ ͚͔ͭ͑

Slide 34

Slide 34 text

ίϯιʔϧ͔ΒΤϯυϙΠϯτΛม͑Δ͚ͩ

Slide 35

Slide 35 text

[ςετ]λϒͰinput / output͕ݟΕΔ

Slide 36

Slide 36 text

࡞ͬͨϞοΫΛLambda / API։ൃʹ׆͔͢ • StorylineͰ࡞ͬͨϞοΫΛσϓϩΠ͢Δ • Alexa։ൃίϯιʔϧͰςετ͢Δ • දࣔ͞Εͨinput / outputΛه࿥͢Δ • ։ൃνʔϜʹinput / outputΛࢀߟʹ࣮૷ͯ͠΋Β͏ • in / outΛςετίʔυԽͰ͖Ε͹ΑΓ҆ఆͨ͠։ൃʹ

Slide 37

Slide 37 text

ΑΓࣗવͳձ࿩ΛΊͯ͟͠

Slide 38

Slide 38 text

Alexaެࣜϒϩάʢ೔ಠӳࠞ߹ʣ https://developer.amazon.com/ja/blogs/alexa/tag/Alexa

Slide 39

Slide 39 text

঺հ͞Ε͍ͯΔTipsΛҰ෦঺հ • ෳ਺ͷ࣭໰͕͋Δ৔߹͸DialogΛ࢖͏ • ޮՌԻΛ׆༻͢Δ • ฦࣄʹਓؒΒ͠͞ΛՃ͑Δ

Slide 40

Slide 40 text

঺հ͞Ε͍ͯΔTipsΛҰ෦঺հ • ෳ਺ͷ࣭໰͕͋Δ৔߹͸DialogΛ࢖͏ • ޮՌԻΛ׆༻͢Δ • ฦࣄʹਓؒΒ͠͞ΛՃ͑Δ

Slide 41

Slide 41 text

ʮΞϨΫαɺࠓ൩ग़ൃͷ ɹ৽େࡕߦ͖ͷͷͧΈͷ ɹ૭ࡍͷࢦఆ੮Λ୳ͯ͠ʯ

Slide 42

Slide 42 text

ʮΞϨΫαɺࠓ൩ग़ൃͷ ɹ৽େࡕߦ͖ͷͷͧΈͷ ɹ૭ࡍͷࢦఆ੮Λ୳ͯ͠ʯ

Slide 43

Slide 43 text

εϩοτͷ਺͕͍ͬͺ͍

Slide 44

Slide 44 text

μΠΞϩάͰඞਢ஋ͷ௥Ճ࣭໰͕ՄೳʹͳΔ

Slide 45

Slide 45 text

Dialog.DelegateσΟϨΫςΟϒΛ࢖ͬͯॲཧ // ͜͜ͷintentRequestม਺͸ɺεΩϧʹૹ৴͞ΕΔIntentRequestΦϒδΣΫτͰ͢ɻ if (intentRequest.dialogState === "STARTED"){ // ೖྗࡁΈεϩοτ: σϑΥϧτ஋ͷ͋Δεϩοτ஋Λ࢖༻ͯ͠ // ΠϯςϯτΦϒδΣΫτΛߋ৽͠·͢ɻ࣍ʹupdatedIntentϓϩύςΟͷ͜ͷߋ৽͞ΕͨΠϯ ςϯτͰ // Dialog.DelegateΛฦ͠·͢ɻ } else if (intentRequest.dialogState != "COMPLETED"){ // updatedIntentϓϩύςΟΛ࣋ͨͳ͍Dialog.Delegate σΟϨΫςΟϒΛฦ͠·͢ɻ } else { // μΠΞϩά͸׬ྃ͠ɺ͢΂ͯͷඞཁͳεϩοτ͕ೖྗ͞Ε·ͨ͠ɻ // ௨ৗͷΠϯςϯτϋϯυϥʔΛݺͼग़͍ͯͩ͘͠͞ɻ handlePlanMyTripIntent(intent, session, callback); }

Slide 46

Slide 46 text

ෳ਺ͷ߲໨ʢม਺ʣΛ ѻ͍͍ͨ৔߹͸ɺ μΠϠϩάΛ࢖ͬͯॊೈʹ

Slide 47

Slide 47 text

঺հ͞Ε͍ͯΔTipsΛҰ෦঺հ • ෳ਺ͷ࣭໰͕͋Δ৔߹͸DialogΛ࢖͏ • ޮՌԻΛ׆༻͢Δ • ฦࣄʹਓؒΒ͠͞ΛՃ͑Δ

Slide 48

Slide 48 text

ASK Sound Library https://developer.amazon.com/docs/custom-skills/ask-soundlibrary.html

Slide 49

Slide 49 text

ޮՌԻΛ؆୯ʹೖखɾར༻Ͱ͖ΔΑ͏ʹͳΔ This is Alexa's regular speech, followed by the sound effect "bear groan roar (1)".

Slide 50

Slide 50 text

ޮՌԻͷछྨ΋๛෋ • Ambience • Animal • Battle • Cartoon • Foley • Home • Human • Impact • Magic • Musical • Nature • Ofﬁce • SciFi • Transportation

Slide 51

Slide 51 text

঺հ͞Ε͍ͯΔTipsΛҰ෦঺հ • ෳ਺ͷ࣭໰͕͋Δ৔߹͸DialogΛ࢖͏ • ޮՌԻΛ׆༻͢Δ • ฦࣄʹਓؒΒ͠͞ΛՃ͑Δ

Slide 52

Slide 52 text

ਓ͕ؒશ͘ಉ͡ฦࣄΛ ຖճฦ͢ͷ͸ෆࣗવ

Slide 53

Slide 53 text

ฦ౴ʹϥϯμϜ͞Λ΋ͨͤΑ͏ͥͱ͍͏ϒϩά https://developer.amazon.com/ja/blogs/alexa/post/37e732b7-48fa-4940-9f12-9ffde7eeeaf8/alexa-skill-recipe- randomize-your-responses-to-add-variety-to-your-skill

Slide 54

Slide 54 text

ϥϯμϜͳฦ౴Λฦ࣮͢૷αϯϓϧ const { randomResponse } = require('ask-utils') const errorMessages = [ '͢Έ·ͤΜɺΑ͘ฉ͖औΕ·ͤΜͰͨ͠ɻ΋͏Ұ౓͓ئ͍͠·͢ɻ', '͢Έ·ͤΜɺΑ͘ฉ͖औΕ·ͤΜͰͨ͠ɻ', '্खʹฉ͖औΕͳͯ͘͢Έ·ͤΜɻ΋͏Ұ౓ݴͬͯ΋Β͑·͔͢ʁ', '͝ΊΜͳ͍͞ɻ΋͏Ұ౓ݴͬͯ΋Β͑Δͱॿ͔Γ·͢ɻ' ] const message = randomResponse.getRandomMessage(errorMessages) return handlerInput.responseBuilder .speak(message) .reprompt(message) .getResponse()

Slide 55

Slide 55 text

Slide 56

Slide 56 text

࡞ͬͨɿask-sdkͰͷॲཧΛศརʹ͢ΔϥΠϒϥϦ https://www.npmjs.com/package/ask-utils

Slide 57

Slide 57 text

Learn and be curious