JavaScriptͰ͸͡ΊΔ Multi UI Application HTML5 APP CONFERENCE 2018 Ԭຊलߴ 

from : Alexa UG (AAJUG) https://aajug.connpass.com/ 

ࣗݾ঺հ • Digitalcube Co. Ltd. • AWS Samurai 2017 • AAJUG (Alexa Japan UG) H i d e t a k a O k a m o t o 

ࠓ೔঺հ͍ͨ͠΋ͷ 

ࠓ݄ൃച༧ఆͷ͍͋ͭ http://amzn.asia/g0cwNt0 

Amazon Echo = ੠Ͱૢ࡞Ͱ͖ΔσόΠε http://amzn.asia/g0cwNt0 

Echo Spot = ը໘෇͖ͷԻ੠σόΠε http://amzn.asia/g0cwNt0 

– h t t p s : / / w w w. g o o g l e . c o m / i n t l / j a / a b o u t / p h i l o s o p h y. h t m l “৘ใΛ୳ͨ͘͠ͳΔͷ͸ ύιίϯͷલʹ͍Δͱ͖͚ͩͰ͸ͳ͍” 

ʮը໘ͷͳ͍ੈքʯ 

ʮը໘͕ͳ͍ʯํ͕ศརͳ৔໘΋গͳ͘ͳ͍ • ྉཧΛ͍ͯ͠Δ࠷தʹը໘΍Ϛ΢ε͸৮Εͨ͘ͳ͍ • ৸ࣨͳͲͰ͸खͷಧ͘৔ॴʹσόΠε͕ͳ͍ͱ͖΋ • ΞϓϦ͕ଟ͗͢Δͱ୳͢ͷ͕खؒʹ • ʮ͋Ε΍ͬͱ͍ͯΑʯͰ͢΂ͯย෇͚͍ͨ 

ʮը໘͕ͳ͍ʯํ͕ศརͳ৔໘΋গͳ͘ͳ͍ • ϦϞίϯૢ࡞Λ੠Ͱ͢·͍ͤͨ • ը໘͸ཉ͍͚͠Ͳɺૢ࡞͸੠Ͱ΍Γ͍ͨ • ͍ͭ΋ങ͏঎඼͸Ϙλϯ͔̍ͭ੠Ͱ஫จ͍ͨ͠ • ͳ͘ͳͬͨ࣌ʹࣗಈͰಧ͚ͯཉ͍͠ 

GUIʢ web / app )Ҏ֎ͷ઀఺΋࡞ΕΔ • IoTɹɹɿ෺ཧϘλϯ΍ηϯαʔݕ஌Ͱͷࣗಈ஫จ • VUIɹɹɿ੠Ͱૢ࡞ɾ஫จ • MLɹɹ ɿߪೖཤྺ͔Βඞཁͳ࣌ظΛ༧ଌ • OCRɹ ɿը૾ɾө૾͔Βσʔλೖྗ 

GUIʢ web / app )Ҏ֎ͷ઀఺΋JavaScriptͰ࡞ΕΔ • IoTɹɹɿJohnny-Five • VUIɹɹɿAlexa SDK for Node.js • MLɹɹ ɿTensorflow.js • OCRɹ ɿtesseract.js 

Shifter: WordPressͷ੩తϗεςΟϯάαʔϏε https://getshifter.io 

GUI (Web): αʔόʔ௥Ճɾૢ࡞ɾσʔλ֬ೝ 

Θ͟Θ͟؅ཧը໘։͘ͷ͕໘౗ͳέʔε • ৽͍͠αΠτΛࢥ͍͍ͭͨ࣌ɺཱ͙͍ͯͨ͢ • σʔλ࢖༻ྔͳͲ͕ͪΐͬͱؾʹͳͬͨ • αʔϏεͷঢ়گɾχϡʔεΛ஌Γ͍ͨ 

VUI (Alexa): αʔόʔ௥Ճɾσʔλ֬ೝ https://www.amazon.com/gp/product/B07572D7N8? ie=UTF8&ref-suffix=ss_rw 

