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

by sesta

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

גࣜձࣾ;0;0ςΫϊϩδʔζ ։ൃ෦ 3%୲౰ ෢ాमฏTFTUBͤͨ͢ ;0;05FDIOPMPHJFT *OD • Alexa΍Google AssistantͳͲԻ੠UIͷ։ൃΛ୲౰ • ੲ͸WebαʔϏεͷϑϩϯτΛ΍͍͕ͬͯͨ  ࠷ۙ͸Alexaͱͣͬͱ͓͠Ό΂Γ͍ͯ͠Δ • झຯ͸ఉ͍͡ΓͰɺࠓ೥͸ϝϩϯʹखΛग़͍ͯ͠Δ !2

Slide 3

Slide 3 text

;0;05FDIOPMPHJFT *OD !3 Amazon Alexa

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

;0;05FDIOPMPHJFT *OD !5 Alexa Presentation Language

Slide 6

Slide 6 text

;0;05FDIOPMPHJFT *OD !6 Alexa Presentation Language ʢҎԼɺAPLʣͱ͸ • Alexa༻ͷσβΠϯݴޠ • ੠Ͱͷ΍ΓͱΓΛิڧ͢ΔϏδϡΞϧͳදݱ͕ՄೳͱͳΔ • ಡΜͰ͍Δ಺༰ΛจষͰฒ΂Δ • ίʔσΟωʔτΛը૾ͰҰཡදࣔ • νϡʔτϦΞϧΛಈըͰ࠶ੜ • λονͰͷૢ࡞ΛՄೳʹͨ͠ΓɺؒΛஔ͍͔ͯΒ͠Ό΂ΒͤΔͳͲ  ΠϯλϥΫγϣϯͷ෯͕޿͕Δ

Slide 7

Slide 7 text

;0;05FDIOPMPHJFT *OD !7 APLΛ;ΜͩΜʹ࢖ͬͨεΩϧͷ঺հʢએ఻ʣ https://www.youtube.com/watch?v=LaKYaX7Ci0A

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

;0;05FDIOPMPHJFT *OD !9 1. APLΛ࢖ͬͨϨΠΞ΢τͷ૊Έํ

Slide 10

Slide 10 text

;0;05FDIOPMPHJFT *OD !10 APL͸ΦϒδΣΫτͷߏ଄Ͱهड़͢ΔHTMLͷΠϝʔδ • Ґஔͷܭࢉํ๏͸HTMLͱ΄ͱΜͲҰॹ • جຊతʹࠨ্͔ΒελοΫ͞Ε͍ͯ͘ • absolute ΋͋Δ • flex ΋͋Δ • Flexbox/YogaΛαϙʔτ: https://yogalayout.com • ࢦఆͰ͖ΔϓϩύςΟ΋HTML/CSSͱࣅͯΔ • ϓϩύςΟͷྫ: height / padding / justifyContent

Slide 11

Slide 11 text

;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ͷλά ʣ ίϯϙʔωϯτಛ༗ͷ ৘ใΛࢦఆ ݟͨ໨Λ੔͑Δ৘ใΛ ͦΕͧΕࢦఆ

Slide 12

Slide 12 text

;0;05FDIOPMPHJFT *OD !12 APLʹ͓͚Δίϯϙʔωϯτͱ͸ • Alexa͕ඪ४ͰղऍͰ͖ΔɺͦΕҎ্෼ղͰ͖ͳ͍ཁૉͰ  Webʹ͓͚ΔHTMLͷλάʹ͍ۙଘࡏ • ίϯϙʔωϯτ͝ͱʹ໾ׂ͕͸͖ͬΓܾ·͓ͬͯΓɺ  ࢦఆͰ͖ΔϓϩύςΟ΋ҟͳΔ

Slide 13

Slide 13 text

;0;05FDIOPMPHJFT *OD !13 ίϯϙʔωϯτͷྫ • Container ίϯϙʔωϯτ • Flexbox Λ༻͍ͨϨΠΞ΢τͰ༻͍Δ • item ͱ͍͏ϓϩύςΟʹ౉͢͜ͱͰɺଞͷίϯϙʔωϯτΛ಺แͰ͖Δ • Text ίϯϙʔωϯτ / Image ίϯϙʔωϯτ • ςΩετ΍ը૾Λදࣔ • ScrollView ίϯϙʔωϯτ • ಺แͨ͠ίϯϙʔωϯτ͕ը໘ʹऩ·Βͳ͔ͬͨ৔߹ʹ  εΫϩʔϧͰ͖ΔΑ͏ʹ͢Δ

