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

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

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

;0;05FDIOPMPHJFT *OD !3 Amazon Alexa

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Decks by sesta

Other Decks in Technology

Featured

Transcript