JavaScriptではじめる Multi UI Application

HTML5 APP CONFERENCE 2018

Transcript

1. JavaScriptͰ͸͡ΊΔ Multi UI Application HTML5 APP CONFERENCE 2018 Ԭຊलߴ
2. from : Alexa UG (AAJUG) https://aajug.connpass.com/
3. ࣗݾ঺հ • 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
4. ࠓ೔঺հ͍ͨ͠΋ͷ
5. ࠓ݄ൃച༧ఆͷ͍͋ͭ http://amzn.asia/g0cwNt0
6. Amazon Echo = ੠Ͱૢ࡞Ͱ͖ΔσόΠε http://amzn.asia/g0cwNt0
7. Echo Spot = ը໘෇͖ͷԻ੠σόΠε http://amzn.asia/g0cwNt0
8. – 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 “৘ใΛ୳ͨ͘͠ͳΔͷ͸ ύιίϯͷલʹ͍Δͱ͖͚ͩͰ͸ͳ͍”
9. ʮը໘ͷͳ͍ੈքʯ
10. ʮը໘͕ͳ͍ʯํ͕ศརͳ৔໘΋গͳ͘ͳ͍ • ྉཧΛ͍ͯ͠Δ࠷தʹը໘΍Ϛ΢ε͸৮Εͨ͘ͳ͍ • ৸ࣨͳͲͰ͸खͷಧ͘৔ॴʹσόΠε͕ͳ͍ͱ͖΋ • ΞϓϦ͕ଟ͗͢Δͱ୳͢ͷ͕खؒʹ • ʮ͋Ε΍ͬͱ͍ͯΑʯͰ͢΂ͯย෇͚͍ͨ
11. ʮը໘͕ͳ͍ʯํ͕ศརͳ৔໘΋গͳ͘ͳ͍ • ϦϞίϯૢ࡞Λ੠Ͱ͢·͍ͤͨ • ը໘͸ཉ͍͚͠Ͳɺૢ࡞͸੠Ͱ΍Γ͍ͨ • ͍ͭ΋ങ͏঎඼͸Ϙλϯ͔̍ͭ੠Ͱ஫จ͍ͨ͠ • ͳ͘ͳͬͨ࣌ʹࣗಈͰಧ͚ͯཉ͍͠
12. GUIʢ web / app )Ҏ֎ͷ઀఺΋࡞ΕΔ • IoTɹɹɿ෺ཧϘλϯ΍ηϯαʔݕ஌Ͱͷࣗಈ஫จ • VUIɹɹɿ੠Ͱૢ࡞ɾ஫จ • MLɹɹ ɿߪೖཤྺ͔Βඞཁͳ࣌ظΛ༧ଌ • OCRɹ ɿը૾ɾө૾͔Βσʔλೖྗ
13. GUIʢ web / app )Ҏ֎ͷ઀఺΋JavaScriptͰ࡞ΕΔ • IoTɹɹɿJohnny-Five • VUIɹɹɿAlexa SDK for Node.js • MLɹɹ ɿTensorflow.js • OCRɹ ɿtesseract.js
14. Shifter: WordPressͷ੩తϗεςΟϯάαʔϏε https://getshifter.io
15. GUI (Web): αʔόʔ௥Ճɾૢ࡞ɾσʔλ֬ೝ
16. Θ͟Θ͟؅ཧը໘։͘ͷ͕໘౗ͳέʔε • ৽͍͠αΠτΛࢥ͍͍ͭͨ࣌ɺཱ͙͍ͯͨ͢ • σʔλ࢖༻ྔͳͲ͕ͪΐͬͱؾʹͳͬͨ • αʔϏεͷঢ়گɾχϡʔεΛ஌Γ͍ͨ
17. VUI (Alexa): αʔόʔ௥Ճɾσʔλ֬ೝ https://www.amazon.com/gp/product/B07572D7N8? ie=UTF8&ref-suffix=ss_rw
18. VUIΞϓϦͰ΋ɺ΍͍ͬͯΔ͜ͱ͸ಉ͡
19. 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 - > Ͳ ͏ σ ʔ λ Λ ॲ ཧ ͢ Δ ͔
20. ։ൃऀ͸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 Λ ฦ ͢
21. VUI͜ͱ͸͡Ί
22. Storyline - GUIͰAlexa SkillΛ࡞ΕΔαʔϏε https://getstoryline.com/
23. υϥοάˍυϩοϓͰର࿩Ϟσϧ͕࡞ΕΔ https://getstoryline.com/
24. Alexa Skills blueprint (͍·͸ӳޠͷΈ) https://blueprints.amazon.com/
25. ςϯϓϨʔτΛϕʔεʹεΩϧΛΧελϜͰ͖Δ
26. $ npm i -S ask-sdk ask-utils
27. ձ࿩ͷ಺༰Λ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()
28. Ͳͷൃ࿩ʹର࣮ͯ͠ߦ͢Δॲཧ͔ఆٛ const { canHandle } = require(‘ask-utils') const LaunchRequestHandler = { canHandle (handlerInput) { return canHandle(handlerInput, 'LaunchRequest') }, handle (handlerInput) { handlerInput.responseBuilder .speak(`ΞϨΫαεΩϧ΁Α͏ͦ͜ɻԿ͕ฉ͖͍ͨͰ͢ ͔ʁ`) .getResponse() } }
29. ࣮ࡍʹ஻ΒͤΔ಺༰Λهड़͢Δ const { canHandle } = require(‘ask-utils') const LaunchRequestHandler = { canHandle (handlerInput) { return canHandle(handlerInput, 'LaunchRequest') }, handle (handlerInput) { handlerInput.responseBuilder .speak(`ΞϨΫαεΩϧ΁Α͏ͦ͜ɻԿ͕ฉ͖͍ͨͰ͢ ͔ʁ`) .getResponse() } }
30. ࡞ͬͨϋϯυϥʔΛొ࿥͢Ε͹OK const Alexa = require('ask-sdk-core') const skillBuilder = Alexa.SkillBuilders.custom() exports.handler = skillBuilder .addRequestHandlers( LaunchRequestHandler, ) .addErrorHandlers(ErrorHandler) .lambda()
31. $ npm i -g ask-cli
32. 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
33. σϓϩΠ΍όϦσʔτɾಈ࡞ςετ΋Մೳ • init [options] • deploy [options] • new [options] • clone [options] • simulate [options] • validate [options] • status [options] • diff [options] • lambda • api • add • remove • util • help [cmd]
34. VUIͰؾΛ͚ͭΔ͜ͱ
35. ʮ࿩͠ݴ༿ʯͱʮॻ͖ݴ༿ʯͷࠩ͸େ͖͍ • ʮಡΉίϯςϯπʯͩͱͲ͏ͯ͠΋௕͘ͳΔ • Ի੠UI͸ʮಡΉʯͰ͸ͳ͘ʮձ࿩ʯʹͳΔ • ࠓ͋Δσʔλ͸͍͍ͩͨʮॻ͖ݴ༿ʯ • ʮσʔλʯͱʮίϯςϯπʯͷ෼཭͕ࠓޙॏཁʹ
36. ྫ͑͹͜Μͳϥούʔ͕ඞཁʹͳΔ 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 }
37. APIͰίϯςϯπɾσʔλͱUIΛૄ݁߹ʹ
38. ྫ͑͹GraphQL https://graphql.org/
39. AWS Amplify https://aws.github.io/aws-amplify/
40. ͍ΖΜͳUIʹରԠ͢Δ
41. ͍ΖΜͳUIʹରԠ͢ΔͨΊʹ APIϕʔεͰૄ݁߹ʹ͢Δ
42. APIͰૄ݁߹ʹ͢ΔϝϦοτ • APIΛୟ͚͹σʔλ͕औΕΔɾσʔλΛߋ৽Ͱ͖Δ • طଘͷαʔϏε͔Βಠཱͨ͠ϓϩμΫτ͕࡞ΕΔ • Alexa / IoTͳͲͷ৽͍͠UI΁ͷରԠΛ͙͢ࢼͤΔ • ϓϩτλΠϓΛ࡞ͬͯʮ͙ࣦ͢ഊʯͰ͖Δ
43. Ի ੠ ϕ ʔε ͷ ৽ ͠ ͍ ί ϛ ϡ χέ ʔ γ ϣ ϯ • ʮʙ͠ͳ͕Βʯͱ͍͏Ϣʔεέʔε • ΈΜͳͰ༡΂Δίϯςϯπͷఏڙ • ࣗࣾαʔϏεͷλονϙΠϯτ֦ு • push΍༗ྉίϯςϯπ΋
44. 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 /
45. [ʙ8/27] Alexa εΩϧΞϫʔυ http://alexaskillawards.jp/
46. AAJUGͰAlexaΦϯϥΠϯσΟεΧογϣϯ΍ͬͯ·͢ https://aajug.connpass.com/