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

by Kihara, Takuya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ୭ • ໊લ tacck / ໦ݪ ୎໵ • ॴଐ גࣜձࣾϊʔεσΟςʔϧ • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά $MPWBεΩϧϦϦʔεͯ͠·͢ • ʮ͍ͭ΋ͷνΣοΫʯ • LINEࣾͷग़͍ͯ͠Δ  ʮLINE Clovaʯઐ༻εΩϧ • ேͷ࣋ͪ෺νΣοΫʹ  Ͳ͏ͧʂ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ྫ ࡳຈࢢͷ'SFF8J'J

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ஍ਤը૾ • ஍ਤը૾͸ OpenStreetMap ͷλΠϧը૾Λ࢖͏ɻ  (CC BY-SA 2.0) • ஍ਤը૾ͷऔಘɾදࣔํ๏Ͱ2छྨ • λΠϧը૾Λ௚઀APLͰѻ͏ • ஍ਤΛҰ୴ϔουϨεϒϥ΢βͰදࣔ͠  εΫϦʔϯγϣοτΛ࡞੒ͯ͠APL΁

Slide 13

Slide 13 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά • λΠϧը૾ ํ๏λΠϧը૾ ஍ਤΛλΠϧঢ়ʹ෼ׂ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά εΫϦʔϯγϣοτͰͷ՝୊ • ͦ΋ͦ΋؀ڥߏஙͷϋʔυϧ͕ߴΊɻ • ࠓճ͸ϦϞʔτͰPuppeteerΛ࢖ͬͯը૾Խ • ೋॏʹ௨৴͢Δ͜ͱʹͳΔͷͰɺ  දࣔ·Ͱʹ͕͔͔࣌ؒΔɻ(ͦ΋ͦ΋දࣔͰ͖ͯͳ͍)  → ͪ͜Β͸ɺࣄલʹΩϟογϡͰ͖Ε͹  ɹ ͋Δఔ౓ղܾͦ͠͏ɻ  (S3ͷը૾͸දࣔͰ͖ΔͷͰɺԠ౴͕࣌ؒ໰୊ɻ)

Slide 34

Slide 34 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ·ͱΊ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

!UBDDL εϚʔτεϐʔΧʔϛʔςΟϯά ஫ҙ • ຊ֨తʹ࢖͏৔߹͸Ωϟογϡ͕ඞཁ͕ͩɺ  ར༻͢Δ஍ਤαʔϏεʹΑͬͯ͸੍ݶ͞Ε͍ͯΔͷͰ஫ҙɻ • ྫ͑͹ • Google MapͰ͸εΫϦʔϯγϣοτΛ࢖͑ͳ͍ɻ • ঎༻ϥΠηϯεͷAPIαʔϏεͩͱɺ  தؒαʔόͰͷΩϟογϡ͕ېࢭ͞Ε͍ͯΔ͜ͱ͕ଟ͍ɻ