JavaScriptではじめる Multi UI Application

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/