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

Alexaで地図を表示したい話 - #スマートスピーカーミーティング

Alexaで地図を表示したい話 - #スマートスピーカーミーティング

【札幌】スマートスピーカーミーティング 2019/07/25 での発表。
https://sapporo-gaomar.connpass.com/event/139400

Alexaで地図情報を表示させるためにチャレンジした話です。

Kihara, Takuya

July 25, 2019
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. εϚʔτεϐʔΧʔϛʔςΟϯά
    @tacck
    "MFYBͰ஍ਤΛද͍ࣔͨ͠࿩
    ʲࡳຈʳεϚʔτεϐʔΧʔϛʔςΟϯά

    2019/07/25

    View full-size slide

  2. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά

    • ໊લ

    tacck / ໦ݪ ୎໵

    • ॴଐ

    גࣜձࣾϊʔεσΟςʔϧ

    • ओ࠵

    • ΏΔWebษڧձ@ࡳຈ

    • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ

    • ޷͖ͳϑΟΪϡΞεέʔτͷٕ

    εϓϨουɾΠʔάϧ

    View full-size slide

  3. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    $MPWBεΩϧϦϦʔεͯ͠·͢
    • ʮ͍ͭ΋ͷνΣοΫʯ

    • LINEࣾͷग़͍ͯ͠Δ

    ʮLINE Clovaʯઐ༻εΩϧ

    • ேͷ࣋ͪ෺νΣοΫʹ

    Ͳ͏ͧʂ

    View full-size slide

  4. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ຊ୊

    View full-size slide

  5. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ࠓ೔ͷ࿩
    • AlexaͷεΩϧͰ஍ਤΛදࣔͤͯ͞Έ͍ͨ
    ΞϨΫαɺ

    ʓʓͷ஍ਤΛݟͤͯ

    View full-size slide

  6. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ͳͥ஍ਤΛද͍ࣔͨ͠ͷ͔
    • (࠷ۙ)஍ਤΛ࢖͏ձࣾʹͳͬͨͷͰɻ

    • ͳͷͰɺ࠷ۙ஍ਤʹؔ͢Δ։ൃͳͲ΍Γ࢝Ίͨɻ

    • Google Maps API ࢖ͬͨΓɻ

    • Leaflet.js + OpenStreetMap ৮ͬͨΓɻ

    View full-size slide

  7. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά

    ࡳຈࢢͷ'SFF8J'J

    View full-size slide

  8. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ✌ bТ✌
    ࡾ✌ Т
    ✌ࡾ ✌Т

    View full-size slide

  9. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ͦΜͳΘ͚Ͱ
    • ͏·͘΍Ε͹ɺεϚʔτεϐʔΧʔͰ

    ஍ਤ৘ใΛఏڙͰ͖ΔͷͰ͸?

    • Alexa SkillͰ஍ਤදࣔʹτϥΠͯ͠Έ·ͨ͠ɻ

    View full-size slide

  10. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    جຊํ਑
    • ࠓճ͸೉͍͜͠ͱ͸͠ͳ͍

    • APLͰ஍ਤͷը૾ͷΈΛදࣔ

    • Ґஔ͸ݻఆ

    View full-size slide

  11. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ஍ਤը૾
    • ஍ਤը૾͸ OpenStreetMap ͷλΠϧը૾Λ࢖͏ɻ

    (CC BY-SA 2.0)

    • ஍ਤը૾ͷऔಘɾදࣔํ๏Ͱ2छྨ

    • λΠϧը૾Λ௚઀APLͰѻ͏

    • ஍ਤΛҰ୴ϔουϨεϒϥ΢βͰදࣔ͠

    εΫϦʔϯγϣοτΛ࡞੒ͯ͠APL΁

    View full-size slide

  12. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    • λΠϧը૾
    ํ๏λΠϧը૾
    ஍ਤΛλΠϧঢ়ʹ෼ׂ

    View full-size slide

  13. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    • λΠϧը૾
    ํ๏λΠϧը૾
    ΞϨΫαɺ

    ʓʓͷ஍ਤΛݟͤͯ
    OSMͷαʔό

    View full-size slide

  14. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    • λΠϧը૾
    ํ๏λΠϧը૾
    ΞϨΫαɺ

    ʓʓͷ஍ਤΛݟͤͯ
    OSMͷαʔό
    ର৅ͷҢ౓ܦ౓Λऔಘ͠ɺ
    ֘౰͢ΔλΠϧը૾Λऔಘ

    View full-size slide

  15. !UBDDL
    εϚʔτεϐʔΧʔͰ༡΅͏ձ!ࡳຈεϚεϐࡳຈ

    View full-size slide

  16. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ

    View full-size slide

  17. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ ʮࡳຈӺʯͰҐஔ৘ใΛݕࡧ͠ɺ

    Ң౓ܦ౓Λऔಘɻ

    View full-size slide

  18. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ
    Ң౓ܦ౓ΛɺλΠϧը૾ͷ

    XɾYʹஔ͖׵͑ɻ

    View full-size slide

  19. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ
    ࠲ඪͷपลͷը૾Λ഑ஔɻ

    View full-size slide

  20. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    λΠϧը૾Ͱͷ՝୊
    • ʮද͍ࣔͨ͠΋ͷʯΛத৺ʹ͢Δͷ͕೉͍͠ɻ
    ࢦఆͨ͠࠲ඪΛؚΉ

    λΠϧը૾Λදࣔ

    ˠ ࠲ඪ͕λΠϧը૾ͷ

    த৺ʹ͘ΔΘ͚Ͱ͸ͳ͍

    View full-size slide

  21. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    λΠϧը૾Ͱͷ՝୊
    • ʮද͍ࣔͨ͠΋ͷʯΛத৺ʹ͢Δͷ͕೉͍͠ɻ
    पғΛܨ͛Ε͹
    ͜͏͍͏ײ͡

    View full-size slide

  22. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    λΠϧը૾Ͱͷ՝୊
    • ʮද͍ࣔͨ͠΋ͷʯΛத৺ʹ͢Δͷ͕೉͍͠ɻ
    ͜͏͍͏ϨΠΞ΢τ΋
    ΍΍खؒ

    View full-size slide

  23. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    λΠϧը૾Ͱͷ՝୊
    • ͦͷଞ

    • ஍ਤʹʮϐϯʯΛཱͯΔͳͲɺ

    Ұൠతͳ஍ਤը૾ʹཉ͍͠΋ͷΛ࡞ΓͮΒ͍ɻ

    View full-size slide

  24. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ํ๏εΫϦʔϯγϣοτ
    • εΫϦʔϯγϣοτΛදࣔ͢Δ৔߹
    ΞϨΫαɺ

    ʓʓͷ஍ਤΛݟͤͯ
    OSMͷαʔό

    View full-size slide

  25. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ΞϨΫαɺ

    ʓʓͷ஍ਤΛݟͤͯ
    OSMͷαʔό
    SS࡞੒αʔό
    OSMͷ஍ਤΛҰ୴ϒϥ΢βͰදࣔ͠
    ͦͷεΫϦʔϯγϣοτΛ
    AlexaͰදࣔ

    View full-size slide

  26. !UBDDL
    εϚʔτεϐʔΧʔͰ༡΅͏ձ!ࡳຈεϚεϐࡳຈ

    View full-size slide

  27. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ

    View full-size slide

  28. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ
    ʮࡳຈӺʯͰҐஔ৘ใΛݕࡧ͠ɺ

    Ң౓ܦ౓Λऔಘɻ

    View full-size slide

  29. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ
    SSαʔόͷURLΛઃఆɻ

    View full-size slide

  30. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ίʔυ
    DataSources಺΁

    URLΛઃఆɻ

    View full-size slide

  31. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ͨͩ͠
    • ࣮ػͰ͸͕͔͔࣌ؒΓ͗ͯ͢(?)ɺදࣔ͞Εͳ͍ɻ


    View full-size slide

  32. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    εΫϦʔϯγϣοτͰͷ՝୊
    • ͦ΋ͦ΋؀ڥߏஙͷϋʔυϧ͕ߴΊɻ

    • ࠓճ͸ϦϞʔτͰPuppeteerΛ࢖ͬͯը૾Խ

    • ೋॏʹ௨৴͢Δ͜ͱʹͳΔͷͰɺ

    දࣔ·Ͱʹ͕͔͔࣌ؒΔɻ(ͦ΋ͦ΋දࣔͰ͖ͯͳ͍)

    → ͪ͜Β͸ɺࣄલʹΩϟογϡͰ͖Ε͹

    ɹ ͋Δఔ౓ղܾͦ͠͏ɻ

    (S3ͷը૾͸දࣔͰ͖ΔͷͰɺԠ౴͕࣌ؒ໰୊ɻ)

    View full-size slide

  33. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ·ͱΊ

    View full-size slide

  34. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ·ͱΊ
    • ΠϕϯτҊ಺΍ձࣾҊ಺ͳͲɺ

    ʮಛఆͷ৔ॴͷ஍ਤը૾දࣔʯͷΑ͏ͳ

    ද͍ࣔͨ͠஍ਤ৘ใΛݻఆԽͰ͖ΔγʔϯͰ͋Ε͹ɺ

    ࢖͑ͦ͏ɻ

    • ʮϒϥ΢βͷ஍ਤΞϓϦʯͰظ଴͞ΕΔػೳͷ࣮ݱʹ͸ɺ

    ·ͩ·ͩ޻෉͕ඞཁɻ


    View full-size slide

  35. !UBDDL
    εϚʔτεϐʔΧʔϛʔςΟϯά
    ஫ҙ
    • ຊ֨తʹ࢖͏৔߹͸Ωϟογϡ͕ඞཁ͕ͩɺ

    ར༻͢Δ஍ਤαʔϏεʹΑͬͯ͸੍ݶ͞Ε͍ͯΔͷͰ஫ҙɻ

    • ྫ͑͹

    • Google MapͰ͸εΫϦʔϯγϣοτΛ࢖͑ͳ͍ɻ

    • ঎༻ϥΠηϯεͷAPIαʔϏεͩͱɺ

    தؒαʔόͰͷΩϟογϡ͕ېࢭ͞Ε͍ͯΔ͜ͱ͕ଟ͍ɻ

    View full-size slide