Upgrade to Pro — share decks privately, control downloads, hide ads and more …

奥深きAPLの世界

 奥深きAPLの世界

2019/07/26 AAJUG沖縄 登壇資料

chao2suke

July 26, 2019
Tweet

More Decks by chao2suke

Other Decks in Technology

Transcript

  1. Ԟਂ͖
    "1-ͷੈք
    AAJUGԭೄ vol.1 2019.07.26
    Ϋϥεϝιουגࣜձࣾͤʔͷ

    View full-size slide

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

    View full-size slide

  3. Step #1 Step #3 Step #5
    Step #2 Step #4
    APLͱ͸
    APLͷ࣮૷
    APLͷجૅ
    APL Video
    APLͰͰ͖Δ͜ͱ

    View full-size slide

  4. "1-
    "MFYB1SFTFOUBUJPO-BOHVBHF

    View full-size slide

  5. Display Template
    ܾ·ͬͨ࿮ʹςΩετ΍ը૾Λ౰ͯ͸ΊΔɻ
    01
    02
    03 ࣗ༝౓͕௿͍ɻ
    هड़͕؆୯ɻ

    View full-size slide

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

    View full-size slide

  7. "1-ͰͰ͖Δ͜ͱ

    View full-size slide

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

    View full-size slide

  9. APL Document
    ը໘ϨΠΞ΢τͱ
    ίϯϙʔωϯτΛنఆ͢Δ

    APL Data
    ը໘ʹຒΊࠐΉ
    ৘ใΛఆٛ͢Δ

    APL Command
    ը໘ͱͷ
    ΠϯλϥΫγϣϯΛ
    ఆٛ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. APL DocumentʹΑΔߏ੒

    View full-size slide

  14. APL DocumentʹΑΔߏ੒
    Container
    Container
    Container
    Image Image Image
    Text Text Text
    Panel Text

    View full-size slide

  15. ΦʔαϦϯάπʔϧ

    View full-size slide

  16. ΦʔαϦϯάπʔϧ
    "1-%PDVNFOUͷߏஙΛखܰʹ

    View full-size slide

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

    View full-size slide

  18. datasource
    όΠϯσΟϯά͍ͨ͠%PDVNFOUͷ৔ॴΛม਺Խͯ͠
    EBUBTPVSDFʹσʔλΛೖΕΔ
    %PDVNFOUͱ%BUBΛͭͳ͙

    View full-size slide

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

    View full-size slide

  20. APL Commands
    &YFDVUF$PNNBOETͰಈ࡞Λ+40/ܗࣜͰఆٛɻ
    "1-%PDVNFOUͷίϯϙʔωϯτʹ*%Λ͚ͭ
    "1-$PNNBOEͷ$PNQPOFOU*%Ͱࢦఆͯ͠
    ಈ͖Λ͚ͭΔ
    "1-%PDVNFOUʹಈ͖Λ͚ͭΔ

    View full-size slide

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

    View full-size slide

  22. ࣮૷ํ๏

    View full-size slide

  23. ΠϯλʔϑΣʔεΛઃఆ

    View full-size slide

  24. APL DocumentΛઃఆ

    View full-size slide

  25. A P L D o cu m e n tΛઃఆ

    View full-size slide

  26. addD ir e ctiv e () Ͱ Ϩεϙϯε

    View full-size slide

  27. DocumentͱCommand͸ผ
    APL Document
    APL Command

    View full-size slide

  28. RenderDocument
    document: “cafe.json”,
    datasources: {
    cafedata: {
    properties: {

    dataA: “AAA”,
    dataB: “BBB”,
    dataC: “CCC”
    }
    }
    }
    cafe.json(Lambda)
    {
    "type": "Text",
    "width": "0",
    "height": "0",
    "text": "${payload.cafedata.properties.dataA"},
    "id": "SpeechDrip",
    DocumentͱDataSources

    View full-size slide

  29. DocumentͱDataSources
    RenderDocument cafe.json(Lambda)
    document: “cafe.json”,
    datasources: {
    cafedata: {
    properties: {

    dataA: “AAA”,
    dataB: “BBB”,
    dataC: “CCC”
    }
    }
    }
    {
    "type": "Text",
    "width": "0",
    "height": "0",
    "text": "${payload.cafedata.properties.dataA"},
    "id": "SpeechDrip",

    View full-size slide

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

    View full-size slide

  31. APL Document

    View full-size slide

  32. ओͳϓϩύςΟ
    audioTrack foreground/background
    autoplay true/false
    source ιʔεURL
    onEnd ऴྃ࣌ͷίϚϯυ

    View full-size slide

  33. Tips
    01
    02
    03
    ιʔε63-͸഑ྻܗࣜͰ΋0,
    "1-$PNNBOEٴͼTQFFDI0VUQVU͸࠶ੜதՄೳ
    BVEJPUSBDLGPSFHSPVOE࣌͸1BSSBSFMίϚϯυ͸࢖͑ͳ͍

    View full-size slide

  34. Summ a ry
    01
    02
    03
    "1-͸ը૾ɾςΩετɾϘλϯɾϏσΦͳͲ͕ࣗ༝ʹ഑ஔͰ͖Δ
    "1-$PNNBOEͰ"1-ͷૢ࡞͕Մೳ
    ϏσΦΛ্ख͘࢖͏ͱΑΓྟ৔ײͷ͋ΔεΩϧ͕Ͱ͖ΔΑ

    View full-size slide