Slide 14

Slide 14 text

;0;05FDIOPMPHJFT *OD !14 ίʔσ૬ஊεΩϧͷݕࡧ݁Ռͷߏ଄ Containerʢ direction: row ʣ Containerʢ direction: row ʣ Containerʢ direction: column ʣ Containerʢ direction: row ʣ ScrollView Image Image Image Image

Slide 15

Slide 15 text

;0;05FDIOPMPHJFT *OD !15 Webͱͷҧ͍ • ίϯϙʔωϯτڞ༗Ͱ࢖༻Ͱ͖ΔϓϩύςΟ͕গͳ͍ • ݟͨ໨ʹؔ܎͢Δ΋ͷͩͱ width ΍ heightɺpadding ͚͕ͩڞ௨ • ཁૉΛฒ΂Δ => Containerɺഎܠ৭΍ϘʔμʔͳͲͷ૷০ => Frame • Ϧονͳίϯϙʔωϯτ͕༻ҙ͞ΕͯΔ • Pager: εϫΠϓͰத਎Λ੾Γସ͑ΒΕΔίϯϙʔωϯτ • Sequence: ஗ԆಡΈࠐΈΛࣗಈͰ΍ͬͯ͘ΕΔίϯϙʔωϯτ

Slide 16

Slide 16 text

;0;05FDIOPMPHJFT *OD Image !16 Webͱͷҧ͍ • ંΓฦ͠ʢwrapʣ͕ऑ͍ • ςΩετ͸վߦͯ͘͠ΕΔ͕ɺίϯϙʔωϯτࣗମ͕͸Έग़ͨΒ overflow: hidden; • σόΠε͝ͱʹίϯϙʔωϯτΛ੾Γସ͑Δ࢓૊ΈΛ࢖ͬͯؾ߹Ͱ͕Μ͹Δ Container Image Image Image Container Text AlexaPresentationLanguageAlexaPresentatio nLanguageAlexaPresentationLanguageAlexa PresentationLanguageAlexaPresentationLang uageAlexaPresentationLanguageAlexaPresen ςΩετͷ৔߹ ίϯϙʔωϯτͷ৔߹

Slide 17

Slide 17 text

;0;05FDIOPMPHJFT *OD !17 2. APLͰՄೳͳಈతͳදݱ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

;0;05FDIOPMPHJFT *OD !19 λονͳͲΠϯλϥΫγϣϯपΓ • ίϯϙʔωϯτ͕σϑΥϧτͰૢ࡞Մೳʹͯ͘͠Ε͍ͯΔ΋ͷ • εϫΠϓ • Pager ίϯϙʔωϯτʹΑΔίϯςϯπͷ੾Γସ͑ • εΫϩʔϧ • ScrollView ίϯϙʔωϯτͳͲ • ։ൃऀ͕ࣗ෼Ͱಈ͖Λࢦఆ͢Δ΋ͷ • λον • TouchWrapper ίϯϙʔωϯτͰλονΠϕϯτΛ؂ࢹ͢Δ • εϫΠϓ / εΫϩʔϧ ʢυΩϡϝϯτʹࡌͬͯͳ͍͚Ͳಈ͔ͳ͘͸ͳ͍ʣ • onPageChange / onScroll ϓϩύςΟ ৄࡉ: https://techblog.zozo.com/entry/alexa-presentation-language

Slide 20

Slide 20 text

;0;05FDIOPMPHJFT *OD !20 APL͸ඳըҎ֎΋Ͱ͖Δ • ίϯϙʔωϯτ  => ඳըͷ಺༰ΛܾΊΔ΋ͷ • ίϚϯυ  => ಈ͖Λ༩͑Δ΋ͷ { type: 'ScrollView', item: { type: 'Container', height: '1000vh' }, onScroll: [ { type: 'SetValue', componentId: 'image1', property: 'opacity', value: '0.4' }, ], } ίϯϙʔωϯτ ίϚϯυ

