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

.BQ-JCSF 4WFMUF 8JLJQFEJBσʔλΛ༻͍ͨ ஍ཧۭؒ৘ใՄࢹԽͷࣄྫ .*&36/&.FFUVQNJOJ !TPSBNJ ඪ௡܊ඪ௡ொ໺෇܊ผւொʹͯࡱӨ

໺෇൒ౡ   ೔ຊ࠷େͷ࠭ᅏ

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

GIS完全に理解した初⼼者だけど改め、発表タイトル

ܦݧ ࣗ ৴ 完全に理解したなにもわからないチョットデキル

ܦݧ ࣗ ৴ 完全に理解したなにもわからないチョットデキル μχϯάΫϧʔΨʔޮՌ ೳྗͷ௿͍ਓ͸ ࣗ෼ͷೳྗΛաେධՁ͢Δ %VOOJOH,SVHFS&GGFDU

(*4ίϛϡχςΟͷօ͞Μɺ͜Μ͹Μ͸ʂ !TPSBNJ 4PSBNJ)JTBNPUP 8FC ࣗવݴޠॲཧ &MBTUJDTFBSDI 5ZQF4DSJQU 7VFKT 1ZUIPO 3VTU
4VEBDIJ コンピューターで⼈間の⾔葉を扱う技術

8"1/-15FDI5BML !TPSBNJ Φʔϓϯιʔεͱͯ͠ͷ ܗଶૉղੳث4VEBDIJ ೥݄ಙౡʹͯࡱӨ ೔ຊޠʹ͓͚Δࣗવݴޠॲཧͷج൫ٕज़ʮܗଶૉղੳʯ

