#AAJUG vol.2 APL ハンズオン

by chao2suke

Slide 1

Slide 1 text

APL ϋϯζΦϯ AAJUG vol.2 2019.03.01 HASHTAG: #AAJUG

Slide 2

Slide 2 text

ߨࢣ঺հ

Slide 3

Slide 3 text

ਗ਼໺ ߶࢙ʢͤʔͷʣ Ϋϥεϝιουגࣜձࣾ ࡳຈΦϑΟεॴଐ ׆ಈ಺༰ ίϛϡχςΟʮAlexa Salonʯओ࠵ ίϛϡχςΟʮAmazon Alexa Japan User GroupʯӡӦ Amazonೝఆ Alexa ΤʔδΣϯγʔ ॻ੶ʮ͸͡ΊͯͷAlexaεΩϧ։ൃʯࣥච Classmethod, Inc. AI Solution Department Alexa Technical Evangelist / VUI Architect

Slide 4

Slide 4 text

AGENDA

Slide 5

Slide 5 text

Step #1 Step #3 Step #5 Step #2 Step #4 APLͰͰ͖Δ͜ͱ APLΛ૊ΜͰΈΑ͏ ॓୊(STEP4)ղઆ Ξϯέʔτ ϋϯζΦϯSTEP1 ϋϯζΦϯSTEP2ʙ3 ղઆ

Slide 6

Slide 6 text

APL Alexa Presentation Language

Slide 7

Slide 7 text

Display Template ܾ·ͬͨ࿮ʹςΩετ΍ը૾Λ౰ͯ͸ΊΔɻ 01 02 03 ࣗ༝౓͕௿͍ɻ هड़͕؆୯ɻ

Slide 8

Slide 8 text

APL ࣗ༝౓͕ߴ͍ɻ 01 02 03 ը໘ͷେ͖͞Ͱग़͠෼͚ΒΕΔɻ ಈ͖͕͚ͭΒΕΔɻ

Slide 9

Slide 9 text

APLͰͰ͖Δ͜ͱ

Slide 10

Slide 10 text

01 07 02 03 06 05 04 APL͕ Ͱ͖Δ͜ͱ APL ಡΈ্͛ςΩετಉظ 01. 02. 03. 04. 05. 06. 07. ը໘αΠζ͝ͱͷग़͠෼͚ σʔλͱϨΠΞ΢τͷ ෼཭ εΫϩʔϧରԠ εϥΠυγϣʔ ಈతͳUIͷߏங λονɺεϫΠϓରԠ

Slide 11

Slide 11 text

STEP1 - 10෼

Slide 12

Slide 12 text

Hands on -STEP1 ͜ͷޙͷϋϯζΦϯͷϕʔεͱͳΔԻ੠εΩϧΛߏங͠·͢ɻ ίϐʔˍϖʔετͷΈͳͷͰ͋ͬͱ͍͏ؒʹͰ͖Δ͸ͣʂ develop basic skill Point ʮ͋ͳͨͷ໊લʯ͸AMAZON.FirstNameεϩοτΛ࢖༻͍ͯ͠·͢ɻ ΋͠ೝࣝ͞Εʹ͍͘৔߹͸εϩοτʹ௚઀ॻ͘ͷ͕͍͍͔΋ɻ

Slide 13

Slide 13 text

APLجૅߨ࠲

Slide 14

Slide 14 text

APL Document ը໘ϨΠΞ΢τͱ ίϯϙʔωϯτΛنఆ͢Δ  APL Data ը໘ʹຒΊࠐΉ ৘ใΛఆٛ͢Δ  APL Command ը໘ͱͷ ΠϯλϥΫγϣϯΛ ఆٛ͢Δ 

Slide 15

Slide 15 text

※ΠϝʔδͰ͢ɻ APL Data APL Document APL Commands

Slide 16

Slide 16 text

