Webから見た Alexa Presentation Language / web to apl

B056544c9785c2f705e076156719ab08?s=47 sesta
June 19, 2019

Webから見た Alexa Presentation Language / web to apl

ZOZOテクノロジーズMeetup #10 の発表資料です

イベント: https://zozotech-inc.connpass.com/event/129369/
PDF: https://github.com/sesta/slide/raw/master/20190619_web_to_apl.pdf

アニメーションに関するブログ: https://techblog.zozo.com/entry/alexa-presentation-language

B056544c9785c2f705e076156719ab08?s=128

sesta

June 19, 2019
Tweet

Transcript

  1. גࣜձࣾ;0;0ςΫϊϩδʔζ ։ൃ෦3%୲౰ ෢ాमฏ $PQZSJHIU˜;0;05FDIOPMPHJFT *OD Ի੠UIʹGUIΛ௥Ճ͢Δ Web͔Βݟͨ Alexa Presentation Language

  2. גࣜձࣾ;0;0ςΫϊϩδʔζ ։ൃ෦ 3%୲౰ ෢ాमฏTFTUBͤͨ͢ ˜;0;05FDIOPMPHJFT *OD • Alexa΍Google AssistantͳͲԻ੠UIͷ։ൃΛ୲౰ •

    ੲ͸WebαʔϏεͷϑϩϯτΛ΍͍͕ͬͯͨ
 ࠷ۙ͸Alexaͱͣͬͱ͓͠Ό΂Γ͍ͯ͠Δ • झຯ͸ఉ͍͡ΓͰɺࠓ೥͸ϝϩϯʹखΛग़͍ͯ͠Δ !2
  3. ˜;0;05FDIOPMPHJFT *OD !3 Amazon Alexa

  4. ˜;0;05FDIOPMPHJFT *OD !4 Alexa ͕࢖͑Δ୺຤ͨͪ Echo Dots Echo Spot Echo

    Show
  5. ˜;0;05FDIOPMPHJFT *OD !5 Alexa Presentation Language

  6. ˜;0;05FDIOPMPHJFT *OD !6 Alexa Presentation Language ʢҎԼɺAPLʣͱ͸ • Alexa༻ͷσβΠϯݴޠ •

    ੠Ͱͷ΍ΓͱΓΛิڧ͢ΔϏδϡΞϧͳදݱ͕ՄೳͱͳΔ • ಡΜͰ͍Δ಺༰ΛจষͰฒ΂Δ • ίʔσΟωʔτΛը૾ͰҰཡදࣔ • νϡʔτϦΞϧΛಈըͰ࠶ੜ • λονͰͷૢ࡞ΛՄೳʹͨ͠ΓɺؒΛஔ͍͔ͯΒ͠Ό΂ΒͤΔͳͲ
 ΠϯλϥΫγϣϯͷ෯͕޿͕Δ
  7. ˜;0;05FDIOPMPHJFT *OD !7 APLΛ;ΜͩΜʹ࢖ͬͨεΩϧͷ঺հʢએ఻ʣ https://www.youtube.com/watch?v=LaKYaX7Ci0A

  8. ˜;0;05FDIOPMPHJFT *OD !8 ࿩͢͜ͱ 1. APLΛ࢖ͬͨϨΠΞ΢τͷ૊Έํ • HTML/CSS ʹ͋ͨΔ෦෼ 2.

    APLͰՄೳͳಈతͳදݱ • JavaScript ʹ͋ͨΔ෦෼ 3. APLͰύʔπͷ؅ཧ͸Ͱ͖Δͷ͔ • Vue ΍ React ʹ͓͚ΔίϯϙʔωϯτͷΑ͏ͳ࢓૊Έͷ࿩
  9. ˜;0;05FDIOPMPHJFT *OD !9 1. APLΛ࢖ͬͨϨΠΞ΢τͷ૊Έํ

  10. ˜;0;05FDIOPMPHJFT *OD !10 APL͸ΦϒδΣΫτͷߏ଄Ͱهड़͢ΔHTMLͷΠϝʔδ • Ґஔͷܭࢉํ๏͸HTMLͱ΄ͱΜͲҰॹ • جຊతʹࠨ্͔ΒελοΫ͞Ε͍ͯ͘ • absolute

    ΋͋Δ • flex ΋͋Δ • Flexbox/YogaΛαϙʔτ: https://yogalayout.com • ࢦఆͰ͖ΔϓϩύςΟ΋HTML/CSSͱࣅͯΔ • ϓϩύςΟͷྫ: height / padding / justifyContent
  11. ˜;0;05FDIOPMPHJFT *OD !11 ϨΠΞ΢τྫ: ը૾Λதԝʹදࣔ { type: 'Container', item: {

    type: 'Image', source: 'https://image-url', height: '100px', width: '100px' }, alignItems: 'center', justifyContent: 'center', height: '100vh', width: '100vw' } type Ͱ ίϯϙʔωϯτͷछྨΛࢦఆ
 ʢ ≒ HTMLͷλά ʣ ίϯϙʔωϯτಛ༗ͷ ৘ใΛࢦఆ ݟͨ໨Λ੔͑Δ৘ใΛ ͦΕͧΕࢦఆ
  12. ˜;0;05FDIOPMPHJFT *OD !12 APLʹ͓͚Δίϯϙʔωϯτͱ͸ • Alexa͕ඪ४ͰղऍͰ͖ΔɺͦΕҎ্෼ղͰ͖ͳ͍ཁૉͰ
 Webʹ͓͚ΔHTMLͷλάʹ͍ۙଘࡏ • ίϯϙʔωϯτ͝ͱʹ໾ׂ͕͸͖ͬΓܾ·͓ͬͯΓɺ
 ࢦఆͰ͖ΔϓϩύςΟ΋ҟͳΔ

  13. ˜;0;05FDIOPMPHJFT *OD !13 ίϯϙʔωϯτͷྫ • Container ίϯϙʔωϯτ • Flexbox Λ༻͍ͨϨΠΞ΢τͰ༻͍Δ

    • item ͱ͍͏ϓϩύςΟʹ౉͢͜ͱͰɺଞͷίϯϙʔωϯτΛ಺แͰ͖Δ • Text ίϯϙʔωϯτ / Image ίϯϙʔωϯτ • ςΩετ΍ը૾Λදࣔ • ScrollView ίϯϙʔωϯτ • ಺แͨ͠ίϯϙʔωϯτ͕ը໘ʹऩ·Βͳ͔ͬͨ৔߹ʹ
 εΫϩʔϧͰ͖ΔΑ͏ʹ͢Δ
  14. ˜;0;05FDIOPMPHJFT *OD !14 ίʔσ૬ஊεΩϧͷݕࡧ݁Ռͷߏ଄ Containerʢ direction: row ʣ Containerʢ direction:

    row ʣ Containerʢ direction: column ʣ Containerʢ direction: row ʣ ScrollView Image Image Image Image
  15. ˜;0;05FDIOPMPHJFT *OD !15 Webͱͷҧ͍ • ίϯϙʔωϯτڞ༗Ͱ࢖༻Ͱ͖ΔϓϩύςΟ͕গͳ͍ • ݟͨ໨ʹؔ܎͢Δ΋ͷͩͱ width ΍

    heightɺpadding ͚͕ͩڞ௨ • ཁૉΛฒ΂Δ => Containerɺഎܠ৭΍ϘʔμʔͳͲͷ૷০ => Frame • Ϧονͳίϯϙʔωϯτ͕༻ҙ͞ΕͯΔ • Pager: εϫΠϓͰத਎Λ੾Γସ͑ΒΕΔίϯϙʔωϯτ • Sequence: ஗ԆಡΈࠐΈΛࣗಈͰ΍ͬͯ͘ΕΔίϯϙʔωϯτ
  16. ˜;0;05FDIOPMPHJFT *OD Image !16 Webͱͷҧ͍ • ંΓฦ͠ʢwrapʣ͕ऑ͍ • ςΩετ͸վߦͯ͘͠ΕΔ͕ɺίϯϙʔωϯτࣗମ͕͸Έग़ͨΒ overflow:

    hidden; • σόΠε͝ͱʹίϯϙʔωϯτΛ੾Γସ͑Δ࢓૊ΈΛ࢖ͬͯؾ߹Ͱ͕Μ͹Δ Container Image Image Image Container Text AlexaPresentationLanguageAlexaPresentatio nLanguageAlexaPresentationLanguageAlexa PresentationLanguageAlexaPresentationLang uageAlexaPresentationLanguageAlexaPresen ςΩετͷ৔߹ ίϯϙʔωϯτͷ৔߹
  17. ˜;0;05FDIOPMPHJFT *OD !17 2. APLͰՄೳͳಈతͳදݱ

  18. ˜;0;05FDIOPMPHJFT *OD !18 ࠓճ৮ΕΔ ಈతͳදݱͨͪ • λονͳͲΠϯλϥΫγϣϯपΓ • Ξχϝʔγϣϯ

  19. ˜;0;05FDIOPMPHJFT *OD !19 λονͳͲΠϯλϥΫγϣϯपΓ • ίϯϙʔωϯτ͕σϑΥϧτͰૢ࡞Մೳʹͯ͘͠Ε͍ͯΔ΋ͷ • εϫΠϓ • Pager

    ίϯϙʔωϯτʹΑΔίϯςϯπͷ੾Γସ͑ • εΫϩʔϧ • ScrollView ίϯϙʔωϯτͳͲ • ։ൃऀ͕ࣗ෼Ͱಈ͖Λࢦఆ͢Δ΋ͷ • λον • TouchWrapper ίϯϙʔωϯτͰλονΠϕϯτΛ؂ࢹ͢Δ • εϫΠϓ / εΫϩʔϧ ʢυΩϡϝϯτʹࡌͬͯͳ͍͚Ͳಈ͔ͳ͘͸ͳ͍ʣ • onPageChange / onScroll ϓϩύςΟ ৄࡉ: https://techblog.zozo.com/entry/alexa-presentation-language
  20. ˜;0;05FDIOPMPHJFT *OD !20 APL͸ඳըҎ֎΋Ͱ͖Δ • ίϯϙʔωϯτ
 => ඳըͷ಺༰ΛܾΊΔ΋ͷ • ίϚϯυ


    => ಈ͖Λ༩͑Δ΋ͷ { type: 'ScrollView', item: { type: 'Container', height: '1000vh' }, onScroll: [ { type: 'SetValue', componentId: 'image1', property: 'opacity', value: '0.4' }, ], } ίϯϙʔωϯτ ίϚϯυ
  21. ˜;0;05FDIOPMPHJFT *OD !21 APLʹ͓͚ΔίϚϯυͱ͸ • ը໘্ʹඳը͞ΕͨίϯϙʔωϯτΛมߋͨ͠Γ
 Ի੠Λίϯτϩʔϧ͢Δ໋ྩ • ը໘Λඳը͢Δ࣌΍
 ΠϯλϥΫγϣϯʹ߹Θ࣮ͤͯߦͤ͞Δ͜ͱ͕Ͱ͖Δ

  22. ˜;0;05FDIOPMPHJFT *OD !22 ίϚϯυͷྫ • Scroll ίϚϯυ • ScrollView ͳͲεΫϩʔϧՄೳͳίϯϙʔωϯτͰ


    ೚ҙͷҐஔ·ͰεΫϩʔϧͤ͞Δ • SpeakItem ίϚϯυ • ࢦఆͨ͠จষΛAlexaʹൃ࿩ͤ͞Δ • Parallel ίϚϯυ • ෳ਺ͷίϚϯυΛฒྻͰ࣮ߦͤ͞Δ
  23. ˜;0;05FDIOPMPHJFT *OD !23 Ξχϝʔγϣϯ • ޻෉͢ΔͱҎԼͷ͜ͱ͸Ͱ͖Δ • ॱ൪ʹදࣔ • ಁ໌౓Λ࿈ଓతʹ੾Γସ͑

    • Լ͔Βੜ΍͢ʢτʔετʣ
  24. ˜;0;05FDIOPMPHJFT *OD !24 ؾΛ͚ͭͳͯ͘͸͍͚ͳ͍఺ • ϓϩύςΟ͸΄ͱΜͲॻ͖׵͑ΒΕͳ͍ • SetValue ͱ͍͏ίϚϯυΛ࢖͑͹ϓϩύςΟͷॻ͖׵͑͸Մೳ
 ͨͩ͠

    opacity ͱ text ͷΈʢ 2019೥6݄࣌఺ ʣ • ஋Λ࿈ଓతʹมԽͤ͞ΒΕͳ͍ • SetValue Ͱ opacity Λࢦఆͯ͠΋ɺҰॠͰͦͷ஋ʹͳͬͯ͠·͏
 CSS ͷ transition ͷΑ͏ͳϓϩύςΟ͸ແ͍
  25. ˜;0;05FDIOPMPHJFT *OD !25 ۃΊ͍ͨํ΁ • ʮAlexa Presentation LanguageͷݶքΛ௒͑ͯɺΞχϝʔγϣϯ΍૬ṀΛ࣮ݱ͢Δʯ • https://techblog.zozo.com/entry/alexa-presentation-language

  26. ˜;0;05FDIOPMPHJFT *OD !26 3. APLͰύʔπͷ؅ཧ͸Ͱ͖Δͷ͔

  27. ˜;0;05FDIOPMPHJFT *OD !27 ճ౴: ࢓૊Έ͕ͪΌΜͱ͋Δ

  28. ˜;0;05FDIOPMPHJFT *OD !28 ύʔπͷ੾Γ෼͚ͱ࠶ར༻ • APLϨΠΞ΢τ ͱ͍͏࢓૊ΈΛ࢖͏ • https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-layout.html •

    APLϨΠΞ΢τ͸ෳ਺ͷίϯϙʔωϯτ͔Β੒Δݻ·Γରͯ͠
 ೚ҙͷ໊લΛ෇༩Ͱ͖Δ࢓૊Έ • ࡞ͬͨϨΠΞ΢τ͸ɺtype: "MyContainer" ͷΑ͏ʹ
 ී௨ͷίϯϙʔωϯτͷΑ͏ʹݺͼग़ͤΔ • VueͳͲͷΑ͏ʹϓϩύςΟͱͯ͠Ҿ਺΋౉ͤΔ
  29. ˜;0;05FDIOPMPHJFT *OD !29 ݟͨ໨ʹؔΘΔϓϩύςΟͷ੾Γ෼͚ • Styles ͱ͍͏࢓૊ΈΛ࢖͏ • https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-style- definition-and-evaluation.html

    • color ΍ fontSize ͳͲෳ਺ͷϓϩύςΟΛ
 1ͭͷελΠϧͱͯ͠೚ҙͷ໊લΛ͚ͭΔ͜ͱ͕Ͱ͖Δ࢓૊Έ • ྫ͑͹ AccentStyle ͱ͍͏ελΠϧΛ༻ҙͯ͠ɺจࣈ৭ͱαΠζΛࢦఆ͓͚ͯ͠͹
 ίϯϙʔωϯτͰ style: "AccentStyle" ͷΑ͏ʹࢦఆ͢Δ͚ͩͰ
 ͦͷσβΠϯΛར༻Ͱ͖ΔΑ͏ʹͳΔ • ෳ਺ͷελΠϧ͸ࢦఆͰ͖ͳ͍͕ɺελΠϧͷܧঝ͸Ͱ͖Δ
  30. ˜;0;05FDIOPMPHJFT *OD !30 ؅ཧͰ͖ͦ͏ʁ

  31. ˜;0;05FDIOPMPHJFT *OD !31 ඍົʹख͕ಧ͔ͳ͍ݱ࣮ • APL ϨΠΞ΢τ • ίϚϯυΛϨΠΞ΢τͷதʹཹΊ͓͚ͯͳ͍ͷͰࢀর͕૿͑΍͍͢ •

    ϨΠΞ΢τ֎ͷίϯϙʔωϯτͷλον࣌΍ඳըޙͳͲʹ
 ࣮ߦ͍ͨ͠ίϚϯυ͕͋ͬͨΒͲ͏͠Α͏΋ͳ͍ • Styles • height ΍ paddingɺalignItems ͳͲ͸ࢦఆͰ͖ͳ͍ • จࣈͷελΠϧͷઃఆ͙Β͍ͳΒ͍͚Δ͕ɺϘλϯ͸ݫ͍͠ • ஋Λม਺Խ͢Δ࢓૊Έ͸͋ΔͷͰ
 ϨΠΞ΢τͱ૊Έ߹ΘͤΕ͹ ͍͚ͳ͘͸ͳ͍
  32. ˜;0;05FDIOPMPHJFT *OD !32 ·ͱΊ • ੩తͳը໘ͳΒׂͱ࠶ݱ͕Մೳ • ΞχϝʔγϣϯͳͲͷಈతͳཁૉ΋޻෉͢Ε͹͍͚Δ • ίϯϙʔωϯτΛ؅ཧͰ͖Δ࢓૊Έ΋͋ΔͷͰ


    γϯϓϧͳεΩϧͳΒOK • HTML5ʹରԠ༧ఆͳͷͰɺͦΕ·Ͱແཧ͠ͳ͍ͷ͕҆શ
  33. ˜;0;05FDIOPMPHJFT *OD !33 Let's Voice UI

  34. None
  35. ˜;0;05FDIOPMPHJFT *OD IUUQT[P[PKQ w ೔ຊ࠷େڃͷϑΝογϣϯγϣοϐϯάαΠτΞϓϦ w  Ҏ্ͷγϣοϓɺ Ҏ্ͷϒϥϯυͷऔΓѻ͍
 ʢ೥݄຤࣌఺ʣ

    w ৗ࣌ສ఺Ҏ্ͷ঎඼ΞΠςϜ਺ͱ
 ຖ೔ฏۉ ఺Ҏ্ͷ৽ண঎඼Λܝࡌ w ଈ೔഑ૹαʔϏε w ΪϑτϥοϐϯάαʔϏε w πέ෷͍ͳͲ !35
  36. ˜;0;05FDIOPMPHJFT *OD IUUQTXFBSKQ w ೔ຊ࠷େڃͷϑΝογϣϯίʔσΟωʔτΞϓϦ w  ສμ΢ϯϩʔυಥഁ
 ίʔσΟωʔτ౤ߘ૯਺͸ສ݅Ҏ্
 ʢͱ΋ʹ೥݄຤࣌఺ʣ

    w શੈքʢ"QQ4UPSF(PPHMF1MBZ͕ར༻ՄೳͳશͯͷࠃʣͰ
 μ΢ϯϩʔυ͕Մೳ w ສਓҎ্ͷϑΥϩϫʔΛ࣋ͭϢʔβʔʢ8&"3*45"ʣ΋஀ੜ !36
  37. ˜;0;05FDIOPMPHJFT *OD IUUQT[P[PKQCSBOE[P[P EPSE w ʮ;0;046*5ʯͰܭଌͨ͠ମܕσʔλΛ΋ͱʹɺҰਓͻͱΓͷ
 ମܕʹ߹ͬͨʮ͋ͳͨαΠζʯͷΞΠςϜ w ʮڀۃͷϑΟοτײʯΛ࣮ݱͨ͠ϕʔγοΫΞΠςϜΛఏڙ w

    ΞΠςϜ̩γϟπσχϜύϯπγϟπϏδωεεʔπ
 ωΫλΠϘʔμʔ̩γϟπ௕କΫϧʔωοΫ̩γϟπͳͲ !37