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

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

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

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

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

July 25, 2019
Tweet

Transcript

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

  2. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ୭ • ໊લ tacck / ໦ݪ ୎໵ •

    ॴଐ גࣜձࣾϊʔεσΟςʔϧ • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
  3. None
  4. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά $MPWBεΩϧϦϦʔεͯ͠·͢ • ʮ͍ͭ΋ͷνΣοΫʯ • LINEࣾͷग़͍ͯ͠Δ
 ʮLINE Clovaʯઐ༻εΩϧ •

    ேͷ࣋ͪ෺νΣοΫʹ
 Ͳ͏ͧʂ
  5. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ຊ୊

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

  7. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ͳͥ஍ਤΛද͍ࣔͨ͠ͷ͔ • (࠷ۙ)஍ਤΛ࢖͏ձࣾʹͳͬͨͷͰɻ • ͳͷͰɺ࠷ۙ஍ਤʹؔ͢Δ։ൃͳͲ΍Γ࢝Ίͨɻ • Google Maps

    API ࢖ͬͨΓɻ • Leaflet.js + OpenStreetMap ৮ͬͨΓɻ
  8. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ྫ ࡳຈࢢͷ'SFF8J'J

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

  10. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ͦΜͳΘ͚Ͱ • ͏·͘΍Ε͹ɺεϚʔτεϐʔΧʔͰ
 ஍ਤ৘ใΛఏڙͰ͖ΔͷͰ͸? • Alexa SkillͰ஍ਤදࣔʹτϥΠͯ͠Έ·ͨ͠ɻ

  11. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά جຊํ਑ • ࠓճ͸೉͍͜͠ͱ͸͠ͳ͍ • APLͰ஍ਤͷը૾ͷΈΛදࣔ • Ґஔ͸ݻఆ

  12. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ஍ਤը૾ • ஍ਤը૾͸ OpenStreetMap ͷλΠϧը૾Λ࢖͏ɻ
 (CC BY-SA 2.0)

    • ஍ਤը૾ͷऔಘɾදࣔํ๏Ͱ2छྨ • λΠϧը૾Λ௚઀APLͰѻ͏ • ஍ਤΛҰ୴ϔουϨεϒϥ΢βͰදࣔ͠
 εΫϦʔϯγϣοτΛ࡞੒ͯ͠APL΁
  13. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά • λΠϧը૾ ํ๏λΠϧը૾ ஍ਤΛλΠϧঢ়ʹ෼ׂ

  14. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά • λΠϧը૾ ํ๏λΠϧը૾ ΞϨΫαɺ
 ʓʓͷ஍ਤΛݟͤͯ OSMͷαʔό

  15. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά • λΠϧը૾ ํ๏λΠϧը૾ ΞϨΫαɺ
 ʓʓͷ஍ਤΛݟͤͯ OSMͷαʔό ର৅ͷҢ౓ܦ౓Λऔಘ͠ɺ ֘౰͢ΔλΠϧը૾Λऔಘ

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

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

  18. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ίʔυ ʮࡳຈӺʯͰҐஔ৘ใΛݕࡧ͠ɺ
 Ң౓ܦ౓Λऔಘɻ

  19. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ίʔυ Ң౓ܦ౓ΛɺλΠϧը૾ͷ
 XɾYʹஔ͖׵͑ɻ

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

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

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

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

  24. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά λΠϧը૾Ͱͷ՝୊ • ͦͷଞ • ஍ਤʹʮϐϯʯΛཱͯΔͳͲɺ
 Ұൠతͳ஍ਤը૾ʹཉ͍͠΋ͷΛ࡞ΓͮΒ͍ɻ

  25. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ํ๏εΫϦʔϯγϣοτ • εΫϦʔϯγϣοτΛදࣔ͢Δ৔߹ ΞϨΫαɺ
 ʓʓͷ஍ਤΛݟͤͯ OSMͷαʔό

  26. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ΞϨΫαɺ
 ʓʓͷ஍ਤΛݟͤͯ OSMͷαʔό SS࡞੒αʔό OSMͷ஍ਤΛҰ୴ϒϥ΢βͰදࣔ͠ ͦͷεΫϦʔϯγϣοτΛ AlexaͰදࣔ

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

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

  29. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ίʔυ ʮࡳຈӺʯͰҐஔ৘ใΛݕࡧ͠ɺ
 Ң౓ܦ౓Λऔಘɻ

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

  31. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ίʔυ DataSources಺΁
 URLΛઃఆɻ

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

  33. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά εΫϦʔϯγϣοτͰͷ՝୊ • ͦ΋ͦ΋؀ڥߏஙͷϋʔυϧ͕ߴΊɻ • ࠓճ͸ϦϞʔτͰPuppeteerΛ࢖ͬͯը૾Խ • ೋॏʹ௨৴͢Δ͜ͱʹͳΔͷͰɺ
 දࣔ·Ͱʹ͕͔͔࣌ؒΔɻ(ͦ΋ͦ΋දࣔͰ͖ͯͳ͍)


    → ͪ͜Β͸ɺࣄલʹΩϟογϡͰ͖Ε͹
 ɹ ͋Δఔ౓ղܾͦ͠͏ɻ
 (S3ͷը૾͸දࣔͰ͖ΔͷͰɺԠ౴͕࣌ؒ໰୊ɻ)
  34. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ·ͱΊ

  35. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ·ͱΊ • ΠϕϯτҊ಺΍ձࣾҊ಺ͳͲɺ
 ʮಛఆͷ৔ॴͷ஍ਤը૾දࣔʯͷΑ͏ͳ
 ද͍ࣔͨ͠஍ਤ৘ใΛݻఆԽͰ͖ΔγʔϯͰ͋Ε͹ɺ
 ࢖͑ͦ͏ɻ • ʮϒϥ΢βͷ஍ਤΞϓϦʯͰظ଴͞ΕΔػೳͷ࣮ݱʹ͸ɺ


    ·ͩ·ͩ޻෉͕ඞཁɻ

  36. !UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ஫ҙ • ຊ֨తʹ࢖͏৔߹͸Ωϟογϡ͕ඞཁ͕ͩɺ
 ར༻͢Δ஍ਤαʔϏεʹΑͬͯ͸੍ݶ͞Ε͍ͯΔͷͰ஫ҙɻ • ྫ͑͹ • Google

    MapͰ͸εΫϦʔϯγϣοτΛ࢖͑ͳ͍ɻ • ঎༻ϥΠηϯεͷAPIαʔϏεͩͱɺ
 தؒαʔόͰͷΩϟογϡ͕ېࢭ͞Ε͍ͯΔ͜ͱ͕ଟ͍ɻ