$30 off During Our Annual Pro Sale. View Details »

MapLibre, Svelte, Wikipediaデータを用いた地理空間情報可視化の事例 ...

MapLibre, Svelte, Wikipediaデータを用いた地理空間情報可視化の事例 / MIERUNE Meetup mini #01

Sorami Hisamoto

December 16, 2021
Tweet

More Decks by Sorami Hisamoto

Other Decks in Programming

Transcript

  1. ਓྨʹΑΔࢹ֮Խͷྺ࢙ ϑϨϯυϦʔˍ΢ΣΠφʔ ʰσʔλࢹ֮Խͷਓྨ࢙ʱ ʢ൧ౢوࢠ༁ʣʢ੨౔ࣾ ʣ lྺ࢙Λ௨ͯ͡ɺਓʑͷߟ͑΍ݱ৅͸ ࡾͭͷܗଶͰදݱ͞Ε͖ͯͨɻ͢ͳΘͪɺ ݴ༿ɺ਺ࣈɺͦͯ͠ਤ৅Ͱ͋Δɻz ʢQ ڧௐҾ༻ऀʣ

    l࣌୅Λ͞ΒʹਐΊΔͱɺࢹ֮Խͷ࣍ͷൃలظ͸ɺ ࠓͰ͸ਤදͱ͔ॳظͷ஍ਤͱݺ͹Ε͍ͯΔ΋ͷ ŠֆͰදݱ͞Ε͍ͯͳ͕Β΋ந৅తͳ৘ใΛද͠ ͍ͯĊͰىͬͨ͜ɻz ʢQ ڧௐҾ༻ऀʣ ΞφΫγϚϯυϩεʹΑΔੈք஍ਤ لݩલ೥୅ࠒʢࠨਤ͸࠶ݱʣ ग़య#JCJ4BJOU1BVM8JLJNFEJB ϥείʔಎ۸ͷนը ສ೥લͱਪఆ ग़య1SPGTBYY8JLJNFEJB
  2. ʮ஍ਤʯͱʮจࣈʯ एྛ๕थʰ஍ਤͷਐԽ࿦ʱ ʢ૑ݩࣾ ʣ lόϏϩχΞͷ೪౔൘஍ਤͰ͸จࣈ͕ఴ͑ΒΕ͍͕ͯͨɺ ஍ਤ͸จࣈ͕஀ੜ͢ΔҎલ͔Βଘࡏͨ͠ͱߟ͑ΒΕΔɻ ࠷ݹͷ஍ਤ͸ɺچੴث࣌୅ʹ͋ͨΔلݩલສ೥ࠒ ͷ΋ͷͱਪఆ͞ΕΔνΣίͷύϒϩϑਤͩͱ͍ΘΕ͍ͯΔ ͕ɺͦΕ͸ϚϯϞεͷէͷද໘ʹډॅ஍΍ऄߦ͢ΔՏ઒ ͷΑ͏͢Λூࠁͨ͠΋ͷͰ͋Δɻલड़ͷϕυϦʔφਤ͕

    ඳ͔Εͨ੨ಔث࣌୅ʹ͸ɺϝιϙλϛΞͳͲͰจࣈͷ࢖ ༻͸ΈΒΕͨ΋ͷͷɺΧϞχΧܢ୩ͷؠֆʹจࣈΒ͖͠ ΋ͷ͸ؚ·Ε͍ͯͳ͍ɻ͜Ε͸ɺจࣈͷ࢖༻ʹઌͩͬͯ ඳ͔Εͨ͜ͱΛ͍ࣔࠦͯ͠Δɻ ɹ͔͠͠ɺϕυϦʔφਤʹ͸ਓ΍Ո԰ΛֆจࣈʢϐΫτ άϥϜʣͷΑ͏ͳ༷ࣜԽ͞Εͨه߸Ͱඳ͍ͨ෦෼΋͋Δɻ ֆจࣈ͔Βදҙه߸΁ͱల։ͨ͠ͷ͕จࣈͷҰͭͷൃୡ ܥྻͩͱ͢Ε͹ɺจࣈͱ஍ਤه߸͕ಉ͡ىݯΛ࣋ͭͱߟ ͑ͯ΋Α͍͔΋͠Εͳ͍ɻz 
 ʢQ ڧௐҾ༻ऀʣ
  3. (*4

  4. (*4 0QFO.BQ5JMFT .BQCPY(-+4 2(*4 "SD(*4 -FB fl FU $FTJVN EFDLHM

    (FP+40/ 4IBQF fi MF (%"-0(3 5PQP+40/ 0QFO-BZFST 5VSGKT USFY 5FHPMB (FP4FSWFS (3"44(*4 1PTU(*4 %&. (FP%KBOHP (FP1BOEBT 0QFO4USFFU.BQ .75 1#' 'MBU(FPCVG "NB[PO-PDBUJPO4FSWJDF $IBSJUFT (5'4 1-"5&"6 $JUZ(.- ()045*/5)&4)&-- QH(FPDPEFS
  5. 0QFO.BQ5JMFT .BQCPY(-+4 2(*4 "SD(*4 -FB fl FU $FTJVN EFDLHM (FP+40/

    4IBQF fi MF (%"-0(3 5PQP+40/ 0QFO-BZFST 5VSGKT USFY 5FHPMB (FP4FSWFS (3"44(*4 1PTU(*4 %&. (FP%KBOHP (FP1BOEBT 0QFO4USFFU.BQ .75 1#' 'MBU(FPCVG "NB[PO-PDBUJPO4FSWJDF $IBSJUFT (5'4 1-"5&"6 $JUZ(.- ()045*/5)&4)&-- QH(FPDPEFS 🤯
  6. ࠃ౔ަ௨লʮҐஔࢀর৘ใʯ ʮશେࣈͷҢ౓ܦ౓ͷฏۉʯΛ ʮࢢ۠ொଜΛ୅ද͢ΔҢ౓ܦ౓ʯͱͨ͠ ʢʮେࣈொஸ໨ίʔυ͕࠷΋খ͍͞৔ॴʯͰ͸ ΤϦΞͷਅΜதͬΆ͘ͳΒͳ͍ײͩͬͨ͡ʣ ࢢ۠ொଜ Χॴ w ࢢ w

    ੓ྩࢦఆ౎ࢢͷ۠ w ౦ژ౎ͷಛผ۠ ࠃ౔஍ཧӃʹ ʮࢢ۠ொଜͷ໾ॴɾ໾৔ٴͼ౦੢ೆ๺୺఺ͷܦ౓Ң౓ʯ ͕͚͋ͬͨͲɺ1%'ʜ 
 IUUQTXXXHTJHPKQ,0,6+:0)0DFOUFSIUN
  7.  ʮ˓ग़਎ͷਓ෺Ұཡʯϖʔδ͔ΒϦϯΫઌΛྻڍ w ౎ಓ෎ݝɾ੓ྩࢦఆ౎ࢢϨϕϧ w ࢢ۠ொଜ୯ҐͰͷҰཡϖʔδ͸ͳ͍ w DG5FNQMBUFʖϊʔτ೔ຊग़਎ͷਓ෺ͷ߹ҙࣄ߲8JLJQFEJB w ʢ646,Ͱ͸ʮ1FPQMFGSPN9$JUZʯͱ͍͏Ұཡϖʔδ༗ʣ

     ֤ϦϯΫઌϖʔδͷʮग़਎஍ʯϓϩύςΟΛऔಘ w ߏ଄Խ͞Εͯ෇༩͞Εͨ৘ใ w όϦΤʔγϣϯ͕͋ͬͨ 
 ʮग़਎஍ʯʮग़ੜ஍ʯʮੜ஀஍ʯʮCJSUI1MBDFʯʮPSJHJOʯ w ˠ ϖʔδ %#QFEJB+BQBOFTF 8JLJQFEJBඦՊࣄయ൛ͷ0QFO4USFFU.BQ %#QFEJB8JLJQFEJBΛݩʹͨ͠ߏ଄Խ৘ใʢ-0%ʣΛެ։ 41"32-3%'ΫΤϦݴޠ%#QFEJBͷ໰͍߹Θͤʹར༻ SELECT * WHERE { <http: / / ja.dbpedia.org/resource/๺ւಓ> prop - ja:࠷ߴๆ ?o . } ๺ւಓ Ѵַ ࠷ߴๆ ओޠ ड़ޠ ໨తޠ
  8. 8JLJQFEJBͷग़਎஍৘ใجຊతʹϑϦʔςΩετ ˠͳΜͱ͔ͯ͠ɺݱଘ͢Δࢢ۠ொଜ໊΁ඥ෇͚Δ w  ͷʮग़਎஍ʯςΩετˠ Λ໊دͤ w ˠ݁Ռɺ ϖʔδ w

    ˠ ͷࢢ۠ொଜʹϖʔδҎ্͕ଘࡏ w ਓ͕ɺෳ਺ͷࢢ۠ொଜͱඥ෇͘͜ͱ͕͋Δ ग़਎஍໊ͷ໊دͤ ࢢ۠ொଜϨϕϧ΁ͷඥ෇͚ ˠʮԭೄݝʯʮ๺ւಓࡳຈࢢʯͳͲͷཻ౓͸ର৅֎ͱͳΔ l๺ւಓࡳຈ܊޿ౡொ ݱɾ๺޿ౡࢢ z ˠʮ๺޿ౡࢢʯʢ೥ࢢ੍ࢪߦʣ
  9. ݟΑ͏ݟ·ͶͰελΠϧ+40/Λॻ͘ w ·ͣPTNCSJHIUΛಡΉ w ΊͪΌͪ͘Ό୔ࢁͷϨΠϠʔ͕͋Δʂʂ w ˠϨΠϠʔ*%໊Λώϯτʹ 
 1ZUIPOͰ+40/Λฤूɺੜ੒ w

    ͔ͦ͜Βͻͨ͢ΒखͰฤू w ్தͰ.BQUVOJLΛݟ͚ͭΔˠศརʜ w ζʔϜΛߟྀͨ͠ελΠϦϯά೉͍͠ 
 NJO[PPN JOUFSQPMBUF FUDʜ .BQ-JCSF(-+4 എܠ஍ਤ w .BQ-JCSF(-+40QFO4USFFU.BQͷϕΫτϧλΠϧදࣔcEBZKPVSOBMNFNPΛࢀߟʹͨ͠ w ϕΫτϧλΠϧUJMFPQFOTUSFFUNBQKQ w 0QFO4USFFU.BQ'PVOEBUJPO+BQBO 0QFO.BQ5JMFT UJMFTFSWFSHM w DG.BQ-JCSFͱUJMFPQFOTUSFUNBQKQͰ࢝ΊΔϕΫτϧ஍ਤϓϩάϥϛϯά 5BSP.BUTV[BXB '044(5PLBJ ϖʔδϏϡʔ͔Βɺਓ෺ʢࢢ۠ொଜʣΛΧςΰϦ΁ w ສҎ্ສҎ্ສະຬ w ˠ(FP+40/ʹQSPQFSUZ෇༩ w ˠͦΕʹ͋Θͤͯԁ΍ϥϕϧͷେ͖͞Λઃఆ શੈքͷϕΫτϧλΠϧ0QFO.BQ5JMFTΛ࢖ͬͯ஍ਤͷελΠϦϯάΛ͢Δ2JJUB !NPSJUPSV .*&36/&"EWFOU$BMFOEBS ʣ ˠ͍͢͝ʂिؒલʹಡΈ͔ͨͬͨʜস
  10. JOEFYTWFMUF )FBEFSTWFMUF "CPVUTWFMUF .BQTWFMUF 4FBSDITWFMUF 3BOEPNTWFMUF 4WFMUFϑϩϯτΤϯυͷίϯύΠϥDG3FBDU 7VFKT "OHVMBS 4WFMUF,JU4WFMUFͷެࣜϑϨʔϜϫʔΫʢ·ͩЌ൛ʣDG/FYUKT

    /VYUKT 3BOEPN 4FBSDI "CPVU )FBEFS ˞༨ஊ 4WFMUF࡞ऀͷ3JDI)BSSJT͸ݩ/:λΠϜζͷάϥϑΟοΫΤσ Ολʔ 5IF1VEEJOH΋4WFMUFΛ࠷ۙ࢖͍ͬͯΔ໛༷
  11. w ҠಈζʔϜͨ͠Βʜ w αʔνόʔΛΫϦΞ w ϙοϓΞοϓΛඇදࣔ w ˠϙοϓΞοϓද͍͚ࣔͨ͠ͲɺҠಈͯ͠Δ͔Βফ͑Δʂ w ˠonce(“moveend”,

    () = > {…}) w Ҡಈ͕׬͔ྃͯ͠ΒίʔϧόοΫ .BQ-JCSFͷΠϕϯτɺ 4WFMUFͷϦΞΫςΟϏςΟ ·ͣΠϕϯτϦεφʔΛ֎ͯ͠ɺ Ҡಈ͕׬ྃͨ͠Βɺ ϙοϓΞοϓΛදࣔͯ͠ ͦͯ͠ΠϕϯτϦεφʔΛ෇͚௚͢ εϚϗͰͷจࣈೖྗ ΩʔϘʔυ͕ग़ݱ͢ΔͨΊɺ ҙਤͤͣʮҠಈʯͯ͠͠·͏ ʢݱࡏͷ࣮૷ΑΓ΋ͬͱεϚʔτͳํ๏͕͋Δͱࢥ͏ʜʣ
  12. ͝ ੩ ௌ ͋ Γ ͕ ͱ ͏ ͝ ͟

    ͍ · ͠ ͨ .BQ-JCSF  4WFMUF  8JLJQFEJBσʔλ Λ༻͍ͨ ஍ཧۭؒ৘ใՄࢹԽ ͷࣄྫ