Slide 21

Slide 21 text

;0;05FDIOPMPHJFT *OD !21 APLʹ͓͚ΔίϚϯυͱ͸ • ը໘্ʹඳը͞ΕͨίϯϙʔωϯτΛมߋͨ͠Γ  Ի੠Λίϯτϩʔϧ͢Δ໋ྩ • ը໘Λඳը͢Δ࣌΍  ΠϯλϥΫγϣϯʹ߹Θ࣮ͤͯߦͤ͞Δ͜ͱ͕Ͱ͖Δ

Slide 22

Slide 22 text

;0;05FDIOPMPHJFT *OD !22 ίϚϯυͷྫ • Scroll ίϚϯυ • ScrollView ͳͲεΫϩʔϧՄೳͳίϯϙʔωϯτͰ  ೚ҙͷҐஔ·ͰεΫϩʔϧͤ͞Δ • SpeakItem ίϚϯυ • ࢦఆͨ͠จষΛAlexaʹൃ࿩ͤ͞Δ • Parallel ίϚϯυ • ෳ਺ͷίϚϯυΛฒྻͰ࣮ߦͤ͞Δ

Slide 23

Slide 23 text

;0;05FDIOPMPHJFT *OD !23 Ξχϝʔγϣϯ • ޻෉͢ΔͱҎԼͷ͜ͱ͸Ͱ͖Δ • ॱ൪ʹදࣔ • ಁ໌౓Λ࿈ଓతʹ੾Γସ͑ • Լ͔Βੜ΍͢ʢτʔετʣ

Slide 24

Slide 24 text

;0;05FDIOPMPHJFT *OD !24 ؾΛ͚ͭͳͯ͘͸͍͚ͳ͍఺ • ϓϩύςΟ͸΄ͱΜͲॻ͖׵͑ΒΕͳ͍ • SetValue ͱ͍͏ίϚϯυΛ࢖͑͹ϓϩύςΟͷॻ͖׵͑͸Մೳ  ͨͩ͠ opacity ͱ text ͷΈʢ 2019೥6݄࣌఺ ʣ • ஋Λ࿈ଓతʹมԽͤ͞ΒΕͳ͍ • SetValue Ͱ opacity Λࢦఆͯ͠΋ɺҰॠͰͦͷ஋ʹͳͬͯ͠·͏  CSS ͷ transition ͷΑ͏ͳϓϩύςΟ͸ແ͍

Slide 25

Slide 25 text

;0;05FDIOPMPHJFT *OD !25 ۃΊ͍ͨํ΁ • ʮAlexa Presentation LanguageͷݶքΛ௒͑ͯɺΞχϝʔγϣϯ΍૬ṀΛ࣮ݱ͢Δʯ • https://techblog.zozo.com/entry/alexa-presentation-language

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

;0;05FDIOPMPHJFT *OD !28 ύʔπͷ੾Γ෼͚ͱ࠶ར༻ • APLϨΠΞ΢τ ͱ͍͏࢓૊ΈΛ࢖͏ • https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-layout.html • APLϨΠΞ΢τ͸ෳ਺ͷίϯϙʔωϯτ͔Β੒Δݻ·Γରͯ͠  ೚ҙͷ໊લΛ෇༩Ͱ͖Δ࢓૊Έ • ࡞ͬͨϨΠΞ΢τ͸ɺtype: "MyContainer" ͷΑ͏ʹ  ී௨ͷίϯϙʔωϯτͷΑ͏ʹݺͼग़ͤΔ • VueͳͲͷΑ͏ʹϓϩύςΟͱͯ͠Ҿ਺΋౉ͤΔ

Slide 29

Slide 29 text

;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" ͷΑ͏ʹࢦఆ͢Δ͚ͩͰ  ͦͷσβΠϯΛར༻Ͱ͖ΔΑ͏ʹͳΔ • ෳ਺ͷελΠϧ͸ࢦఆͰ͖ͳ͍͕ɺελΠϧͷܧঝ͸Ͱ͖Δ

Slide 30

Slide 30 text