VUIΞϓϦͰ΋ɺ΍͍ͬͯΔ͜ͱ͸ಉ͡ 

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 - > Ͳ ͏ σ ʔ λ Λ ॲ ཧ ͢ Δ ͔ 

։ൃऀ͸JSONΛฦ͢APIΛ࡞Ε͹OK 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 - > Ի ੠ Λ Ͳ ͏ ม ׵ ͢ Δ ͔ A S K ͕ ࡞ ͬ ͨ J S O N Λ ಡ ΜͰɺ A S K ͕ ղ ੳ Ͱ ͖ Δ J S O N Λ ฦ ͢ 

VUI͜ͱ͸͡Ί 

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

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

Alexa Skills blueprint (͍·͸ӳޠͷΈ) https://blueprints.amazon.com/ 

ςϯϓϨʔτΛϕʔεʹεΩϧΛΧελϜͰ͖Δ 

$ npm i -S ask-sdk ask-utils 

ձ࿩ͷ಺༰ΛJavaScriptͰهड़͢Δ const Alexa = require('ask-sdk-core') const { canHandle } = require(‘ask-utils') const LaunchRequestHandler = { canHandle: (handlerInput) => canHandle(handlerInput, 'LaunchRequest'), handle: (handlerInput) => handlerInput.responseBuilder .speak(`ΞϨΫαεΩϧ΁Α͏ͦ͜ɻԿ͕ฉ͖͍ͨͰ͔͢ʁ`) .getResponse() } const skillBuilder = Alexa.SkillBuilders.custom() exports.handler = skillBuilder .addRequestHandlers( LaunchRequestHandler, ) .addErrorHandlers(ErrorHandler) .lambda() 

Ͳͷൃ࿩ʹର࣮ͯ͠ߦ͢Δॲཧ͔ఆٛ const { canHandle } = require(‘ask-utils') const LaunchRequestHandler = { canHandle (handlerInput) { return canHandle(handlerInput, 'LaunchRequest') }, handle (handlerInput) { handlerInput.responseBuilder .speak(`ΞϨΫαεΩϧ΁Α͏ͦ͜ɻԿ͕ฉ͖͍ͨͰ͢ ͔ʁ`) .getResponse() } } 

࣮ࡍʹ஻ΒͤΔ಺༰Λهड़͢Δ const { canHandle } = require(‘ask-utils') const LaunchRequestHandler = { canHandle (handlerInput) { return canHandle(handlerInput, 'LaunchRequest') }, handle (handlerInput) { handlerInput.responseBuilder .speak(`ΞϨΫαεΩϧ΁Α͏ͦ͜ɻԿ͕ฉ͖͍ͨͰ͢ ͔ʁ`) .getResponse() } } 

࡞ͬͨϋϯυϥʔΛొ࿥͢Ε͹OK const Alexa = require('ask-sdk-core') const skillBuilder = Alexa.SkillBuilders.custom() exports.handler = skillBuilder .addRequestHandlers( LaunchRequestHandler, ) .addErrorHandlers(ErrorHandler) .lambda() 

$ npm i -g ask-cli 

CLIͰVUIϓϩδΣΫτ͕࡞ΕΔ $ ask new -n example New project for Alexa skill created. $ cd example $ tree -L 3 . ᵓᴷᴷ lambda ᴹ ᵋᴷᴷ custom ᴹ ɹɹɹɹᵓᴷᴷ index.js ᴹ ɹɹɹɹ ᵓᴷᴷ node_modules ᴹ ɹɹɹɹᵓᴷᴷ package-lock.json ᴹ ɹɹɹɹ ᵋᴷᴷ package.json ᵓᴷᴷ models ᴹ ɹɹᵋᴷᴷ en-US.json ᵋᴷᴷ skill.json 4 directories, 6 files 

σϓϩΠ΍όϦσʔτɾಈ࡞ςετ΋Մೳ • init [options] • deploy [options] • new [options] • clone [options] • simulate [options] • validate [options] • status [options] • diff [options] • lambda • api • add • remove • util • help [cmd] 

VUIͰؾΛ͚ͭΔ͜ͱ 

ʮ࿩͠ݴ༿ʯͱʮॻ͖ݴ༿ʯͷࠩ͸େ͖͍ • ʮಡΉίϯςϯπʯͩͱͲ͏ͯ͠΋௕͘ͳΔ • Ի੠UI͸ʮಡΉʯͰ͸ͳ͘ʮձ࿩ʯʹͳΔ • ࠓ͋Δσʔλ͸͍͍ͩͨʮॻ͖ݴ༿ʯ • ʮσʔλʯͱʮίϯςϯπʯͷ෼཭͕ࠓޙॏཁʹ 

ྫ͑͹͜Μͳϥούʔ͕ඞཁʹͳΔ const replaceDescription = desc => { if (/ग़͢ɻ$/.test(desc)) return desc.replace(/ग़͢ɻ$/, 'ग़͠·͢ɻ') if (/૬ஊɻ$/.test(desc)) return desc.replace(/૬ஊɻ$/, '૬ஊ͍ͯͩ͘͠͞ɻ') if (/ฦ٫ɻ$/.test(desc)) return desc.replace(/ฦ٫ɻ$/, 'ฦ٫͍ͯͩ͘͠͞ɻ') if (/औΓআ͘ɻ$/.test(desc)) return desc.replace(/औΓআ͘ɻ$/, 'औΓআ͍ͯ͘ ͍ͩ͞ɻ') if (/ґཔɻ$/.test(desc)) return desc.replace(/ґཔɻ$/, 'ґཔ͍ͯͩ͘͠͞ɻ') if (/ೖΕΔɻ$/.test(desc)) return desc.replace(/ೖΕΔɻ$/, 'ೖΕ͍ͯͩ͘͞ɻ') if (/͢Δɻ$/.test(desc)) return desc.replace(/͢Δɻ$/, '͍ͯͩ͘͠͞ɻ') return desc } 

APIͰίϯςϯπɾσʔλͱUIΛૄ݁߹ʹ 

ྫ͑͹GraphQL https://graphql.org/ 

AWS Amplify https://aws.github.io/aws-amplify/ 

͍ΖΜͳUIʹରԠ͢Δ 

͍ΖΜͳUIʹରԠ͢ΔͨΊʹ APIϕʔεͰૄ݁߹ʹ͢Δ 

APIͰૄ݁߹ʹ͢ΔϝϦοτ • APIΛୟ͚͹σʔλ͕औΕΔɾσʔλΛߋ৽Ͱ͖Δ • طଘͷαʔϏε͔Βಠཱͨ͠ϓϩμΫτ͕࡞ΕΔ • Alexa / IoTͳͲͷ৽͍͠UI΁ͷରԠΛ͙͢ࢼͤΔ • ϓϩτλΠϓΛ࡞ͬͯʮ͙ࣦ͢ഊʯͰ͖Δ 

Ի ੠ ϕ ʔε ͷ ৽ ͠ ͍ ί ϛ ϡ χέ ʔ γ ϣ ϯ • ʮʙ͠ͳ͕Βʯͱ͍͏Ϣʔεέʔε • ΈΜͳͰ༡΂Δίϯςϯπͷఏڙ • ࣗࣾαʔϏεͷλονϙΠϯτ֦ு • push΍༗ྉίϯςϯπ΋ 

AlexaΛ༻͍ͨ શ͘৽͍͠ސ٬ମݧͷఏڙʹ ௅ઓͯ͠Έ·ͤΜ͔ʁ h t t p s : / / w w w. d i g i t a l c u b e . j p / s e r v i c e / w e b - s e r v i c e / a m a z o n - a l e x a - s k i l l s / 

[ʙ8/27] Alexa εΩϧΞϫʔυ http://alexaskillawards.jp/ 

AAJUGͰAlexaΦϯϥΠϯσΟεΧογϣϯ΍ͬͯ·͢ https://aajug.connpass.com/