IUUQTEBJMZQPSUBM[KQLJKJSFBEJOHEJDUJPOBSZ σΠϦʔϙʔλϧ;

IUUQTEBJMZQPSUBM[KQLJKJSFBEJOHEJDUJPOBSZ ਫ໺ɿ͋ͱɺࣙయ͕޷͖ͳਓ͸ɺՋͳ࣌ʹάʔάϧϚοϓݟΔઆɻ ੢ଜɿݟ·͢Ͷʂ Ҵ઒ɿ࣮͸ɺ஍ਤ΋ʮݱ࣮ͷ΋ͷΛͳΔ͚ͩਖ਼֬ʹॻ͖ࣸͯ͠ɺ ͲͷΑ͏ʹ·ͱΊͯදݱ͢Δͷ͔ʯͱ͍͏ͱ͜Ζ͸ɺࣙయͱڞ௨ ͢Δͱ͜Ζ͕͋ΔΜͰ͢ΑͶɻ

ਓྨʹΑΔࢹ֮Խͷྺ࢙ ϑϨϯυϦʔˍ΢ΣΠφʔ ʰσʔλࢹ֮Խͷਓྨ࢙ʱ ʢ൧ౢوࢠ༁ʣʢ੨౔ࣾ ʣ lྺ࢙Λ௨ͯ͡ɺਓʑͷߟ͑΍ݱ৅͸ ࡾͭͷܗଶͰදݱ͞Ε͖ͯͨɻ͢ͳΘͪɺ ݴ༿ɺ਺ࣈɺͦͯ͠ਤ৅Ͱ͋Δɻz ʢQ ڧௐҾ༻ऀʣ
l࣌୅Λ͞ΒʹਐΊΔͱɺࢹ֮Խͷ࣍ͷൃలظ͸ɺ ࠓͰ͸ਤදͱ͔ॳظͷ஍ਤͱݺ͹Ε͍ͯΔ΋ͷ ֆͰදݱ͞Ε͍ͯͳ͕Β΋ந৅తͳ৘ใΛද͠ ͍ͯΔͰىͬͨ͜ɻz ʢQ ڧௐҾ༻ऀʣ ΞφΫγϚϯυϩεʹΑΔੈք஍ਤ لݩલ೥୅ࠒʢࠨਤ͸࠶ݱʣ ग़య#JCJ4BJOU1BVM8JLJNFEJB ϥείʔಎ۸ͷนը ສ೥લͱਪఆ ग़య1SPGTBYY8JLJNFEJB

ʮ஍ਤʯͱʮจࣈʯ एྛ๕थʰ஍ਤͷਐԽ࿦ʱ ʢ૑ݩࣾ ʣ lόϏϩχΞͷ೪౔൘஍ਤͰ͸จࣈ͕ఴ͑ΒΕ͍͕ͯͨɺ ஍ਤ͸จࣈ͕஀ੜ͢ΔҎલ͔Βଘࡏͨ͠ͱߟ͑ΒΕΔɻ ࠷ݹͷ஍ਤ͸ɺچੴث࣌୅ʹ͋ͨΔلݩલສ೥ࠒ ͷ΋ͷͱਪఆ͞ΕΔνΣίͷύϒϩϑਤͩͱ͍ΘΕ͍ͯΔ ͕ɺͦΕ͸ϚϯϞεͷէͷද໘ʹډॅ஍΍ऄߦ͢ΔՏ઒ ͷΑ͏͢Λூࠁͨ͠΋ͷͰ͋Δɻલड़ͷϕυϦʔφਤ͕
ඳ͔Εͨ੨ಔث࣌୅ʹ͸ɺϝιϙλϛΞͳͲͰจࣈͷ࢖ ༻͸ΈΒΕͨ΋ͷͷɺΧϞχΧܢ୩ͷؠֆʹจࣈΒ͖͠ ΋ͷ͸ؚ·Ε͍ͯͳ͍ɻ͜Ε͸ɺจࣈͷ࢖༻ʹઌͩͬͯ ඳ͔Εͨ͜ͱΛ͍ࣔࠦͯ͠Δɻ ɹ͔͠͠ɺϕυϦʔφਤʹ͸ਓ΍Ո԰ΛֆจࣈʢϐΫτ άϥϜʣͷΑ͏ͳ༷ࣜԽ͞Εͨه߸Ͱඳ͍ͨ෦෼΋͋Δɻ ֆจࣈ͔Βදҙه߸΁ͱల։ͨ͠ͷ͕จࣈͷҰͭͷൃୡ ܥྻͩͱ͢Ε͹ɺจࣈͱ஍ਤه߸͕ಉ͡ىݯΛ࣋ͭͱߟ ͑ͯ΋Α͍͔΋͠Εͳ͍ɻz   ʢQ ڧௐҾ༻ऀʣ

%KT %BUB%SJWFO%PDVNFOU 8FCͰͷσʔλՄࢹԽ

IUUQTEBUBWJ[NBOBCJCBWJTVBMJ[JOHKQ

IUUQTUXJUUFSDPNZVJDIZTUBUVT

み、みえるね？？

l.*&36/&͸ɺ Φʔϓϯσʔλͱ૊৫ͷ࣋ͭΫϩʔζυͳσʔλΛ Ґஔ৘ใΛى఺ʹඥ෇͚ɺՄࢹԽ͢Δ͜ͱͰɺ ༷ʑͳ՝୊Λղܾ͢Δ (*4ιϦϡʔγϣϯΧϯύχʔ Ͱ͢ɻz ग़యIUUQTXXXNJFSVOFDPKQBCPVUVTʢڧௐҾ༻ऀʣ

(*4じ、じす？？

(*4じ、じす？？ (FPHSBQIJD*OGPSNBUJPO4ZTUFN ஍ཧ৘ใγεςϜ

(*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

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 🤯

IUUQTXXXZPVUVCFDPNXBUDI WS,,@,;ONB[L .*&36/&νϟϯωϧ 2(*4ΦϯϥΠϯηϛφʔಋೖฤ(*4ͱ͸

IUUQTXXXZPVUVCFDPNXBUDI WH'CT+W;JP '044(5PLZP   ਗ਼ਫਖ਼ߦ͞Μʢ(6/."(*4(&&,ʣ

Excel & Bing Maps, ArcGIS Online, QGIS

カ、カッパ出没マップ？？ Excel & Bing Maps, ArcGIS Online, QGIS

カ、カッパ出没マップ？？ Excel & Bing Maps, ArcGIS Online, QGIS WebGIS

l8FC(*4ͬͯʁz lλΠϧͱ͸ʁzFUD   ʜūſŴŪƄ

.BQ-JCSF Φʔϓϯιʔεͷ஍ਤϥΠϒϥϦ w .BQ-JCSF(-+48FC w .BQ-JCSF/BUJWF"OESPJEJ04 ೥݄ͷ.BQCPYඇ044ԽʢWʣʹ൐͍஀ੜ .BQCPY(-+4W͔ΒͷϑΥʔΫ 4UBUFPGUIF.BQ1FUS1SJEBM IUUQTXXXZPVUVCFDPNXBUDI
W5EHZ",(7+@ IUUQTXXXZPVUVCFDPNXBUDI W[KTHSZ9LFK '044(1FUS1SJEBM

IUUQTHJUIVCDPNNBQMJCSFNBQMJCSFCMPCNBJO$0..6/*5:NE IUUQTEPDTHPPHMFDPNEPDVNFOUE6#7+@W.%;YGFNDVOXB@(I9P@;3:*F'J(MIXFEJU

IUUQTHJUIVCDPNNBQMJCSFNBQMJCSFHMKT ະڐՄͷ όοΫϙʔτ͕ ࠷େͷڴҖ ͋Γ͕ͱ͏.BQCPY🙏 ෼྾Λආ͚Α͏

lΦʔϓϯιʔεϓϩδΣΫτʹ͓͍ͯ͸ɺ࠷େͷߩݙऀ͕࠷େͷड ӹऀʹͳΔͱ͍͏ʮϑΣΞʯͳؔ܎ੑ͕ߏஙͰ͖ͳ͚Ε͹ɺ͍ͣΕ ͸ϓϩδΣΫτ͕נղ͢Δ͔ɺ͋Δ͍͸ίϛϡχςΟ཭୤ʢඇ044 ԽͳͲʣʹͳΔ͔ʹߦ͖ண͔͟ΔΛಘͳ͍͜ͱ͸ɺྺ࢙͕෺ޠͬͯ ͍Δɻz lܦӦਞʹͱͬͯ͸ɺ౤ࢿՈ͔ΒͷϓϨογϟʔํ͕ɺίϛϡχςΟ σΠ཭୤ͷϦΞΫγϣϯΑΓ΋ѹ౗తʹେ͖͍ͩΖ͏͠ɺΤϯλʔ ϓϥΠζྖҬΛސ٬λʔήοτͱͯ͠ߦ͘ʹ͋ͨͬͯ͸ɺ஌తࡒ࢈ ݖΛ׬શʹίϯτϩʔϧ͢΂͖ͱ͍͏ݟղ΋͋ΔͩΖ͏ɻͦͷத Ͱɺ044ϥΠηϯεͱͯ͠ఏڙ͠ଓ͚Δ͜ͱͷརӹΛɺ঎ۀతͳϩ
δοΫͰઆ໌͢Δͷ͸ͳ͔ͳ͔೉͍͠ɻz zࠓճͷඇ044Խ͸େม࢒೦͕ͩɺ͜Ε·Ͱͷ.BQCPYͷ஍ཧ৘ใί ϛϡχςΟσΠ΁ͷͱͯͭ΋ͳ͍ߩݙʹ৺͔Βײँ͢Δͱͱ΋ʹɺ ΧϥϑϧͳϩϯάςʔϧΛߏ੒͢ΔҰһͱͯ͠ɺࠓޙͷ׆༂ʹΤʔ ϧΛૹΓ͍ͨɻz .BQCPY(-+4ͷඇ044Խʹ͍ͭͯԣ඿εϩʔϥΠϑ.ZTMPX MJGFJO:PLPIBNB ڧௐҾ༻ऀ

IUUQTHJUIVCDPNTQPOTPSTNBQMJCSF

.BQ-JCSF(-+4Λ ࢖ͬͯΈΑ͏ .BQ-JCSF 4WFMUF 8JLJQFEJBσʔλΛ༻͍ͨ ஍ཧۭؒ৘ใՄࢹԽͷࣄྫ

A People Map of Japan

IUUQTQVEEJOHDPPM

IUUQTQVEEJOHDPPMQFPQMFNBQ ೔ຊ൛Λ࡞੒ ˞5IF1VEEJOHͷڐ୚ࡁ ʮ஍໊ʯΛʮग़਎ਓ෺໊ʯ ʹஔ͖׵͑ͨ஍ਤ

IUUQTTPSBNJEFWQFPQMFNBQKBQBO

ࢢ۠ொଜͱ Ң౓ܦ౓ ग़਎஍৘ใͷ ͋Δϖʔδ ࠃ౔ަ௨ল ʮҐஔࢀর৘ใʯ ϖʔδɾग़਎஍ (FP+40/ ϖʔδϏϡʔ ໊
د ͤ 41"32- 3&45"1*

ࠃ౔ަ௨লʮҐஔࢀর৘ใʯ ʮશେࣈͷҢ౓ܦ౓ͷฏۉʯΛ ʮࢢ۠ொଜΛ୅ද͢ΔҢ౓ܦ౓ʯͱͨ͠ ʢʮେࣈொஸ໨ίʔυ͕࠷΋খ͍͞৔ॴʯͰ͸ ΤϦΞͷਅΜதͬΆ͘ͳΒͳ͍ײͩͬͨ͡ʣ ࢢ۠ொଜ Χॴ w ࢢ w
੓ྩࢦఆ౎ࢢͷ۠ w ౦ژ౎ͷಛผ۠ ࠃ౔஍ཧӃʹ ʮࢢ۠ொଜͷ໾ॴɾ໾৔ٴͼ౦੢ೆ๺୺఺ͷܦ౓Ң౓ʯ ͕͚͋ͬͨͲɺ1%'ʜ   IUUQTXXXHTJHPKQ,0,6+:0)0DFOUFSIUN

ʮ˓ग़਎ͷਓ෺Ұཡʯϖʔδ͔ΒϦϯΫઌΛྻڍ 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 . } ๺ւಓ Ѵַ ࠷ߴๆ ओޠ ड़ޠ ໨తޠ

8JLJQFEJBͷग़਎஍৘ใجຊతʹϑϦʔςΩετ ˠͳΜͱ͔ͯ͠ɺݱଘ͢Δࢢ۠ொଜ໊΁ඥ෇͚Δ w ͷʮग़਎஍ʯςΩετˠ Λ໊دͤ w ˠ݁Ռɺ ϖʔδ w
ˠ ͷࢢ۠ொଜʹϖʔδҎ্͕ଘࡏ w ਓ͕ɺෳ਺ͷࢢ۠ொଜͱඥ෇͘͜ͱ͕͋Δ ग़਎஍໊ͷ໊دͤ ࢢ۠ொଜϨϕϧ΁ͷඥ෇͚ ˠʮԭೄݝʯʮ๺ւಓࡳຈࢢʯͳͲͷཻ౓͸ର৅֎ͱͳΔ l๺ւಓࡳຈ܊޿ౡொ ݱɾ๺޿ౡࢢ z ˠʮ๺޿ౡࢢʯʢ೥ࢢ੍ࢪߦʣ

ࣗવݴޠॲཧʜʂ/&3ʢ/BNFE&OUJUZ3FDPHOJUJPO ݻ༗දݱநग़ʣ ࣗવจ͔Βநग़͍ͨ͠ྫ δϟΨʔ ϩʔΧϧλϨϯτ 8JLJQFEJB ࣗવจʢඇߏ଄σʔλʣ͔Βͷ৘ใநग़ࠓճ͸ະ࣮ࢪ /-1ϥΠϒϥϦTQB$ZͰͷ/&3࣮ߦྫ ʢ4VEBDIJ͕಺෦Ͱ࢖ΘΕͯΔΑʣ

ϖʔδ͕ʮਓ෺ʯ͔Ͳ͏͔ͷ൑ఆ ʮग़਎஍ʯ͕͋Δϖʔδ ˠʮਓؒʯ͔Ͳ͏͔͸෼͔Βͳ͍ ʢԻָάϧʔϓͳͲؚ͕·ΕΔʣ ̙#QFEJBͷߏ଄৘ใ͔Βͷ൑ఆ ˠͰ͖ͳ͔ͬͨ

8JLJQFEJBͷϖʔδϏϡʔ 8JLJQFEJB3&45"1*͔Βऔಘ ೥݄೔೥݄೔ ˠ΋ͬͱ΋೥ؒ߹ܭ͕ଟ͍ϖʔδΛ஍ਤʹදࣔ ˞5IF1VEEJOH൛Ͱ͸೥෼͔Β೔ຖͰͷ࠷େதԝ஋Λར༻ ࢀߟ೔͝ͱϏϡʔ501 ࢀߟ೥ؒ߹ܭϏϡʔ501 ࢀߟʮେ୩ᠳฏʯ೔͝ͱͷϖʔδϏϡʔ

ݟΑ͏ݟ·ͶͰελΠϧ+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 ʣ ˠ͍͢͝ʂिؒલʹಡΈ͔ͨͬͨʜস

JOEFYTWFMUF )FBEFSTWFMUF "CPVUTWFMUF .BQTWFMUF 4FBSDITWFMUF 3BOEPNTWFMUF 4WFMUFϑϩϯτΤϯυͷίϯύΠϥDG3FBDU 7VFKT "OHVMBS 4WFMUF,JU4WFMUFͷެࣜϑϨʔϜϫʔΫʢ·ͩЌ൛ʣDG/FYUKT
/VYUKT 3BOEPN 4FBSDI "CPVU )FBEFS ˞༨ஊ 4WFMUF࡞ऀͷ3JDI)BSSJT͸ݩ/:λΠϜζͷάϥϑΟοΫΤσ Ολʔ 5IF1VEEJOH΋4WFMUFΛ࠷ۙ࢖͍ͬͯΔ໛༷

w ҠಈζʔϜͨ͠Βʜ w αʔνόʔΛΫϦΞ w ϙοϓΞοϓΛඇදࣔ w ˠϙοϓΞοϓද͍͚ࣔͨ͠ͲɺҠಈͯ͠Δ͔Βফ͑Δʂ w ˠonce(“moveend”,
() = > {…}) w Ҡಈ͕׬͔ྃͯ͠ΒίʔϧόοΫ .BQ-JCSFͷΠϕϯτɺ 4WFMUFͷϦΞΫςΟϏςΟ ·ͣΠϕϯτϦεφʔΛ֎ͯ͠ɺ Ҡಈ͕׬ྃͨ͠Βɺ ϙοϓΞοϓΛදࣔͯ͠ ͦͯ͠ΠϕϯτϦεφʔΛ෇͚௚͢ εϚϗͰͷจࣈೖྗ ΩʔϘʔυ͕ग़ݱ͢ΔͨΊɺ ҙਤͤͣʮҠಈʯͯ͠͠·͏ ʢݱࡏͷ࣮૷ΑΓ΋ͬͱεϚʔτͳํ๏͕͋Δͱࢥ͏ʜʣ

શͯͷίʔυͱσʔλ͸ (JU)VCͰެ։͍ͯ͠·͢

ܦݧ ࣗ ৴ GIS 完全に理解した

'044(+BQBO ೥݄೔ IUUQTXXXZPVUVCFDPNXBUDI WRBBX"%DM

🙂 🙂 🙂 (ۭؒ&910 ೥݄೔

IUUQTRJJUBDPNBEWFOUDBMFOEBSNJFSVOF .*&36/& "EWFOU$BMFOEBS

ܦݧ ࣗ ৴ なにもわからない…！

GIS 楽しい！（なにもわからないけど）

͝ ੩ ௌ ͋ Γ ͕ ͱ ͏ ͝ ͟
͍ · ͠ ͨ .BQ-JCSF 4WFMUF 8JLJQFEJBσʔλ Λ༻͍ͨ ஍ཧۭؒ৘ใՄࢹԽ ͷࣄྫ

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

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

More Decks by Sorami Hisamoto

Other Decks in Programming

Featured

Transcript