APL Document ελΠϧγʔτతͳΠϝʔδ { "type": "Container", "height": "100vh", "item": [ { "type": "Image", "width": "100vw", "height": "100vh", "opacity": 0.4, "source": "https:/ /XXX.png", "scale": "best-ﬁll", "position": "absolute" }, { "type": "Text", "paddingTop": "50px", "text": "͖͢ͳͻͱΛ͑ΒΜͰͶ" }, { "type": "Container", "width": "100vw", "height": "65vh", .......

Slide 17

Slide 17 text

Image / Text Pager Touch Wrapper APL Document ελΠϧγʔτతͳΠϝʔδ Sequence Container Frame Ұํ޲ʹ ίϯϙʔωϯτΛ഑ஔɻ ͦͷ·Μ·ɻ ը૾ͱจࣈɻ ڥքͱഎܠ৭ɻ ؙΛ࡞ͬͯͦͷதʹς ΩετΛ഑ஔ͢Δɺ౳ ϖʔδϯάॲཧɻ ίϯϙʔωϯτ܈ͷ ഑ྻ͕ೖΔɻ εΫϩʔϧͰදࣔɻ ॎͱԣΛબ΂Δɻ ࢦఆۣͨ͠ܗʹ λονΠϕϯτΛ ΋ͨͤΔ

Slide 18

Slide 18 text

APL DocumentʹΑΔߏ੒

Slide 19

Slide 19 text

APL DocumentʹΑΔߏ੒ Container Container Container Image Image Image Text Text Text Panel Text

Slide 20

Slide 20 text

ΦʔαϦϯάπʔϧ

Slide 21

Slide 21 text

ΦʔαϦϯάπʔϧ APL DocumentͷߏஙΛखܰʹ

Slide 22

Slide 22 text

ମݧͯ͠ΈΑ͏

Slide 23

Slide 23 text

STEP2 - 15෼

Slide 24

Slide 24 text

Hands on -STEP2 STEP1ͷεΩϧʹAPLͷը૾Λ௥Ճ͠·͢ɻ ͪ͜Β΋ίϐʔˍϖʔετͷΈʂ develop APL Top page Point Lambdaʹ৽ͨʹϑΥϧμ΍ϑΝΠϧΛ௥Ճ͠·͢ɻ ͜ͷ௲Γ΍େจࣈখจࣈΛؒҧ͑ͳ͍Α͏ʹʂ

Slide 25

Slide 25 text

STEP2ղઆ

Slide 26

Slide 26 text

σʔλόΠϯσΟϯά

Slide 27

Slide 27 text

datasource όΠϯσΟϯά͍ͨ͠Documentͷ৔ॴΛม਺Խͯ͠ datasourceʹσʔλΛೖΕΔ DocumentͱDataΛͭͳ͙

Slide 28

Slide 28 text

http:/ /bit.ly/aajug-apl-doc-top

Slide 29

Slide 29 text

Lambda͔ΒData Binding

Slide 30

Slide 30 text

STEP3 - 20෼

Slide 31

Slide 31 text

Hands on -STEP3 STEP2ͷεΩϧʹAPLͷը૾Λ௥Ճ͠ɺ ಈతʹσʔλόΠϯσΟϯά͠·͢ɻ ίʔυ͕ൈ͚͍ͯΔͷͰɺߟ͑ͯຒΊͯΈΑ͏ʂ ੒ޭͨ͠Β࣮ࡍʹϝοηʔδ͕ඈͿΑʂ develop APL Staﬀ page Point σʔλόΠϯσΟϯάΛLambda͔Βߦ͏ʹ͸Ͳ͏͢ΔΜͰ͚ͨͬ͠ʁ

Slide 32

Slide 32 text

STEP3ղઆ

Slide 33

Slide 33 text

STEP4

Slide 34

Slide 34 text

STEP4ղઆ

Slide 35

Slide 35 text

APL Commands ExecuteCommandsͰಈ࡞ΛJSONܗࣜͰఆٛɻ APL DocumentͷίϯϙʔωϯτʹIDΛ͚ͭ APL CommandͷComponent IDͰࢦఆͯ͠ ಈ͖Λ͚ͭΔ APL Documentʹಈ͖Λ͚ͭΔ

Slide 36

Slide 36 text

APL Commandsγʔέϯε Sequential SetPage Parallel SpeakItem SetPage Parallel SpeakItem SetPage Parallel SpeakItem …………

Slide 37

Slide 37 text

STEP4Ͱ࢖͍ͬͯΔTips 01 02 03 04 APL DocumentʹTextΛ෯0Ͱ࢓ࠐΉɻ PagerͱTextΛಉϨϕϧͰContainerʹೖΕΔ SpeakItemͱSetPageΛParallelίϚϯυͰ͘͘Γɺ ϖʔδભҠͱಉ࣌ʹൃ࿩ͤ͞Δ APL DataͷTransformersΛ࢖ͬͯSSMLΛԻ ੠ʹม׵ 3. ΛSequentialίϚϯυͰॱ൪ʹྲྀ͢ 05 ࠷ॳʹશը૾Λදࣔ͢Δ͜ͱͰը૾ΛΩϟογϡͤ͞ɺ λΠϛϯά͕ͣΕͳ͍Α͏ʹ͢Δ