;0;05FDIOPMPHJFT *OD !30 ؅ཧͰ͖ͦ͏ʁ

Slide 31

Slide 31 text

;0;05FDIOPMPHJFT *OD !31 ඍົʹख͕ಧ͔ͳ͍ݱ࣮ • APL ϨΠΞ΢τ • ίϚϯυΛϨΠΞ΢τͷதʹཹΊ͓͚ͯͳ͍ͷͰࢀর͕૿͑΍͍͢ • ϨΠΞ΢τ֎ͷίϯϙʔωϯτͷλον࣌΍ඳըޙͳͲʹ  ࣮ߦ͍ͨ͠ίϚϯυ͕͋ͬͨΒͲ͏͠Α͏΋ͳ͍ • Styles • height ΍ paddingɺalignItems ͳͲ͸ࢦఆͰ͖ͳ͍ • จࣈͷελΠϧͷઃఆ͙Β͍ͳΒ͍͚Δ͕ɺϘλϯ͸ݫ͍͠ • ஋Λม਺Խ͢Δ࢓૊Έ͸͋ΔͷͰ  ϨΠΞ΢τͱ૊Έ߹ΘͤΕ͹ ͍͚ͳ͘͸ͳ͍

Slide 32

Slide 32 text

;0;05FDIOPMPHJFT *OD !32 ·ͱΊ • ੩తͳը໘ͳΒׂͱ࠶ݱ͕Մೳ • ΞχϝʔγϣϯͳͲͷಈతͳཁૉ΋޻෉͢Ε͹͍͚Δ • ίϯϙʔωϯτΛ؅ཧͰ͖Δ࢓૊Έ΋͋ΔͷͰ  γϯϓϧͳεΩϧͳΒOK • HTML5ʹରԠ༧ఆͳͷͰɺͦΕ·Ͱແཧ͠ͳ͍ͷ͕҆શ

Slide 33

Slide 33 text

;0;05FDIOPMPHJFT *OD !33 Let's Voice UI

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

;0;05FDIOPMPHJFT *OD IUUQT[P[PKQ w ೔ຊ࠷େڃͷϑΝογϣϯγϣοϐϯάαΠτΞϓϦ w Ҏ্ͷγϣοϓɺ Ҏ্ͷϒϥϯυͷऔΓѻ͍  ʢ೥݄຤࣌఺ʣ w ৗ࣌ສ఺Ҏ্ͷ঎඼ΞΠςϜ਺ͱ  ຖ೔ฏۉ ఺Ҏ্ͷ৽ண঎඼Λܝࡌ w ଈ೔഑ૹαʔϏε w ΪϑτϥοϐϯάαʔϏε w πέ෷͍ͳͲ !35

Slide 36

Slide 36 text

;0;05FDIOPMPHJFT *OD IUUQTXFBSKQ w ೔ຊ࠷େڃͷϑΝογϣϯίʔσΟωʔτΞϓϦ w ສμ΢ϯϩʔυಥഁ  ίʔσΟωʔτ౤ߘ૯਺͸ສ݅Ҏ্  ʢͱ΋ʹ೥݄຤࣌఺ʣ w શੈքʢ"QQ4UPSF(PPHMF1MBZ͕ར༻ՄೳͳશͯͷࠃʣͰ  μ΢ϯϩʔυ͕Մೳ w ສਓҎ্ͷϑΥϩϫʔΛ࣋ͭϢʔβʔʢ8&"3*45"ʣ΋஀ੜ !36

Slide 37

Slide 37 text

;0;05FDIOPMPHJFT *OD IUUQT[P[PKQCSBOE[P[P EPSE w ʮ;0;046*5ʯͰܭଌͨ͠ମܕσʔλΛ΋ͱʹɺҰਓͻͱΓͷ  ମܕʹ߹ͬͨʮ͋ͳͨαΠζʯͷΞΠςϜ w ʮڀۃͷϑΟοτײʯΛ࣮ݱͨ͠ϕʔγοΫΞΠςϜΛఏڙ w ΞΠςϜ̩γϟπσχϜύϯπγϟπϏδωεεʔπ  ωΫλΠϘʔμʔ̩γϟπ௕କΫϧʔωοΫ̩γϟπͳͲ !37